如何写好JavaScript | 青训营

45 阅读1分钟

写好JS的一些原则

各司其责

让HTML、CSS和Javascript职能分离。

总结:

  1. HTML/CSS/JS 各司其责
  2. 应当避免不必要的由jS直接操作样式
  3. 可以用class来表示状态
  4. 纯展示类交互寻求零JS方案

组件封装

组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。

好的组件具备封装性、正确性、扩展性、复用性。

重构:插件化

解耦

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系

重构:模板化

解耦

  • 将HTML模板化,更易于扩展

重构:组件框架

抽象

  • 将通用的组件模型抽象出来

总结:

  • 组件设计的原则:封装性、正确性、扩展性、复用性
  • 实现组件的步骤:结构设计、展现效果、行为设计
  • 三次重构
    • 插件化
    • 模板化
    • 抽象化(组件框架)

过程抽象

应用函数式编程思想。

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用

为了能够让“只执行一次“的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

高阶函数:

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器

常用高阶函数:

  • Once
  • Throttle
  • Debounce
  • Consumer
  • iterative

编程范式

  • 命令式
  • 声明式

总结:

  • 过程抽象/HOF/装饰器
  • 命令式/声明式