JS 好与坏

如果一个特性有时好用, 有时危险, 还有一个更好的选项, 你应该总是使用那个更好的

JS代码中的特性取舍

不要用的JS特性

• 绝对不要用
  • 全局变量
  • var声明

  console.log(a)  // undefined
  var a = 1
  
  var b = 2
  window.b  // 2
  

  • == 运算符
  • 包装类型String/Boolean

  var c = new Boolean(false)
  if(c)   // c ==> true
  

推荐使用的JS特性

• 一定要用

  • ===全等
  • ...三个点运算符

  let aa = [1,2,3,4,5]
  let [, , ...rest] = aa
  rest  // [3, 4, 5]
  
  function add(...numbers) {
    return numbers.reduce((sum, n) => sum + n, 0)
  }
  
  let a1 = [1,2,3,4]
  let a2 = [...a1]  // [1, 2, 3, 4]
  a2 === a1  // false
  

  • 模块 export/import
  • let const
  • 析构赋值

  let a = 1
  let b = 2
  [a, b] = [b, a]
  a // 2 
  b // 1
  

  • promise/await

• 可以使用

  • get / set

  let person = {
   name: 'yym',
   age: 18,
   get sayHello() {
     return this.name + ' ' + this.age
   },
   set names(value) {
     this.name = value
   }
  }
  

  • WeakMap

  const a = [1, 3, 5, 1, 5]
  [...new Set(a)]
  

  • proxy

命名

坏命名示例

let xiaoming  // 拼音
let flag = true  // 所有布尔都是 flag , 意义不明确
let userInfo = {name: 'y', id: 1}  // 所有变量都是信息, 没必要在后面加信息的后缀
let handler = x => console.log(x)  // 所有函数都是 handler
let cnt = '...'  // 缩写不清楚 
let idx = 0
let cur = 0

首要规则: 让人看懂
命名应该符合英文习惯

• 普通变量用名词
• 复数要加s或对应的复数形式

  let users = []
  let userList = []
  let userCollection = []
  

• 布尔用isXXX 和 canXXX 或 形容词

  let canClick
  let isDialogVisible
  let clickable
  

• 禁止用 showDialog 表示是否展示 dialog

  let dialogVisible
  let dialogSeen
  

• 普通函数用动词开头
• 钩子函数一般用介词加动词开始

  // 钩子函数, 做了事情触发...
  onLoad  onError
  // Vue
  beforeCreate created
  // React
  componentWillMount  // 时态
  

• 容易混淆的对象加前缀 $div

命名不准用缩写

• 如: cnt / idx / cur / prev / anal ...
• 某些特性的可以用, 比如 for 循环的 i j k
• 行业通用缩写当做一个单词, 如 enableHtml

注释

注释分类

• 对代码进行翻译的注释 (尽量少些)
• 对待吗进行总结的注释
• 对 bug 进行分析的注释
• 对参考来源的注释
• 对潜在问题的警告的注释
• 发泄情绪的注释 (千万不要写)

Lint

• Lint 工具
  • eslint
  • Standard JS
  • 不推荐 jslint/ jscs/ jshint
• 推荐配置
  • eslint-config-Airbnb
• 建议
  • 更多在意关注命名, 代码结构, 单元测试