现在代码的格式都有 eslint、prettier、babel 这些来保证,但是技术手段再高端都不能解决代码可读性的问题。
因为这个只有个人才能解决。但是注意一下事项,可以显著提高代码的可读性、可识别性。
一、变量相关
1、限量数量的定义。
不要滥用变量,数据只使用一次或者不使用就无需装到变量中。
1 let kpi = 4; // 没用的就删掉2 function example() {3 let a = 1;4 let b = 2;5 return 2*a + b + 1;6 }
2、变量命名
无需对每个变量都写注释,从名字上就看懂。
1 // 不要2 let fName = ‘guo‘;3 let lName = ‘zheng‘;4 // 要这样5 let firstName = ‘guo‘;6 let lastName = ‘zheng‘;
3、特定的变量
1 if(value > 8) {2 // 为什么要大于 8 ,8 表示什么?长度?位移?还是高度?3 }4 // 应为5 const MAX_INPUT_LENGTH = 8;6 if(value > MAX_INPUT_LENGTH) {7 // 一目了然 8 }
4、变量命名
1 // 过于啰嗦2 let nameString;3 let theUsers;4 // 要简洁5 let name;6 let users;
5、使用说明性的变量 -- 即 有意义的变量
1 const address = ‘One Infinite Loop, Cupertino 95014‘; 2 const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 3 saveCityZipCode( 4 address.match(cityZipCodeRegex)[1], // 这个公式要干嘛? 5 address.match(cityZipCodeRegex)[2], // 这个公式要干嘛? 6 ) 7 // 用变量名解释长代码的含义 8 const address = ‘One Infinite Loop, Cupertino 95014‘; 9 const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;10 const [, city, zipCode] = address.match(cityZipCodeRegex) || []; // 解构赋值11 saveCityZipCode(city, zipCode)
6、避免使用太多全局变零
少用或者使用替代方案。
你可以选择只用局部变量,通过(){} 的方法。
如果确实有很多的全局变量需要共享,你可以使用vuex,redux 或者 自己参考 flux 模式写一个。
7、变量赋值
对于求职获取的变量,做好兜底。
1 // 没有兜底 2 const MIN_NAME_LENGTH = 8; 3 let lastName = fullName[1]; 4 if(lastName.length > MIN_NAME_LENGTH) { 5 // 这样就给代码埋了一个坑。当fullName 为一个元素时呢? 比如:fullName = [‘guo‘] 6 } 7 // 做好兜底 8 const MIN_NAME_LENGTH = 8; 9 let lastName = fullName[1] || ‘‘;10 if(lastName.length > MIN_NAME_LENGTH) {11 ...12 }13 // 其实在项目中很多求值变量,对于每个求值变量都需要做好兜底14 let propertyValue = Object.attr || 0; // 因为 Object.attr 有可能为空,所以要做好兜底。但是变量赋值不需要兜底。
二、函数相关
1、函数命名
对于返回 true 或 false 的函数,最好以 should、is、can、has 开头
1 function showFriendsList() {} // 现在问,返回的是一个数组,还是对象,还是 true or false。无法知道。2 // 一目了然3 function isEmpty() {}4 function hasClass() {}5 function canOpen() {}6 function shouldShow() {}
2、功能函数最好为纯函数
不要让功能函数的输出变化无常。功能函数使用纯函数,输入一致,输出结果永远唯一。
1 function plusAbc(a, b, c) {2 let c = fetch(‘../api‘); // 因为 api 变化,输出变化。3 return a + b + c;4 }5 // 纯函数6 function plusAbc(a, b, c) {7 return a + b + c;8 }
3、函数传参
1 pageXOffset.getSVG(api, true, false); // 让人看不懂这三个参数2 pageXOffset.getSVG({3 imageApi: api,4 includePageBackground: true,5 compress: false6 // 一目了然 知道这些参数是控制什么。7 });
4、动作函数要以动词开头
1 function sendEmailToUser() {}; 2 function getUserInfo() {};
5、一个函数完成一个独立功能,不要一个函数混杂多个功能。
当函数需要做更多事情时,他们会更难以编写、测试、理解、组合。当你能将一个函数抽离出来只完成一个动作,他们将更容易进行重构并且代码更容易阅读。
6、优先使用命令式编程。
1 // 使用for循环编程2 for(var i=1;i<10;i++) {3 // 每一项要做的事情4 }5 // 命令式6 let b = a.map(item => {7 // 每一项要做的事情8 })
7、函数过多使用if else
可以使用switch 替代,或者数组 替代。参考上一篇。
三、尽量使用ES6, 有可能的话使用 ES7
1、使用箭头函数 代替传统函数
1 // 传统2 function add() {}3 // 箭头函数4 let add = () => {}
2、连接字符串
使用模板字符串 代替 传统 +
1 // 传统2 let str = ‘hello‘ + name;3 // 模板4 let str = `hello${name}`
3、使用解构赋值
1 // 传统 2 let data = { name: ‘guo‘, age: 11 }; 3 let name = data.name; 4 let age = data.age; 5 6 let fullName = [‘guo‘, ‘zheng‘]; 7 let firstName = fullName[0]; 8 let lastName = fullName[1]; 9 10 // 解构赋值11 let data = { name: ‘guo‘, age: 11 };12 const {name, age} = data;13 14 let fullName = [‘guo‘, ‘zheng‘];15 const [firstName, lastName] = fullName;
4、尽量使用 class
不太会,以后再补
仅作学习笔记,如有雷同不是巧合,可能是参考过。