这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

JavaScript 编码原则之各司其责

写好JS的一些原则

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

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构：

基本方法：

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

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

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

组件框架
抽象
将组件通用模型抽象出来

Once
Throttle：节流函数
应用场景：鼠标移动(mousemove)，滚动(scroll)会触发很多，会带来一定性能开销，当不需要这么高的频率触发，使用节流函数
Debounce：防抖函数
Consumer / 2
Iterative

使用高阶函数可以减少我们使用非纯函数的可读性
函数是有区别的，分纯函数和非纯函数
纯函数：没有副作用，行为可预期

function add(x,y){
    return x+y;
}

纯函数好处：容易测试函数正确性
非纯函数：有副作用，测试难度被纯函数高，成本较大

function count(){
    times++;
}

命令式与声明式
命令式：趋向于怎么做

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);

声明式更加简洁

当时年少春衫薄。骑马倚斜桥，满楼红袖招