Js代码优化

变量:
1、变量数量的定义:数据只使用一次 或 不使用就无须放到变量中
2、变量的命名:无需对每个变量都写注释,从名字上就看懂
3、特定的变量:

     const MAX_INPUT_LENGTH = 8;
     if(value.length < MAX_INPUT_LENGTH){
   
      }

4、变量的命名:做到简洁明了
5、使用说明性的变量(即有意义的变量名)
用变量名来解释长代码的含义:

     const address ='One Infinite Loop, Cupertino 95014';
     const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
     const [, city,zipCode] = address.match(cityZipCodeRegex) || [];
     saveCityZipCode(city,zipCode);

6、避免使用太多的全局变量
(少用或使用替代方案 你可以选择只用局部变量。通过(){}的方法
可以使用vuex redux模式写一个)

7、 变量的赋值:对于求值变量,做好兜底(不然自己给自己留坑) **

      let lastName = fullName[1] || ''
      let propertyValue = Object.attr || 0 || [] || null 
      
      后台数据渲染的时候 最好这样写:
         let listName =  res.listData && res.listData.name

******************************************华丽分割线******************************************

函数:
1、函数命名:
对于返回true or false的函数,最好以 should/is/can/has 开头 has/is
动作函数要以动词开头

2、功能函数最好为纯函数:输入一致,输出结果永远唯一
function plusAbc(a,b,c) {
return a+b+c;
}

3、函数传参:传参有说明
page.getSVG({
imageApi: api,
includePageBackground: true,
compress: false
})

4、一个函数完成一个独立的功能,不要一个函数混杂多个功能
(//各个击破,易于维护和复用)

5、优先使用函数式编程:
现在在javascript中几乎所有的for循环,都可以被map,filter,find,some,any,forEach等函数式编程取代。

6、过多的if...else 使用 switch替代 或用 数组 替代
if (a === 1){
} else if (a === 2){
} else if (a === 3){
} else {
}
替代:
switch(a) {
case 1:
case 2:
case 3:
default:
}
or
let handler = {
1: () =>{....}
2: () =>{....}
3: () =>{....}
default: () =>{....}
}

7、尽量使用ES6,有可以能的话ES7中新语法
1》尽量使用箭头函数
2》连接字符串:采用模板字符
3》使用解构赋值
4》尽量使用类class: 采用ES6实现继承

你可能感兴趣的:(Js代码优化)