这是我参与「第四届青训营 」笔记创作活动的第3天

今天终于见到了开课前就有所耳闻的月影大佬，接下来就分享一下我今天听课的心得吧！

一、JavaScript的一些原则

课程开始时月影老师告诉我们写好语言的三大原则 ① 各司其责 ② 组件封装 ③ 过程抽象

1、各司其责： 让 HTML、CSS和 JavaScript 职能分离。HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

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

当网页开发需要跟随着产品需求变化时，需要重构，即插件化，解耦，即将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系

组件设计的原则:封装性、正确性、拓展性、复用性

实现组件的步骤：结构设计、展现效果、行为设计

三次重构：插件化、模板化、抽象化（组件框架）

3、过程抽象： 用来处理局部细节控制的一些方法；函数式编程思想的基础应用

二、高阶函数

Once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象 HOF：以函数作为参数；以函数作为返回值；常用于作为函数装饰器

1. throttle（节流函数） 本代码是500毫秒为计时刷新一次，即使你疯狂点击按钮，红圈圈内的计数一样按照自己的500秒加一次
2. debounced（防抖功能） 鼠标在快速移动时，页面上的小鸟不会移动（受其影响），当鼠标移动且停下的时候，小鸟慢慢移动到鼠标停住的地方
3. consumer

• consumer1 隔一段时间右下角的小黑框会在固定的时间间隔出现新的算式
• consumer2 当你疯狂点击这个“hit”按钮后（假设点击了26下，停了下来且不继续点击），“hit”按钮后的数字虽然是按照固定的时间间隔累加，但是它会在你停下之后依旧加到你点击的次数（26下），所以这个用法和throttle的区别是throttle在你点击停下的时候它的累加也结束了,这个代码中的consumer是每隔800毫秒累加一次（见31行）

7. iterative (批量操作函数) 通过截图中的代码举例，通常我们需要用for循环来达到筛选奇数行的目的，现在用iterative函数就可以做到（主要见17~22）

三、纯函数与非纯函数

纯函数：行为可预期；

非纯函数：行为不可预期；测试的难度比纯函数要大

在一个库中，尽量使用纯函数而不是非纯函数，这可以提升库的可维护性