如何写好JavaScript

写好JS的一些原则

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

深夜食堂--结论

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

组件封装

组件

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

结构：HTML

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

表现：CSS

• 使用CSS绝对定位将图片重叠在同一个位置
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用CSS transition

行为：JS

行为：API

• Slider
  • +getSelectedItem()
  • +getSelectedItemIndex()
  • +slideTo()
  • +slideNext()
  • +slidePrevious

行为：控制流

使用自定义事件来解耦

组件封装

总结

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
    将一个软件系统或应用程序拆分为多个独立的组件，并允许这些组件在运行时进行动态加载和替换，以实现灵活性、可扩展性和可维护性的一种设计模式。这种模式使开发人员能够在不修改主要系统代码的情况下，通过添加、删除或更新插件来扩展或修改系统的功能。
  • 模板化
    一种将组件化开发与模板引擎相结合的方法，旨在提高代码的可重用性、可维护性和开发效率。在软件开发中，组件是指具有特定功能或特性的独立模块，而模板引擎是一种用于生成动态内容的工具，通常用于生成网页、电子邮件等。组件的模版化结合了这两种概念，以创建可复用的组件模板，从而更轻松地生成相似结构的组件。
  • 抽象化（组件框架）
    一个系统、软件、硬件或其他复杂的实体，通过定义清晰的界面和功能，隐藏其内部的复杂性，使其在更高层次上可以被理解、使用和操作的过程。抽象化可以帮助人们更容易地处理复杂性，从而提高开发、设计和维护的效率。

过程抽象

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

高阶函数

Once

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

HOF

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

常用高阶函数

HOF

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative

编程范式

命令式与声明式

let list=[1,2,3,4];
let mapl=[];
for(let i=0;i<list.length;i++){
mapl.push(list[i]*2)
}

let list=[1,2,3,4];
const double=x=>x*2;
list.map(double);

例子

• Toggle-命令式
• Toggle-声明式
• Toggle-三态

总结

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