JavaScript编码原则之各司其责

什么才是好的Javascript代码？

协会每年都会发布新的JS标准，严肃认真地对待自己的代码。

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

学会合理优化代码

例子

两个版本的代码

代码应简洁，方便修改。

结论：

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

  组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。

例子

API：

+getSelectedltem()得到当前选中的图片的元素
+getSelectedltemIndex()得到当前选中的图片元素在列表里的下标
+slideTo()到特定的元素上
+slideNext()轮播上一张图片
+slidePrevious()轮播下一张图片

构造函数不要过于复杂

通过将HTML模板化优化代码，更加灵活

在模板化的基础上可以抽象成通用的组件

通用插件（Component） registerPlugins（...plugins）可以组成插件 render()可以渲染

应多思考该组件是否还有进一步的改进空间，子组件可以当作父组件使用。

组件化用来控制整体UI组件，过程抽象控制局部，涉及更深的问题，是函数式编程的基本应用。

一个函数里返回另一个函数，称为高阶函数。

若既以函数作为参数，又以函数作为返回值，通常称为函数装饰器。

 Throttle--节流函数（限制频率触发）
 Debounce--防抖函数（变化结束超过规定时间可以自动保存）
 Consumer/2--一个在规定时间内接受单一参数并且不返回任何结果的功能接口
 Iterative--可迭代方法（调用API批量操作）

 非纯函数：A即A，B即B，需要构建其他函数。
 使用高阶函数能大大地减少非纯函数的使用，使代码更简洁。

可使用命令式或声明式写代码，命令式强调怎么做，需要改代码，而声明式强调做什么，只需要改状态去实现代码细节，可看作命令式的反面，更加简洁。

总结：