JavaScript 编码原则

网页设计原则

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

组件设计

设计原则

封装性、正确性、扩展性和复用性

实现组件的步骤

结构设计、展现效果、行为设计

在我们设计组件的过程中，往往将 js 代码和 css 控制、html 结构改变混合在了一起，这样是否违背了结构、表现和行为分离的原则呢？答案是并没有。因为结构、表现和行为分离是说 js、css、html 各司其职，而不是单纯看它们是否被写在了一起

三次重构

插件化、模板化、抽象化（组件框架）

编程范式

过程抽象/HOF（高阶函数）/装饰器

高阶函数的概念比较难以理解，一些函数通过输入我们可以稳定的预测输出，但是有些函数涉及外部的状态，影响了函数输出的稳定性，为了消除这种不确定性，我们使用高阶函数进一步封装我们上面所说的这个函数，从而使函数的效果重新变得可预测或者说稳定，最常见的高阶函数之一是节流函数 throttle，将一段时间内函数的多次触发变成一次，从而使结果稳定。 高阶函数有助于代码复用、代码简化以及面向过程转面向函数编程。

命令式/声明式

在 JavaScript 网页代码编写的过程中，往往鼓励声明式的编写，虽然有时候声明式的代码看上去比命令式更加复杂。这是因为声明式代码便于后续的维护和修改。在命令式编程中，开发者更注重过程或者说步骤，需要对数据进行怎样的操作才能实现我们想要的逻辑；而声明式编程更加注重代码的结果和目标，而不是具体的实现过程，开发者只需要描述代码需要做什么，而不是详细地指定每一步的实现细节，这决定了声明式相比命令式的代码在后续更容易添加一些相似的逻辑