工作随记

减少嵌套 if…else 或 switch case，简单地使用基本的逻辑运算符AND/OR。

// 与 if (foo == 10) then console.log('进入判断了') 相同 // 输出: 进入判断了 
let foo = 10; foo === 10 && console.log('进入判断了')  
// 与 if (foo != 5) then console.log('进入判断了') 相同 // 输出: 进入判断了
foo === 5 || console.log('进入判断了') 

Rest（剩余） & Spread （扩展）运算符(…的两种意义)

//示例1  方法结构传参
function spread(arg1, arg2, arg3) {
    console.log(arg1);
    console.log(arg2);
    console.log(arg3);
}

var arr = [1, 2, 3];
spread(...arr);

//示例2  合并数组或者对象
var arr1 = [1, 2, 3, 4];
var arr2 = [...arr1, 4, 5, 6];
var obj1 = { a: 1, b: 2, c: 3 };
var obj2 = { ...obj1, d: 4, e: 5, f: 6 };
console.log(arr2);

// 示例1 当函数参数个数不确定时
function rest1(...arr) {
    for (let item of arr) {
        console.log(item);
    }
}
rest1(1,2,3,4);

//示例2 当确定其中几个,后续未知
function rest2(item, ...arr) {
    console.log(item);
    console.log(arr);
}
rest2(1,2,3,4);

//示例3 rest运算符配合 解构使用：
var [a, ...temp] = [1,2,3,4];
console.log(a);
console.log(temp);

开发技巧

尽量在开发中面向接口开发，而不是为了任务去拼凑代码从而将代码开发成了面向实现开发。

自定义边框虚线

// 一条直的虚线
background-image: linear-gradient(to bottom, #3A75FF 0%, #3A75FF 80%, transparent 50%);
background-size: 3px 18px;
background-repeat: y-repeat;
// 边框虚线
background: linear-gradient(90deg, #3A75FF 50%, transparent 0) repeat-x, linear-gradient(90deg, #3A75FF 50%, transparent 0) repeat-x, linear-gradient(0deg, #3A75FF 50%, transparent 0) repeat-y, linear-gradient(0deg, #3A75FF 50%, transparent 0) repeat-y;
background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
background-position: 0 0, 0 100%, 0 0, 100% 0;

项目整体置灰

为应对各种哀悼日将项目整体置灰

body,html{
  filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1); //针对IE浏览器 
  -webkit-filter: grayscale(100%);
}

video部分浏览器出现边框问题

对边框进行设置mask-image