写好JS的一些原则

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

组件封装

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

1. 结构：HTML

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

2. 表现：CSS

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

3. 行为：JS

• API(功能）

• Event(控制流）：使用自定义事件来解耦。

基本方法：结构设计，展现效果，行为设计

三次重构：

• 插件化

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

• 模板化

解耦：将HTML模板化，更易于扩展

• 抽象化(组件框架）：

将组件通用模型抽象出来

过程抽象

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

高阶函数

• Once

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

• HOF

1. 以函数作为参数
2. 以函数作为返回值
3. 常用于作为函数装饰器

常用的高阶函数(HOF)

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

编程范式

命令式与声明式

例子

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

总的来说，写好JavaScript需要不断学习和实践，积累经验并遵循良好的编程习惯，才能编写出高质量且易于维护的代码。