网站建设有限公司,定制软件公司,磁力天堂最佳搜索引擎入口,做微商货源网站赚钱吗在阅读JavaScript代码时#xff0c;你是否有过这种感觉#xff1a;你几乎不明白代码的作用#xff1f;代码使用了很多 JavaScript 技巧#xff1f;命名和编码风格太过随意#xff1f; 这些都是不良编码习惯的征兆。 在阅读JavaScript代码时#xff0c;你是否有过这种感觉…在阅读JavaScript代码时你是否有过这种感觉你几乎不明白代码的作用代码使用了很多 JavaScript 技巧命名和编码风格太过随意 这些都是不良编码习惯的征兆。 在阅读JavaScript代码时你是否有过这种感觉
你几乎不明白代码的作用?代码使用了很多 JavaScript 技巧?命名和编码风格太过随意?
这些都是不良编码习惯的征兆。 在这篇文章中我描述了JavaScript中常见的5种不良编码习惯。重要的是本文会给出一些可行的建议如何的摆脱这些习惯。
1.不要使用隐式类型转换
JavaScript是一种松散类型的语言。 如果使用得当这是一个好处因为它给你带来了灵活性。
大多数运算符 - * / (不包括 )在处理不同类型的操作数时会进行隐式转换。
语句if(condition){...}while(condition){...}隐式地将条件转换为布尔值。
下面的示例依赖于类型的隐式转换这种有时候会让人感到很困惑
console.log(2 1); // 21 console.log(2 - 1); // 1 console.log( 0); // true console.log(true []); // - false console.log(true ![]); // - false
过度依赖隐式类型转换是一个坏习惯。 首先它使你的代码在边缘情况下不太稳定。 其次增加了引入难以重现和修复的bug的机会。
现在咱们实现一个获取对象属性的函数。如果属性不存在函数返回一个默认值
function getProp(object, propertyName, defaultValue) { if (!object[propertyName]) { return defaultValue; } return object[propertyName];
} const hero { name: Batman, isVillian: false
}; console.log(getProp(hero, name, Unknown)); // Batman
getProp() 读取name属性的值即Batman。
那么试图访问isVillian属性:
console.log(getProp(hero, isVillian, true)); // true
这是一个错误。即使 hero 的属性isVillian为false函数getProp()也会返回错误的true。
这是因为属性存在的验证依赖于if(!object [propertyName]){...}隐式转换的布尔值。
这些错误很难发现要修复该函数就要明确验证值的类型
function getPropFixed(object, propertyName, defaultValue) { if (object[propertyName] undefined) { return defaultValue; } return object[propertyName];
} const hero { name: Batman, isVillian: false
}; console.log(getPropFixed(hero, isVillian, true)); // false
object[propertyName] undefined确切地验证属性是否为undefined。
这里建议避免直接使用undefined。 因此上述解决方案可以进一步改进
function getPropFixedBetter(object, propertyName, defaultValue) { if (!(propertyName in object)) { return defaultValue; } return object[propertyName] }
原谅作者建议是:尽可能不要使用隐式类型转换。相反请确保变量和函数参数始终具有相同的类型必要时使用显式类型转换。
优秀实践列表
始终使用严格的相等运算符进行比较不要使用松散等式运算符加法运算符 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之前你可能会养成了将所有变量声明在函数作用域里面。
来看看一个例子
function someFunc(array) { var index, item, length array.length; /* * Lots of code */ for (index 0; index length; index) { item array[index]; // Use item } return someResult;
}
变量index、item和length 在函数作用域内。但是这些变量会影响函数作用域因为它们只在for()块作用域内才被需要。
通过引入具有块作用域 let和const应该尽可能地限制变量的生命周期。
function someFunc(array) { /* * Lots of code */ const length array.length; for (let index 0; index length; index) { const item array[index]; // Use item } return someResult;
}
index和 item 变量被限制为for()循环块作用域。length 被移动到使用地方的附近。
重构后的代码更容易理解因为变量不会分散在整个函数作用域内它们存在于使用地方的附近。
在使用的块作用域定义变量
if 块作用域
// 不好 let message; // ... if (notFound) { message Item not found; // Use message } // 好 if (notFound) { const message Item not found; // Use message }
for 块作用域
// 不好
let item;
for (item of array) { // Use item
} // 好
for (const item of array) { // Use item
}
4.尽量避免 undefined 和 null
未赋值的变量默认被赋值为undefined。例如
let count;
console.log(count); // undefined const hero { name: Batman
};
console.log(hero.city); // undefined
count变量已定义但尚未使用值初始化。 JavaScript隐式赋值给它undefined。
访问不存在的属性hero.city时也会返回undefined。
为什么直接使用undefined是一个不好习惯? 因为与undefined进行比较时你正在处理未初始化状态的变量。
变量、对象属性和数组在使用前必须用值初始化
JS 提供了很多避免与undefined进行比较方式。
判断属性是否存在
// 不好
const object { prop: value
};
if (object.nonExistingProp undefined) { // ...
} // 好
const object { prop: value
};
if (nonExistingProp in object) { // ...
}
对象的默认属性 // 不好
function foo(options) { if (object.optionalProp1 undefined) { object.optionalProp1 Default value 1; } // ...
} // 好
function foo(options) { const defaultProps { optionalProp1: Default value 1 }; options { ...defaultProps, ...options }
}
默认函数参数
// 不好
function foo(param1, param2) { if (param2 undefined) { param2 Some default value; } // ...
}
// 好
function foo(param1, param2 Some default value) { // ...
}
null是一个缺失对象的指示符。应该尽量避免从函数返回 null特别是使用null作为参数调用函数。
一旦null出现在调用堆栈中就必须在每个可能访问null的函数中检查它的存在这很容易出错。 function bar(something) { if (something) { return foo({ value: Some value }); } else { return foo(null); }
} function foo(options) { let value null; if (options ! null) { value options.value; // ... } return value;
}
尝试编写不涉及null的代码。 可替代方法是try /catch机制默认对象的使用。
5. 不要使用随意的编码风格执行一个标准
有什么比阅读具有随机编码风格的代码更令人生畏的事情? 你永远不知道会发生什么!
如果代码库包含许多开发人员的不同编码风格该怎么办?这种就像各色人物涂鸦墙。 整个团队和应用程序代码库都需要相同的编码风格它提高了代码的可读性。
一些有用的编码风格的例子
Airbnb JS 风格指南谷歌 JS 风格指南
老实说当我在回家前准备提交时我可能会忘记设计代码的样式。
我自己总说:保持代码不变以后再更新它但是“以后”意味着永远不会。
这里建议使用 eslint 来规范编码风格。
安装eslint使用最适合自己的编码风格配置 eslint设置一个预提交钩子在提交之前运行eslint验证。
总结
编写高质量和干净的代码需要纪律克服不好的编码习惯。
JavaScript是一种宽容的语言具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换undefined 和 null 。
现在这种语言发展得相当快。找出复杂的代码并使用最新 JS 特性来重构。
整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。
代码部署后可能存在的BUG没法实时知道事后为了解决这些BUG花了大量的时间进行log 调试这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 阅读目录置顶)(长期更新计算机领域知识https://blog.csdn.net/weixin_43392489/article/details/102380691
阅读目录置顶)(长期更新计算机领域知识https://blog.csdn.net/weixin_43392489/article/details/102380882
