如何写好 JavaScript
写好JS的一些原则
- 各司其职
让 HTML、CSS、JS 职能分离
- 组件封装
好的 UI 组件具备封装性、正确性、扩展性、复用性
- 过程抽象
应用函数式编程思想
各司其职
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求“零 JS”方案，只用 CSS
组件封装
轮播图
- 结构：HTML
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list_item-selected">
<img src="">
</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
<li>
<img src="">
</li>
</ul>
</div>
- 表现：CSS
#my-slider{
position: relative;
width: 790px;
}
.slider-list ul{
list-style-type: none;
position: relative;
padding: 0;
margin: 0;
}
.slider-list_item,
.slider-list_item-selected{
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
.slider-list_item-selected{
transition: opacity 1s;
opacity: 1;
}
行为：JS
设置结构组件
-
结构设计
-
展示效果
-
行为设计
API （功能）
Event（控制流）
重构
- 插件化：解耦
- 将控制元素抽取成插件
- 插件和组件之间通过依赖注入方式建立联系
-
模块化
-
抽象化
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数 HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
- Once
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象
- Throttle
- Debounce
- Consumer/2
- Itertive
编程范式
- 命令式
命令式编程关注的是如何实现。需要开发者指定具体的步骤来完成一个任务。
例如遍历数组求和:
sum = 0
for(i=0; i<n; i++){
sum += array[i]
}
//开发者需要明确声明迭代数组和累加的整个过程。
- 声明式
声明式编程关注的是什么要做,不需要指定如何做。
例如遍历数组求和可以简单声明:
sum(array)
//具体的迭代和累加由系统自动完成。
总结几点区别:
- 命令式注重过程,声明式注重结果。
- 命令式步骤具体,声明式抽象化。
- 命令式开发者控制逻辑,声明式系统控制逻辑。
- 命令式更灵活,声明式更简洁。
