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

各司其职

HTML、CSS、JavaScript各司其职，避免不必要的由JS直接操作样式，纯展示类交互可以考虑零JS方案，但注意，各司其职不代表代码要分开放置，有时将组件封装会把html代码卸载js里面，但这不违反各司其职原则，各司其职的意思是不同的代码语言做各自的事情。

元素的 class 属性不仅仅只是为了给 CSS 提供类选择器，还能表示元素的业务状态。这样，我们就可以将这些业务状态对应的展示样式交由 CSS 处理，而 JS 只需要处理状态的切换即可，从而保证了各司其职的原则，使得我们的代码既能体现业务的需求，也便于将来的维护和扩展。

组件封装

什么是组件？组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元

一个好的组件特点：

封装性、正确性、扩展性、复用性。

过程抽象

高阶函数

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

HOH0函数

也叫0级高阶函数，也是等价装饰器，不管你传是什么样的fn都会以原始的参数去执行fn,调用HFH0(fn)去执行等价于直接执行fn，在高阶函数中也叫等价范式，once()和其他函数都是基于该等价范式去扩展

function HOH0(fn) { 
    return function (...args) { 
    return fn.apply(this, args); 
    } 
}

节流函数(Throttle)

节流函数的作用: 假设后台需要记录一个用户的行为，例如鼠标移动，但是用户会经常移动鼠标，即使用户稍微移动下，也会发送很多数据到后台去，这个就会造成很大的带宽浪费，用户移动的鼠标的数据不是说要完全的发送给后台去，我们可以设定一个间隔时间来记录一次数据就可以限制其数据。

节流函数的思路：使用高级函数思路，以原始函数fn为参数，返回一个函数作为结果，我们会设置一个timer,如果这个timer没有的话就执行fn,同时会给这个timer注册一个setTimeout,在指定的时间后把timer=null,timer存在的时间内，无论怎么调用这个节流函数，因为timer不为空，所以都不会执行fn。

防抖函数

防抖函数的作用：当记录鼠标移动的时候，如果我们一直胡乱移动鼠标，是不会记录鼠标，只有当鼠标停止的时候才会记录，例如下面的小鸟，当我们胡乱移动鼠标的时候，它并不会移动，只有当鼠标停止它才会移动过来

批量操作元素(Iterative)

该函数作用：可以去批量的操作元素，比如修改多个元素的样式,比如设置多个元素的color

先判断这个对象是否可以迭代，如果可迭代便取其每一个元素，然后调用fn方法,然后将结果推送到ret数组然后返回出来

编程范式：包括JavaScript等很多现代脚本语言是混合的编程范式，编程范式是有几种分类的，大的分类分成命令式和声明式。

命令式:又分成过程式和面向对象;

声明式:又分成逻辑式和函数式;

JavaScript这种现代脚本语言是一种混合的编程范式，多少都既带有这种命令式,也带有声明式的特点，所以我们可以通过JS写出符合命令式风格的代码, 也可以写出声明式风格的代码，命令式和声明式没有优劣之分。同时支持两种风格语言让JavaScript的写法更加灵活。详细案例参考

javascript原则和代码优化|青训营笔记