这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
重点内容
- 编码原则
编码原则
各司其职，组件封装，过程抽象
我们在编码的时候需要注意，尽量让HTML/CSS/JS各司其职，避免不必要的由JS直接操作样式。
当我们制作纯展示类交互应用，可以采取一种零JS方案。
组件封装
组件是指一个包含模板、功能、样式的单元，好的组件具有封装性、正确性、扩展性、复用性。 以轮播图为例。
过程
- 定义HTML结构
- 通过CSS表现出来
- 编写JS的API
- API状态绑定
- 代码解耦（插件化、模板化、抽象化）
重构解耦
将代码进行插件化，尽可能即插即拔。
将HTML模板化，这样更容易扩展。
将组件通用模型抽象出来。
这里可以定义一个类，分为初始化、绑定元素、渲染功能。
组件设计原则
- 封装性
- 正确性
- 扩展性
- 复用性
实现组件的步骤
结构设计、展现效果、行为设计
过程抽象
过程抽象用来处理细节控制的一些方法。 需要函数式编程的思想。
函数式编程，简单理解就是无副作用的输入->处理->输出。
为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象。
HOF
- 以函数为参数
- 以函数为返回值
- 常作为函数装饰器
高阶函数
- Theottle 节流函数
- Consumer
- Lterative 可迭代函数
纯函数
纯函数就是任何时候，输入a一定得到b，结果是可预期的。
编程范式
命令式与声明式。
命令式趋向于怎么做。声明式趋向于做什么。
JS是既有命令式又有声明式。
命令式
let list =[1,2,3]
let map = []
for(let i =0;i<list.length;i++){
map.push(list[i]*2);
}
声明式
let list = [1,2,3,4];
const double = x => x*2;
list.map(double);
课后实践
//更复杂的排序，根据某个键值排序 const items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 } ]; items.sort((a, b) => a.value - b.value);
总结
JS开发非常需要注重一些编程规范。常见的开发范式有声明式、命令式。我们在使用时通常使用声明式编程。
