随笔录（一）

不积跬步，无以至千里；不积小流，无以成江海； ——《劝学》荀子

say hi~

关于dev,sit,uat等的区别

按开发、测试、上线的时间线排序：

DEV Development 研发环境
SIT System Integrate(整合) Test 系统集成测试环境（内测）
UAT User Acceptance Test 用户验收测试环境
PET Performance Evaluation Test 性能评估测试环境（压测）
SIM Simulation 高仿真环境
PRD/PROD Production 正式/生产环境

深入浅出dev、test、pre、pro四大环境

mp.weixin.qq.com/s?__biz=MzI…

JSON的stringify()&parse()方法

    JSON.stringify(value, replacer, space)

参数说明：

value

必需，要转换JavaScript值，通常为对象或数组。
replacer

可选，用于转换结果的函数或数组。

如果replacer为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。
space

可选，文本添加缩进、空格和换行符，如果space是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果space大于10，则文本缩进10个空格，space也可以使用非数字。

    JSON.parse(value,revier);   //返回值：一个对象或数组

参数说明:

value

必需，一个有效的JSON字符串
revier

可选，一个转换结果的函数。

幽灵空白节点解决方案

 1.父元素字体大小设置为0;
 2.图片设置为块级;

单行文本溢出及多行文本溢出

    //单行
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;

   //多行
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;

防止父元素与子元素上端粘连

1.给父元素添加padding-top值;
2.给父元素添加border值。

css伪类

:optional

   //可设置可选字段的样式(非必需-required字段)

   input:optional {
     border-color: rebeccapurple;
     border-width: 3px;
   }

full support

VUE框架中Watch的其他用法

1.handler方法 && immediate属性

//假设name是需要监测的变量
原始写法：
···
watch：{
	name(newVal,oldVal) {
		this.totalname = newVal + ' ' + this.lastname; 
    }
}
···
//以上代码的效果是，当输入name值之后，watch监听每次修改变化的新值，然后计算输出totalname;

...
watch:{
    name: {
        handler(newVal,oldVal) {
            this.totalname = newVal + ' ' + this.lastname; 
        }
        immediate: true //立即执行，在绑定的时候就执行
    }
}
...
//以上代码的效果是，只要绑定了变量会立即执行，而不是当变量发生变化时才执行，相当于会多执行一次；其实普通的watch方法都是当变量修改变化时才执行，在这里如果设置immediate：false ,则跟之前的效果一样

2.deep属性

watch里面还有一个deep属性，该属性的默认值为false,作用是是否深度监听；常用于监听对象内元素对应值的变化。

如果不设置deep:true；的话，只有赋值的时候可以监听到变化；修改不可。

个人整理，实属不易，望君珍惜！

前端----随笔录（一）