写好JS的一些原则

各司其责让HTML、CSS和JavaScript职能分离
组件封装好的UI组件具备正确性、拓展性、复用性
过程抽象应用函数式编程思想

各司其责

html负责结构，css负责表现，js表示行为

结构、表现要分离

例子：白天模式与夜间模式切换（纯css做法）

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

组件封装

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

例子：实现轮播图

结构（HTML）

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现

表现（CSS）

使用CSS绝对定位将图片重叠在同一个位置

轮播图切换的状态使用修饰符（modifier）

轮播图的切换动画使用CSS transition

行为（JS、API）

Slider：

+getSelectedItem()
+getSelectedItemIndex()
+slideTo()
+slideNext()
+slidePrevious()
行为：控制流

使用自定义事件来解耦

重构：插件化

解耦

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

重构：模板化

解耦

将HTML模板化，更易于扩展

重构：组件框架

抽象

将组件通用模型抽象出来

过程抽象

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

编程范式

编程范式分为命令式与声明式。

声明性代码专注于在不添加方式的情况下说出什么的表达式。声明式代码通常避免状态和变量的突变。声明式代码更加简洁。

高阶函数

使用高阶函数可以减少使用非纯函数的可能性。

在js的内置对象中同样存在着一些高阶函数，像数组的map，filter，reduce方法等，它们接受一个函数作为参数，并应用这个函数到列表的每一个元素。

常用高阶函数（HOF）

Once
Throttle 节流
Debounce 防抖
Consumer/2
Iterative

写代码最应该关注什么？

风格、效率、约定、使用场景、设计

如何写好JavaScript ｜ 青训营笔记