江苏龙网

  1. 主页 > 生活百科 > >

3个编写JavaScript高质量代码的技巧，让你不再996( 三 )

JavaScript


除了以上介绍的四点建议外 ， 还有很多可以改善代码性能的点 ， 如：减少DOM操作、节流处理、事件委托等等 。
健壮性的代码所谓健壮性的代码 ， 就是编写出来的代码 ， 是可扩展、可维护、可测试的代码 。这里总结了四点具体操作方式分享给大家 。
第一点：使用新语法很多新语法可弥补之前语法的BUG ， 让代码更加健壮 ， 应对未来 。
// badvar a = 1isNaN(NaN)// trueisNaN(undefined)// true// goodlet a = 1Number.isNaN(NaN)// trueNumber.isNaN(undefined) // false新语法还可以简化之前的操作 ， 让代码结构更加清晰 。// badlet user = { name: "james", age: 36 }function foo() {let arg = argumentslet name = user.namelet age = user.age}// goodlet user = { name: "james", age: 36 }function foo(...arg) {// 剩余参数let { name, age } = user// 解构赋值}第二点：随时可扩展由于产品需求总是会有新的变更 ， 对软件的可扩展能力提出了很高要求 ， 所以健壮的代码都是可以随时做出调整的代码 。
// badfunction foo(animal) {if (animal === "dog" || animal === "cat") {// todos}}function bar(name, age) {}bar("james", 36)// goodfunction foo(animal) {const animals = ["dog", "cat", "hamster", "turtle"]// 可扩展匹配值if (animals.includes(animal)) {// todos}}function bar(options) {}// 可扩展任意参数bar({gender: "male",name: "james",age: 36,})第三点：避免副作用当函数产生了除了“接收一个值并返回一个结果”之外的行为时 ， 就产生了副作用 。副作用不是说一定是有害的 ， 但是如果在项目中没有节制的引起副作用 ， 代码出错的可能性会非常大 。
建议尽量不要去修改全局变量或可变对象 ， 通过参数和return完成需求 。让函数成为一种纯函数 ， 这样也可使代码更容易被测试 。
// badlet fruits = "Apple Banana"function splitFruits() {fruits = fruits.split(" ")}function addItemToCart(cart, item) {cart.push({ item, data: Date.now() })}// goodlet fruits = "Apple Banana"function splitFruits(fruits) {return fruits.split(" ")}function addItemToCart(cart, item) {return [...cart, { item, data: Date.now() }]}第四点：整合逻辑关注点当项目过于复杂的时候 ， 经常会把各种逻辑混在一起 ， 对后续扩展非常不利 ， 而且还影响对代码的理解 。所以尽量把相关的逻辑抽离到一起 ， 进行集中式的管理 。像React中的hooks ， Vue3中的Composition API都是采用这样的思想 。
// badexport default {name: 'App',data(){return {searchHot: [],searchSuggest: [],searchHistory: [],},mounted() {// todo hot// todo history},methods: {handleSearchSuggest(){// todo suggest},handleSearchHistory(){// todo history}}}}// goodexport default {name: "App",setup() {let { searchHot } = useSearchHot()let { searchSuggest, handleSearchSuggest } = useSearchSuggest()let { searchHistory, handleSearchHistory } = useSearchHistory()return {searchHot,searchSuggest,searchHistory,handleSearchSuggest,handleSearchHistory,}}}function useSearchHot() {// todo hot}function useSearchSuggest() {// todo suggest}function useSearchHistory() {// todo history}除了以上介绍的四点建议外 ， 还有很多可以改善代码健壮性的点 ， 如：异常处理、单元测试、使用TS替换JS等等 。
最后总结一下 ， 如何编写高质量JavaScript代码：

3个编写JavaScript高质量代码的技巧，让你不再996

文章插图
 
欢迎关注「慕课网」 ， 发现更多IT圈优质内容 ， 分享干货知识 ， 帮助你成为更好的程序员！




推荐阅读


上一篇：什么是深度学习？人工智能能影响未来的特点之一

下一篇：横空出世！MyBatis-Plus同款ES ORM框架，用起来够优雅