代码规范

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

• 一些常见的编码习惯
  • css、js、image 等静态文件应该放在约定的目录里面
  • 在页面中尽量避免写入行内样式，即 style=“”
  • 引号规则：一句代码中只使用一种引号则双引号优先，否则同意最外层使用单引号
  • 变量命名：变量采用驼峰式命名且首字母小写（除了对象的属性以外），定义后没有被使用的变量要删除
  • 函数规则：无论是函数声明还是函数表达式，“(”前不要空格，但‘’{‘’前一定要有空格。函数调用括号前不需要空格，立即执行函数外必须包一层括号
  • 数组、对象的规则：两者最后均不要有多余的逗号；对象属性名不需要加引号
  • 在同一个函数内部中，局部变量的声明必须定义在顶端
  • 除了三目运算符外，其他的（if、else 等）禁止简写
  • 函数中传入的参数必须具有有效性，对特殊的入参必须进行说明
  • 尽量减少循环嵌套层次，尽量避免大于三层的循环

阿里前端开发规范.pdf

• 封装的组件更新函数

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

• 参数

const watcherOptions: WatcherOptions = {
  before() {
    if (vm._isMounted && !vm._isDestroyed) {
      callHook(vm, "beforeUpdate")
    }
  },
}

• 将上述两个参数传入实例化渲染 watcher

new Watcher(
  vm,
  updateComponent,
  noop,
  watcherOptions,
  true /* isRenderWatcher */
)

• watcher 类，响应式数据第一次访问时进行依赖收集，会将渲染 watcher 存储起来，数据有修改时派发更新

export default class Watcher implements DepTarget {
  addDep(dep: Dep) {
    ...
    dep.addSub(this)
  }
  update() {
    ...
    queueWatcher(this)
  }
  run() {
    ...
    this.cb.call(this.vm, value, oldValue) // cb 就是 updateComponent
  }
}

• 响应式数据

Object.defineProperty(obj, key, {
  get: function reactiveGetter() {
    ...
    dep.depend() // 依赖收集
  },
  set: function reactiveSetter(newVal) {
    ...
    dep.notify() // 派发更新
  },
})

• Dep

export default class Dep {
  addSub(sub: DepTarget) {
    this.subs.push(sub)
  }
  depend(info?: DebuggerEventExtraInfo) {
    ...
    Dep.target.addDep(this) //Dep.target 就是 Watcher
  }
  notify(info?: DebuggerEventExtraInfo) {
    ...
  for (let i = 0, l = subs.length; i < l; i++) {
    const sub = subs[i]
      sub.update()
    }
  }
}