文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何写出优雅耐看的JavaScript代码

2024-12-24 22:37

关注

干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。

[[277405]]

我们从以下几个方面进行探讨：

变量

1、变量命名

一般我们在定义变量是要使用有意义的词汇命令，要做到见面知义

 

  1. //bad code 
  2. const yyyymmdstr = moment().format('YYYY/MM/DD'); 
  3. //better code 
  4. const currentDate = moment().format('YYYY/MM/DD'); 

2、可描述

通过一个变量生成了一个新变量，也需要为这个新变量命名，也就是说每个变量当你看到他第一眼你就知道他是干什么的。

 

  1. //bad code 
  2. const ADDRESS = 'One Infinite Loop, Cupertino 95014'; 
  3. const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
  4. saveCityZipCode(ADDRESS.match(CITY_ZIP_CODE_REGEX)[1], ADDRESS.match(CITY_ZIP_CODE_REGEX)[2]); 
  5.  
  6. //better code 
  7. const ADDRESS = 'One Infinite Loop, Cupertino 95014'; 
  8. const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; 
  9. const [, city, zipCode] = ADDRESS.match(CITY_ZIP_CODE_REGEX) || []; 
  10. saveCityZipCode(city, zipCode); 

3、形参命名

在for、forEach、map的循环中我们在命名时要直接

 

  1. //bad code 
  2. const locations = ['Austin', 'New York', 'San Francisco']; 
  3. locations.map((l) => { 
  4.   doStuff(); 
  5.   doSomeOtherStuff(); 
  6.   // ... 
  7.   // ... 
  8.   // ... 
  9.   // 需要看其他代码才能确定 'l' 是干什么的。 
  10.   dispatch(l); 
  11. }); 
  12.  
  13. //better code 
  14. const locations = ['Austin', 'New York', 'San Francisco']; 
  15. locations.forEach((location) => { 
  16.   doStuff(); 
  17.   doSomeOtherStuff(); 
  18.   // ... 
  19.   // ... 
  20.   // ... 
  21.   dispatch(location); 
  22. }); 

4、避免无意义的前缀

例如我们只创建一个对象是，没有必要再把每个对象的属性上再加上对象名

 

  1. //bad code 
  2. const car = { 
  3.   carMake: 'Honda', 
  4.   carModel: 'Accord', 
  5.   carColor: 'Blue' 
  6. }; 
  7.  
  8. function paintCar(car) { 
  9.   car.carColor = 'Red'; 
  10. } 
  11.  
  12. //better code 
  13. const car = { 
  14.   make: 'Honda', 
  15.   model: 'Accord', 
  16.   color: 'Blue' 
  17. }; 
  18.  
  19. function paintCar(car) { 
  20.   car.color = 'Red'; 
  21. } 

5、默认值

 

  1. //bad code 
  2. function createMicrobrewery(name) { 
  3.   const breweryName = name || 'Hipster Brew Co.'; 
  4.   // ... 
  5. } 
  6.  
  7. //better code 
  8. function createMicrobrewery(name = 'Hipster Brew Co.') { 
  9.   // ... 
  10. } 

函数

1、参数

一般参数多的话要使用ES6的解构传参的方式

 

  1. //bad code 
  2. function createMenu(title, body, buttonText, cancellable) { 
  3.   // ... 
  4. } 
  5.  
  6. //better code 
  7. function createMenu({ title, body, buttonText, cancellable }) { 
  8.   // ... 
  9. } 
  10.  
  11. //better code 
  12. createMenu({ 
  13.   title: 'Foo', 
  14.   body: 'Bar', 
  15.   buttonText: 'Baz', 
  16.   cancellable: true 
  17. }); 

2、单一化处理

一个方法里面最好只做一件事，不要过多的处理，这样代码的可读性非常高

 

  1. //bad code 
  2. function emailClients(clients) { 
  3.   clients.forEach((client) => { 
  4.     const clientRecord = database.lookup(client); 
  5.     if (clientRecord.isActive()) { 
  6.       email(client); 
  7.     } 
  8.   }); 
  9. } 
  10.  
  11. //better code 
  12. function emailActiveClients(clients) { 
  13.   clients 
  14.     .filter(isActiveClient) 
  15.     .forEach(email); 
  16. } 
  17. function isActiveClient(client) { 
  18.   const clientRecord = database.lookup(client);     
  19.   return clientRecord.isActive(); 
  20. } 

3、对象设置默认属性

 

  1. //bad code 
  2. const menuConfig = { 
  3.   title: null, 
  4.   body: 'Bar', 
  5.   buttonText: null, 
  6.   cancellable: true 
  7. }; 
  8. function createMenu(config) { 
  9.   config.title = config.title || 'Foo'; 
  10.   config.body = config.body || 'Bar'; 
  11.   config.buttonText = config.buttonText || 'Baz'; 
  12.   config.cancellable = config.cancellable !== undefined ? config.cancellable : true; 
  13. } 
  14. createMenu(menuConfig); 
  15.  
  16.  
  17. //better code 
  18. const menuConfig = { 
  19.   title: 'Order', 
  20.   // 'body' key 缺失 
  21.   buttonText: 'Send', 
  22.   cancellable: true 
  23. }; 

4、避免副作用

函数接收一个值返回一个新值，除此之外的行为我们都称之为副作用，比如修改全局变量、对文件进行 IO 操作等。

当函数确实需要副作用时，比如对文件进行 IO 操作时，请不要用多个函数/类进行文件操作，有且仅用一个函数/类来处理。也就是说副作用需要在唯一的地方处理。

副作用的三大天坑：随意修改可变数据类型、随意分享没有数据结构的状态、没有在统一地方处理副作用。

 

  1. //bad code 
  2. // 全局变量被一个函数引用 
  3. // 现在这个变量从字符串变成了数组，如果有其他的函数引用，会发生无法预见的错误。 
  4. var name = 'Ryan McDermott'; 
  5. function splitIntoFirstAndLastName() { 
  6.   name = name.split(' '); 
  7. } 
  8. splitIntoFirstAndLastName(); 
  9. console.log(name); // ['Ryan', 'McDermott']; 
  10.  
  11.  
  12. //better code 
  13. var name = 'Ryan McDermott'; 
  14. var newName = splitIntoFirstAndLastName(name) 
  15.  
  16. function splitIntoFirstAndLastName(name) { 
  17.   return name.split(' '); 
  18. } 
  19.  
  20. console.log(name); // 'Ryan McDermott'; 
  21. console.log(newName); // ['Ryan', 'McDermott']; 

在 JavaScript 中，基本类型通过赋值传递，对象和数组通过引用传递。以引用传递为例：

假如我们写一个购物车，通过 addItemToCart()方法添加商品到购物车，修改 购物车数组。此时调用 purchase()方法购买，由于引用传递，获取的 购物车数组正好是最新的数据。

看起来没问题对不对?

如果当用户点击购买时，网络出现故障， purchase()方法一直在重复调用，与此同时用户又添加了新的商品，这时网络又恢复了。那么 purchase()方法获取到 购物车数组就是错误的。

为了避免这种问题，我们需要在每次新增商品时，克隆 购物车数组并返回新的数组。

 

  1. //bad code 
  2. const addItemToCart = (cart, item) => { 
  3.   cart.push({ item, date: Date.now() }); 
  4. }; 
  5.  
  6. //better code 
  7. const addItemToCart = (cart, item) => { 
  8.   return [...cart, {item, date: Date.now()}] 
  9. }; 

5、全局方法

在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype上新增一个 diff方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array进行扩展。

 

  1. //bad code 
  2. Array.prototype.diff = function diff(comparisonArray) { 
  3.   const hash = new Set(comparisonArray); 
  4.   return this.filter(elem => !hash.has(elem)); 
  5. }; 
  6.  
  7. //better code 
  8. class SuperArray extends Array { 
  9.   diff(comparisonArray) { 
  10.     const hash = new Set(comparisonArray); 
  11.     return this.filter(elem => !hash.has(elem));         
  12.   } 
  13. } 

6、避免类型检查

JavaScript 是无类型的，意味着你可以传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。仔细想想是你真的需要检查类型还是你的 API 设计有问题?

 

  1. //bad code 
  2. function travelToTexas(vehicle) { 
  3.   if (vehicle instanceof Bicycle) { 
  4.     vehicle.pedal(this.currentLocation, new Location('texas')); 
  5.   } else if (vehicle instanceof Car) { 
  6.     vehicle.drive(this.currentLocation, new Location('texas')); 
  7.   } 
  8. } 
  9.  
  10. //better code 
  11. function travelToTexas(vehicle) { 
  12.   vehicle.move(this.currentLocation, new Location('texas')); 
  13. } 

如果你需要做静态类型检查，比如字符串、整数等，推荐使用 TypeScript，不然你的代码会变得又臭又长。

 

  1. //bad code 
  2. function combine(val1, val2) { 
  3.   if (typeof val1 === 'number' && typeof val2 === 'number' || 
  4.       typeof val1 === 'string' && typeof val2 === 'string') { 
  5.     return val1 + val2; 
  6.   } 
  7.  
  8.   throw new Error('Must be of type String or Number'); 
  9. } 
  10.  
  11. //better code 
  12. function combine(val1, val2) { 
  13.   return val1 + val2; 
  14. } 

复杂条件判断

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑

1、if/else

点击列表按钮事件

 

  1.  
  2. const onButtonClick = (status)=>{ 
  3.   if(status == 1){ 
  4.     sendLog('processing') 
  5.     jumpTo('IndexPage') 
  6.   }else if(status == 2){ 
  7.     sendLog('fail') 
  8.     jumpTo('FailPage') 
  9.   }else if(status == 3){ 
  10.     sendLog('fail') 
  11.     jumpTo('FailPage') 
  12.   }else if(status == 4){ 
  13.     sendLog('success') 
  14.     jumpTo('SuccessPage') 
  15.   }else if(status == 5){ 
  16.     sendLog('cancel') 
  17.     jumpTo('CancelPage') 
  18.   }else { 
  19.     sendLog('other') 
  20.     jumpTo('Index') 
  21.   } 
  22. } 

从上面我们可以看到的是通过不同的状态来做不同的事情，代码看起来非常不好看，大家可以很轻易的提出这段代码的改写方案，switch出场：

2、switch/case

 

  1.  
  2. const onButtonClick = (status)=>{ 
  3.   switch (status){ 
  4.     case 1: 
  5.       sendLog('processing') 
  6.       jumpTo('IndexPage') 
  7.       break 
  8.     case 2: 
  9.     case 3: 
  10.       sendLog('fail') 
  11.       jumpTo('FailPage') 
  12.       break   
  13.     case 4: 
  14.       sendLog('success') 
  15.       jumpTo('SuccessPage') 
  16.       break 
  17.     case 5: 
  18.       sendLog('cancel') 
  19.       jumpTo('CancelPage') 
  20.       break 
  21.     default: 
  22.       sendLog('other') 
  23.       jumpTo('Index') 
  24.       break 
  25.   } 
  26. } 

这样看起来比if/else清晰多了，细心的同学也发现了小技巧，case 2和case 3逻辑一样的时候，可以省去执行语句和break，则case 2的情况自动执行case 3的逻辑。

3、存放到Object

将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，在按钮点击的时候，通过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的情况。

 

  1. const actions = { 
  2.   '1': ['processing','IndexPage'], 
  3.   '2': ['fail','FailPage'], 
  4.   '3': ['fail','FailPage'], 
  5.   '4': ['success','SuccessPage'], 
  6.   '5': ['cancel','CancelPage'], 
  7.   'default': ['other','Index'], 
  8. } 
  9.  
  10. const onButtonClick = (status)=>{ 
  11.   let action = actions[status] || actions['default'], 
  12.       logName = action[0], 
  13.       pageName = action[1] 
  14.   sendLog(logName) 
  15.   jumpTo(pageName) 
  16. } 

4、存放到Map

 

  1. const actions = new Map([ 
  2.   [1, ['processing','IndexPage']], 
  3.   [2, ['fail','FailPage']], 
  4.   [3, ['fail','FailPage']], 
  5.   [4, ['success','SuccessPage']], 
  6.   [5, ['cancel','CancelPage']], 
  7.   ['default', ['other','Index']] 
  8. ]) 
  9.  
  10. const onButtonClick = (status)=>{ 
  11.   let action = actions.get(status) || actions.get('default') 
  12.   sendLog(action[0]) 
  13.   jumpTo(action[1]) 
  14. } 

这样写用到了es6里的Map对象，是不是更爽了?Map对象和Object对象有什么区别呢?

你可以通过size属性很容易地得到一个Map的键值对个数，而对象的键值对个数只能手动确认。

代码风格

常量大写

  1. //bad code 
  2. const DAYS_IN_WEEK = 7; 
  3. const daysInMonth = 30; 
  4.  
  5. const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; 
  6. const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; 
  7.  
  8. function eraseDatabase() {} 
  9. function restore_database() {} 
  10.  
  11. class animal {} 
  12. class Alpaca {} 
  13.  
  14. //better code 
  15. const DAYS_IN_WEEK = 7; 
  16. const DAYS_IN_MONTH = 30; 
  17.  
  18. const SONGS = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; 
  19. const ARTISTS = ['ACDC', 'Led Zeppelin', 'The Beatles']; 
  20.  
  21. function eraseDatabase() {} 
  22. function restoreDatabase() {} 
  23.  
  24. class Animal {} 
  25. class Alpaca {} 

先声明后调用

 

  1. //bad code 
  2. class PerformanceReview { 
  3.   constructor(employee) { 
  4.     this.employee = employee; 
  5.   } 
  6.  
  7.   lookupPeers() { 
  8.     return db.lookup(this.employee, 'peers'); 
  9.   } 
  10.  
  11.   lookupManager() { 
  12.     return db.lookup(this.employee, 'manager'); 
  13.   } 
  14.  
  15.   getPeerReviews() { 
  16.     const peers = this.lookupPeers(); 
  17.     // ... 
  18.   } 
  19.  
  20.   perfReview() { 
  21.     this.getPeerReviews(); 
  22.     this.getManagerReview(); 
  23.     this.getSelfReview(); 
  24.   } 
  25.  
  26.   getManagerReview() { 
  27.     const manager = this.lookupManager(); 
  28.   } 
  29.  
  30.   getSelfReview() { 
  31.     // ... 
  32.   } 
  33. } 
  34.  
  35. const review = new PerformanceReview(employee); 
  36. review.perfReview(); 
  37.  
  38. //better code 
  39. class PerformanceReview { 
  40.   constructor(employee) { 
  41.     this.employee = employee; 
  42.   } 
  43.  
  44.   perfReview() { 
  45.     this.getPeerReviews(); 
  46.     this.getManagerReview(); 
  47.     this.getSelfReview(); 
  48.   } 
  49.  
  50.   getPeerReviews() { 
  51.     const peers = this.lookupPeers(); 
  52.     // ... 
  53.   } 
  54.  
  55.   lookupPeers() { 
  56.     return db.lookup(this.employee, 'peers'); 
  57.   } 
  58.  
  59.   getManagerReview() { 
  60.     const manager = this.lookupManager(); 
  61.   } 
  62.  
  63.   lookupManager() { 
  64.     return db.lookup(this.employee, 'manager'); 
  65.   } 
  66.  
  67.   getSelfReview() { 
  68.     // ... 
  69.   } 
  70. } 
  71.  
  72. const review = new PerformanceReview(employee); 
  73. review.perfReview(); 

 

来源：SegmentFault.com内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

如何写出优雅耐看的JavaScript代码

后端开发代码JavaScript2024-12-24

怎么写出优雅耐看的JavaScript代码

后端开发2024-04-02

怎么写出优雅耐看的css代码

后端开发2024-04-02

如何写出优雅的C++代码

后端开发C++工具2024-12-03

如何写出优雅的JS 代码

后端开发2024-04-02

如何写出更优雅的CSS代码？

后端开发CSS代码2024-12-02

26个写出简洁优雅JavaScript代码的技巧

后端开发JavaScript编程2024-11-29

怎么写出优雅的Java代码

后端开发2023-06-16

怎么写出优雅的C++代码

后端开发2023-06-15

如何编写优雅的 Controller 代码？

后端开发Controlle代码2024-11-29

如何写出优雅的 JS 代码？使用 SOLID 原则

后端开发设计模式SOLID2024-12-24

如何借助AngularJS写优雅的代码

后端开发2024-04-02

如何写出更优雅的 React 组件 - 代码结构篇

后端开发React2024-12-02

Go 工程化之如何优雅的写出 Repo 层代码

后端开发RepoGo2024-12-02

如何写出优雅的vue.js

后端开发2024-04-02

八点建议写出优雅的Java代码

后端开发Java代码2024-12-24

如何写出优雅的 JS 代码，变量和函数的正确写法

后端开发JS代码2024-12-24

ASP Web部署的艺术：如何写出优雅高效的代码

ASP Web部署的艺术：如何写出优雅高效的代码
后端开发2024-02-21

怎么写出让人看起来很优雅舒服的python代码

后端开发2023-06-02

怎么写出清晰又优雅的Python代码

后端开发2023-06-15
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯