无论你是 React 开发者还是 Node.js 开发者. 都能写出可以运行的代码. 但是你写的代码美观并且别人能看懂吗?
下面的规则可以让你的 JavaScript 代码更加整洁和清晰.
规则1. 不要使用随机的字符作为变量
不要使用随机字符去表示一个变量.
// BADconst x = 4;复制代码
应该采用语义化的方式去命名变量.
// GOODconst numberOfChildren = 4;复制代码
规则2. 使用驼峰式命名
不要使用蛇形命名(snake_case)、帕斯卡命名(PascalCase)或者变量名以动词开头.
// Bad: 以大写字母开头 var UserName = "Faisal"; // Bad: 以动词开头 var getUserName = "Faisal"; // Bad: 使用下划线 var user_name = "faisal";复制代码
使用驼峰命名法代替, 并且使用名词.
// Goodconst userName = "Faisal";复制代码
规则3. 使用良好的驼峰来命名函数
函数名不要用名词, 避免与变量名混淆.
// Bad: 以大写字母开头 function DoSomething() { // code }
// Bad: 以名词开头 function car() { // code }
// Bad: 使用下划线 function do_something() { // code }复制代码而应该使用驼峰式命名, 并且以动词开头.
//GOODfunction doSomething() {// code}复制代码规则4. 使用帕斯卡来命名构造函数
// Bad: 以小写字母开头 function myObject() { // code }
// Bad: 使用下划线 function My_Object() { // code }
// Bad: 以动词开头 function getMyObject() { // code }复制代码同样的, 构造函数名不应该以动词开头, 并且通过 new 来创建对象实例是一个动作.
// GOODfunction MyObject() { // code }复制代码规则5. 全局常量
全局常量的值不能被改变, 不应该以命名正常变量的方式来命名它.
// BADconst numberOfChildren = 4;// BAD const number_of_children = 4;复制代码
所有的单词应该大写, 并且以下划线分隔.
// GOODconst NUMBER_OF_CHILDREN = 4;复制代码
规则6. 分配变量
不要直接将一个 比较值 分配给变量.
// BAD const flag = i < count;复制代码
应该使用小括号包裹:
// GOODconst flag = (i < count);复制代码
规则7. 相等运算符的用法
不要使用 "==" 或 "!=" 来对比值. 因为它们不会检查两个值的类型是否相同.
//BADif (a == b){//code}复制代码而应该使用 "===" 或 "!==", 避免类型错误.
//GOODif (a === b){//code}复制代码规则8. 三元运算符的用法
不要使用三元运算符代替 if 条件语句:
//BADcondition ? doSomething() : doSomethingElse();复制代码
仅仅在某些条件下使用它来分配值:
// GOODconst value = condition ? value1 : value2;复制代码
规则9. 简单的声明
不要在一行写多个声明语句, 尽管 JavaScript 是支持这么写的.
// BADa =b; count ++;复制代码
多个声明语句应该分成多行. 并且总是应该在语句的末尾添加分号.
// GOODa = b; count++;复制代码
规则10. if 语句的使用
不要省略 if 语句的大括号, 并且首尾大括号不要写在同一行.
// BAD: 不正确的空格 if(condition){
doSomething();
}
----// BAD: 缺失大括号 if (condition)
doSomething();
----// BAD: 所有的代码都在一行 if (condition) { doSomething(); }
----// BAD: 代码挤在一行, 并且没有大括号 if (condition) doSomething();复制代码应该总是使用大括号并且进行适当的缩进:
// GOODif (condition) {
doSomething();
}复制代码规则11. 循环语句的用法
不要在 for 循环内部声明变量.
// BAD: 在循环体内声明变量 for (let i=0, len=10; i < len; i++) { // codelet i = 0;
}复制代码而应该在 for 循环之前声明.
// GOODlet i = 0;for (i=0, len=10; i < len; i++) { // code }复制代码规则12. 缩进长度保持一致
始终使用 2 个或 4 个缩进.
// GOODif (condition) {
doSomething();
}复制代码规则13. 单行长度
任意行的代码都不要超过 80 个字符. 如果超出的话, 超出的部分应该另起一行.
// BAD: 下一行只缩进 4 个空格 doSomething(argument1, argument2, argument3, argument4, argument5); // BAD: 在运算符前换行 doSomething(argument1, argument2, argument3, argument4 ,argument5);复制代码
第二行应该是 8 个缩进而不是 4 个, 并且不应该以分隔符开头.
// GOODdoSomething(argument1, argument2, argument3, argument4, argument5);复制代码
规则14. 原始值
字符串不应该使用单引号包裹.
// BADconst description = 'this is a description';复制代码
而应该使用双引号.
// GOODconst description = "this is a description";复制代码
规则15. 使用 "undefined"
不要使用全等运算符判断变量是否为 undefined.
// BADif (variable === "undefined") { // do something }复制代码使用 typeof 操作符来查看一个变量是否已经定义.
// GOODif (typeof variable === "undefined") { // do something }复制代码因此, 遵循上述的这些规则, 可以让你的 JavaScript 项目更加整洁.
上述所有的规则都可以在 "编写可维护的JavaScript" 这本书中找到. 所以即使你不同意其中的某些规则也没关系. 因为编码风格是多样化的. 但是这些规则可以作为一个良好的起点.
编码愉快! :D
