代码规范自我优化清单

此篇文档主要用来汇总关于代码规范以及更好的代码优化方面的记录清单！以此来更好的提高自身的代码规范，方便他人更快的去理解自己的代码，也为了不至于让别人看到自己的代码直接爆粗口，哈哈哈...

参考文档：juejin.cn/post/684490…

1、关于常量

• 建议变量采用大写加下划线的格式规范变量名：LOGIN_NUM

2、多个函数参数

• 函数参数如何超过2个，请使用ES6的解构语法，不需要考虑参数的顺序问题···

function testMoreParam({title, age, sex, height}) {
    console.log(title);
}

testMoreParam({
    sex: '女',
    height: '165cm',
    age: 22,
    title: '我是标题'
})

3、参数默认值

• 一直知道，一直想不起来用...

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

4、尽量简化代码，使用函数式编程，让代码更优雅

• 借此栗子学习两个重要的方法：map reduce

const programmerOutput = [{
    name: 'Uncle Bobby',
    linesOfCode: 500
}, {
    name: 'Suzie Q',
    linesOfCode: 1500
}, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
}, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
}];

// map有一个很棒的用处：它可以从数组对象中取出某个key的所有value值再拼成一个新数组返回！
console.log(programmerOutput.map(ele => ele.linesOfCode));    // [500,1500,150,1000]

const allLine = programmerOutput.map(ele => ele.linesOfCode).reduce((pre, current) => {    // 合计：3150
    return pre + current
})

• 我们再来回头学习一下生疏的reduce语法

// 参数： accumulator：累计器  currentValue：当前值  currentIndex：当前值的索引  array：数组  
// 可选：initialValue：初始值（第一次调用函数时第一个参数的值，没有提供此初始值，将使用数组中的第一个！）
const array = [30, 23, 29, 349, 39];
array.reduce((acc,cur) => {
    console.log('acc', acc); // 30 -> 53 -> 82 -> 431
    console.log('cur', cur); // 23 -> 29 -> 349 -> 39
    console.log('curIndex', curIndex); // 1,2,3,4
    return acc + cur; 
})

const array = [30, 23, 29, 349, 39];
array.reduce((acc, cur, curIndex) => {
    console.log('acc', acc); // 9999 -> 10029 -> 10052 -> 10081 -> 10430
    console.log('cur', cur); // 30 -> 23 -> 29 -> 349 -> 39
    console.log('curIndex', curIndex); // 0 -> 1 -> 2 -> 3 -> 4
    return acc + cur;
}, 9999)

5、关于css变量$以及样式配置文件的命名规范

• 利用sass,less中的变量配置，在项目初期针对项目的基础配色以及字体大小，间距等...进行统一设置引用，非常有利于项目后期的维护！
• 局部文件应该使用_name的形式命名。这样在编译的时候就不会把这个文件单独输出成css，而只是当做导入文件。

// _variables.less
@body-bg:#f3f3f3;  // 页面背景颜色
// 色板 根据项目变化改变色
@blue:                   #2080D4;
@yellow:                 #feb426;
@red:                    #f33;
@green:                  #00be71;

6、多行分割一个元素的多个属性

• 之前还特意将所有属性弄成一行，觉得显得代码行数少... 但是代码可读性就不高了！

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

7、使用逻辑与运算符简化 -> 简化一般的if判断

// bad
if (this.condition) {
    this.getUerInfo()
}
// good
this.condition && this.getUserInfo()

8、使用includes处理多重或（| |）判断

// bad
const param = 'condition1';
if (param === 'condition1' || param === 'condition2' || param === 'condition3') {
    // ...
}
// good
if (['condition1','condition2','condition3'].includes(param)) {
    // ...
}

9. 保持函数纯洁，函数操作后，不改变现有的对象

// bad 改变了原有的对象！
let temObj = {name:'wxw'};
let merge = (target,...source) => {
    return Object.assign(target, ...source);
}

console.log(merge(temObj,{age:22},{sex:'男'}));  //{name: "wxw", age: 22, sex: "男"}
console.log(temObj);  //{name: "wxw", age: 22, sex: "男"}

// good
let temObj = {name:'wxw'};
let merge = (...source) => {
    return Object.assign({}, ...source);
}

console.log(merge(temObj,{age:22},{sex:'男'})) ; //{name: "wxw", age: 22, sex: "男"}
console.log(temObj);   //{name: "wxw"}

10. 如果可以尽量使用Array相关方法，而不使用大量循环

比如这个需求：源数组筛选偶数后再进行自身平方运算

//bad  使用大量循环操作数组

// good 简洁
let array = [2,4,7,8];
let result = array.filter(ele=>{return ele%2 ===0 }).map(item =>{ return item*item });

11. 使用操作符...，忘掉apply

const param = ['王','晓雯'];
const greet = (firstName,lastName)=>{ return `hi ${firstName} ${lastName}`};
   
//bad
console.log(greet(param)); //hi 王,晓雯 undefined
console.log(greet.apply(null,param)); //hi 王 晓雯
//good 
console.log(greet(...param)); //hi 王 晓雯