写出良好风格的JS、CSS代码
现在代码的格式都有 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: false 6 // 一目了然 知道这些参数是控制什么。 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
不太会，以后再补
四、别处补充来
1、采用utf-8编码，在CSS头部使用。
@charset "utf-8"
必须定义在css文件所有字符前面(包括注释)，才能生效
2、定义的选择器名，属性及属性值的书写皆为小写。
3、当一个规则包含多个选择器时，每个选择器独占一行。
+、~、> 选择器的两边各留一个空格
.header > .header-res,
.footer + .footer-res {}
4、选择器命名尽量 简洁且语义化
5、数值 与 单位
当属性值或颜色参数为 0 ---- 1 之间的数时，省略0
color： rgba(255, 255, 255, .6)
当长度为 0 时，省略单位，margin: 0 auto 20px;
十六进制颜色 使用小写且尽量简写。
样式属性的顺序：
如果包含content属性，应放在最前面。
布局方式、位置相关属性。position / top / right / bottom / left / z-index / display / float / …
盒模型相关属性。width / height / padding / margin / border / overflow / …
文本排版相关属性。font / line-height / text-align / word-wrap / …
视觉外观相关属性。color / background / list-style / transform / animation / transition / …
合理使用引号：在某些样式中，会出现一些含有空格的关键字或者中文关键字。
1 body { 2 font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53'; 3 }
div { background-image: url('...'); }
避免使用 !important
尽量避免使用标签名。提高CSS匹配性能。CSS 选择器的解析规则： 从右到左。
仅作学习笔记，如有雷同不是巧合，可能是参考过。
