阅读JavaScript代码时,你有没有感觉:
你几乎不明白代码的作用?
代码使用了很多JavaScript技巧?
命名和编码风格相当随机?
这些是编码习惯不良的迹象。
在这篇文章中,我描述了JavaScript中常见的5种不良编码习惯。重要的是,我将就如何摆脱这些习惯提出可行的建议。
1.不要使用隐式类型转换
JavaScript是一种松散类型的语言。如果使用得当,这是一个好处,因为它给你带来了灵活性。
使用不同类型的操作数时,大多数运算符+ - * / ==(但不是===)使用类型的隐式转换。
该声明if (condition) {...},while(condition) {...}含蓄地变换的条件为布尔值。
以下示例依赖于类型的隐式转换。我敢打赌你会感到困惑:
过度依赖隐式类型转换是一个坏习惯。首先,它使您的代码在边缘情况下不太稳定。其次,您增加了引入难以重现和修复的错误的机会。
让我们实现一个获取对象属性的函数。如果该属性不存在,则该函数返回默认值:
getProp()读取name属性的值,即'Batman'。
尝试访问isVillian属性怎么样:
console.log(getProp(hero, 'isVillian', true)); // => true
那是一个错误。即使hero属性isVillian是false,函数getProp()返回错误true。
这是因为属性存在的验证依赖于隐式转换为布尔值if (!object[propertyName]) {...}。
这些错误很难发现。要修复该函数,请明确验证值的类型:
object[propertyName] === undefined验证属性访问者是否评估到的确切内容undefined。这里建议避免直接使用 undefined。因此,上述解决方案可以进一步改进:
尽可能不要使用隐式类型转换。相反,请确保变量和函数参数始终具有相同的类型,必要时使用显式类型转换。
佳实践列表:
始终使用严格相等运算符===来执行比较
不要使用松散的相等运算符 ==
加法运算符operand1 + operand2:两个操作数应该是数字或两个字符串
算术运算符- * / % **:两个操作数都应该是数字
if (condition) {...},while (condition) {...}等等语句:condition应该是一个布尔值
您可能会说这种方法需要编写更多代码......您说得对!但是通过明确的方法,您可以控制代码的行为。此外,显性提高了可读性。
2.不要使用旧的JavaScript技巧
JavaScript的有趣之处在于,它的创建者没有料到这种语言会如此流行。
基于JavaScript构建的应用程序的复杂性比语言发展的速度还要快。这种情况迫使开发人员使用JavaScript技巧和变通方法,只是为了让事情正常运行。
一个典型的例子是查看数组是否包含某个元素。我从来不喜欢使用 array.indexOf(item)!==-1来检查。
ES6 及以后版本的功能要强大得多,可以使用新的语言特性安全地重构许多技巧。
ES6 中可以使用 array.includes(item) 来代替 array.indexOf(item)!==-1
3. 不要污染函数作用域
在ES2015之前,你可能会养成了将所有变量声明在函数作用域里面。
来看看一个例子:
变量 index、item和 length 在函数作用域内。但是这些变量会影响函数作用域,因为它们只在 for()块作用域内才被需要。
通过引入具有块作用域 let和 const,应该尽可能地限制变量的生命周期。
index和 item 变量被限制为 for()循环块作用域。length 被移动到使用地方的附近。
重构后的代码更容易理解,因为变量不会分散在整个函数作用域内,它们存在于使用地方的附近。
在使用的块作用域定义变量
if 块作用域
for 块作用域
4.尽量避免 undefined 和 null
未赋值的变量默认被赋值为 undefined。例如
count变量已定义,但尚未使用值初始化。JavaScript隐式赋值给它 undefined。
访问不存在的属性 hero.city时,也会返回 undefined。
为什么直接使用 undefined是一个不好习惯?因为与 undefined进行比较时,你正在处理未初始化状态的变量。
变量、对象属性和数组在使用前必须用值初始化
JS 提供了很多避免与 undefined进行比较方式。
判断属性是否存在
对象的默认属性
默认函数参数
null是一个缺失对象的指示符。应该尽量避免从函数返回 null,特别是使用 null作为参数调用函数。
一旦 null出现在调用堆栈中,就必须在每个可能访问 null的函数中检查它的存在,这很容易出错。
尝试编写不涉及 null的代码。可替代方法是 try/catch机制,默认对象的使用。
5. 不要使用随意的编码风格,执行一个标准
有什么比阅读具有随机编码风格的代码更令人生畏的事情?你永远不知道会发生什么!
如果代码库包含许多开发人员的不同编码风格,该怎么办?,这种就像各色人物涂鸦墙。
整个团队和应用程序代码库都需要相同的编码风格,它提高了代码的可读性。
一些有用的编码风格的例子:
Airbnb JS 风格指南
谷歌 JS 风格指南
老实说,当我在回家前准备提交时,我可能会忘记设计代码的样式。
我自己总说:保持代码不变,以后再更新它,但是“以后”意味着永远不会。
这里建议使用 eslint 来规范编码风格。
安装eslint
使用适合自己的编码风格配置 eslint
设置一个预提交钩子,在提交之前运行eslint验证。
总结
编写高质量和干净的代码需要纪律,克服不好的编码习惯。
JavaScript是一种宽容的语言,具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换, undefined 和 null 。
现在这种语言发展得相当快。找出复杂的代码,并使用新 JS 特性来重构。
整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。