加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

这些被同事喷的JS代码风格你写过多少?

发布时间:2019-02-14 12:17:35 所属栏目:建站 来源:殷荣桧
导读:现在写代码比以前好多了,代码的格式都有 eslint、prettier、babel(写新版语法) 这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决。我们写代码要写到下图中左边这样基本上

NO:函数功能混乱,一个函数包含多个功能。最后就像能以一当百的老师傅一样,被乱拳打死(乱拳(功能复杂函数)打死老师傅(老程序员))

  1. function sendEmailToClients(clients) {  
  2.   clients.forEach(client => {  
  3.     const clientRecord = database.lookup(client)  
  4.     if (clientRecord.isActive()) {  
  5.       email(client)  
  6.     }  
  7.   })  

YES: 功能拆解,

  1. function sendEmailToActiveClients(clients) {  //各个击破,易于维护和复用  
  2.   clients.filter(isActiveClient).forEach(email)  
  3. }  
  4. function isActiveClient(client) {  
  5.   const clientRecord = database.lookup(client)  
  6.   return clientRecord.isActive()  

(6)优先使用命令式编程

NO: 使用for循环编程

  1. for(i = 1; i <= 10; i++) { // 一看到for循环让人顿生不想看的情愫  
  2.    a[i] = a[i] +1;  

YES:使用命令式编程

  1. let b = a.map(item => ++item) // 怎么样,是不是很好理解,就是把a的值每项加一赋值给b就可以了。现在在javascript中几乎所有的for循环都可以被map,filter,find,some,any,forEach等命令式编成取代。 

(7)函数中过多的采用if else ..

No: if else过多

  1. if (a === 1) {  
  2.     ...  
  3. } else if (a ===2) {  
  4.     ...  
  5. } else if (a === 3) {  
  6.     ...  
  7. } else {  
  8.    ...  

YES: 可以使用switch替代或用数组替代

  1. switch(a) {  
  2.    case 1:  
  3.            ....  
  4.    case 2:  
  5.            ....  
  6.    case 3:  
  7.            ....  
  8.   default:  
  9.        ....  
  10. }  
  11. Or  
  12. let handler = {  
  13.     1: () => {....},  
  14.     2: () => {....}.  
  15.     3: () => {....},  
  16.     default: () => {....}  
  17. }  
  18. handler[a]() || handler['default']() 

三、尽量使用ES6,有可以能的话ES7中新语法

(只罗列最常用的新语法,说实话,有些新语法不怎么常用)

(1)尽量使用箭头函数

NO:采用传统函数

  1. function foo() {  
  2.   // code  
  3. }  
  4. YES:使用箭头函数  
  5. let foo = () => {  
  6.   // code  

(2)连接字符串

NO:采用传统+号

  1. var message = 'Hello ' + name + ', it's ' + time + ' now' 

YES:采用模板字符

  1. var message = `Hello ${name}, it's ${time} now` 

(3)使用解构赋值

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读