业界参考

谷歌JS代码规范
Airbnb JS代码规范
JS标准代码样式

参考资料

如何写出无法维护的代码？
The Joel Test
The better parts

质量意识

  • 没时间写单元测试
    • 没时间写测试，有时间写bug
  • 每一行都要加注释
    • 正确的注释应该是why而不是how
  • 代码中的空格、括号非常重要
    • 空格、括号没那么重要
  • 有时间了再重构
    • 重构要每天都进行

  • 测试是测试人员的工作

    • 要独立保证自己的代码质量，不能完全依赖测试人员

      现状

  • 人员水平

    • 大部分对质量提升的方法是堆时间（加班
    • 正确的办法是自动化、监控、预警
    • 大部分代码质量还停留在靠Lint工具
    • 正确的做法是静态分析、单元测试、不断重构
  • 要去做
    • 不要被错误观点同化
    • 坚持 一切能用机器做的事情都用该交给机器做
    • 只要有实践自动化、测试的机会，就努力去实践

      语言特性

      If a feature is sometimes useful and sometimes dangerous and if there is a better option then always use the better option.

We are not paid to use every feature of the language we are paid to write programs that work well and are free of error.

共识

1960年代，花了一代人的时间去认同高级语言是好的（反方：机器语言效率高
1970年代，花了一代人的时间去认同goto是不好的，支持结构化编程
1980年代，花了一代人的时间去认同对象是好的，发展面向对象
1990年代，花了两代人的时间去认同lambda表达式是好的（Java、C++、PHP、JS加强支持

不要用的JS特性

  • 绝对不要用
    • 全局变量
    • var声明
    • ==运算符
    • 包装类型String/Boolean
  • 有些人不用
    • class/new/this
    • 比如React Hooks那帮人

  • 用的人不多，尽量少用

    • symbol、generator、 iterator
    • 反射

      推介使用的JS特性

  • 一定要用

    • ===全等
    • …展开运算符
    • 模块 import export
    • let and const
    • 析构赋值
    • Promise/await
  • 可以使用
    • class
    • getter/setter
    • WeakMap
    • Proxy

  • 存在问题但是可用

    • 箭头函数
    • 数组API+Polyfill

      命名

  • 坏的命名举例

    • let xiaoliang //拼音
    • let user=[{id:1,name:’f’,{id:2,name:’j’}] //没写复数s，有歧义

    • let flag=true //意义不明，太抽象

    • let userInfo={id:1,name:’f’} //命名抽象，没必要加Info，所有变量都是信息

    • let handler=(x)=>{console.log(x)} //抽象，函数都是handler
    • let cnt=document.querySelector(‘#test’) //缩写，意义不明
    • let idx=0 //缩写 ，意义不明
    • let cur=0 //缩写

  • 首要规则

    • 能让人秒懂
      1. function user(userId){
      2. return axios.get(`/users/${userId}`)
      3. .then((res)=>{
      4. console.log(res.data)
      5. }, handerError)
      6. }
      1. //重构
      2. user.get = (id) => {
      3. return axios.get(`/users/${id}`)
      4. .then((response)=>{
      5. console.log(response.data)
      6. }, onGetUserError)
      7. }

  • 命名应该符合英语习惯

    • 普通变量用名词
    • 复数要加s或者对应的复数形式
    • 布尔用isXXX或canXXX或形容词
    • 禁止用showDialog表示是否展示dialog
    • 普通函数用动词开头 //get,do
    • 钩子函数用介词加动词开头 //onError,onLoad
    • 容易混淆的对象加前缀，如$div
  • 不要用缩写
    • 如cnt/idx/cur/prev/anal
    • 某些特定的缩写可以用，比如for循环里的i j k
    • 行业通用缩写一个单词，如enableHtml

image.png

  • 注释分类

    • 对代码进行翻译的注释
    • 对代码进行总结的注释
    • 对bug进行分析的注释
    • 对参考来源的注释
    • 对潜在问题的警告的注释
    • 发泄情绪的注释

      推介工具

  • lint工具

    • eslint
    • Standard JS
    • 不推介jslint/jscs/jshint，过时了
  • 一般配置
    • eslint-config-Airbnb
  • 建议
    • 不要那么在意空格、括号
    • 请关注命名、代码结构、单元测试