QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3343|回复: 0

[HTML/CSS/JS] 6个规则让你代码结构焕然一新

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1328 小时
   最后登录 : 2026-7-17

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2020-12-16 10:49:45 | 显示全部楼层 |阅读模式
1、注重命名
5 S2 [( [4 j/ h; U2 ^) @       为一个事件命名是很困难的。虽然困难但是非常有必要。1 }: s5 f. l& V# t
       想象以下,将两个数组合并成一个数组,并生成一个唯一值的数组。那么你会怎么命名它呢?我们也许会这样命名?, k7 `0 E( B; B9 ?
function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}
      上面的命名并不糟糕,但是还不是很友好。你可以将一个功能函数拆分为两个功能函数,这样命名更友好和函数复用性更好。. ]/ y4 V0 `+ o4 H# u6 V
function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}
; d7 z" l) K8 Y( J
2、IF语句简化; Z" w! S/ X9 _( |8 l- D5 F
       假设我们有下面的代码:
0 p4 O! Y, E' _6 t+ B$ @) ^
if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}
      我们可以这样解决:
+ T' `, T5 v7 r( b) d4 N% Z& \
const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
  // ...
}
      将乱七八糟的条件判断放到一个变量中存储,比看臃肿的表达式要好很多。
' f' Z, _4 P! R- G; ~% L# ~: {3、及早返回( `: j0 m9 g% C- L* s8 t8 ?
       有下面的代码:  j( a! k3 t9 c8 o$ B: U
function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}
      及早返回使得我们的代码更加易读:
. E$ F. B8 j  J" R) b2 m
function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}
# G% e7 {  z  ?. }
4、解构赋值
+ ^) V# L) ^- \( V7 t$ V6 W) P# L! O       在javascript中,我们可以对objects和arrays进行解构赋值。例如:
/ [3 Y. d$ t" }* U/ Y1 B
// object 解构赋值
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// array 解构赋值
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2
9 ?* d% T: l; D* }
5、童子军规则0 D% C% J5 [; s1 S/ t( F
       童子军有一条规则:永远保持离开时的露营比你发现它时更整洁。如果你在地面上发现了脏东西,那么无论是否是你留下的,你都要将它清理干净。你要有意地为下一组露营者改善环境。  T+ u4 x+ O, o" p, i
       我们编写代码也是这样子,如果你在代码中发现了脏代码,那么你可以尝试去修改它,即使是一个没有被引用到的变量名。/ H) u' i. K+ o7 y
6、代码风格# g6 c9 t+ h7 W7 O7 b$ s1 d/ e* |8 V2 I+ f
      在你的团队中使用一种代码风格,比如限定代码缩进的规范是两空格呢还是四空格;使用单引号呢还是双引号呢;使用同类的一种框架呢,还是流行两种解决方案的框架呢...这样团队中人员接手项目的成本就会降低,开发人员的心里减少排斥感~
( M6 |5 q5 A9 h+ Q
4 b# \/ V5 H# }2 U% t. c
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-8-18 20:24

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表