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

本堂课重点内容：

写好JavaScript的一些原则
组件封装
纯函数 & 高阶函数

详细知识点介绍：

如何写好 `JavaScript`？

想要写好 JavaScript，那么遵循JS的一些原则是必不可少的。

遵循各司其职：让HTML、CSS和JavaScript职能分离。
学会组件封装：如UI组件，好的UI组件具备正确性、扩展性、复用性，其余封装的组件也应具备这些优点。
学会过程抽象：应用函数式编程思想。

组件封装

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

举个栗子： 用原生 JS 写一个电商网站的轮播图，应该怎么实现？

话不多说，直接上代码：小结：基本方法

结构设计

展现效果

行为设计:

API（功能）

Evwnt（控制流）

不过上面这段代码仍有优化空间，换做是你，你会怎么做呢？

重构：插件化插件化后，使得轮播图的功能取舍，有了更好的灵活性；但这并非最优解，对于轮播图的图片数量用户并不能自定义，那么我们往下看：

重构：模板化模板化后，用户可自定义图片数量，极大地提升了用户的可编辑性。

小结：

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

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

三次重构:

插件化

模板化

抽象化（组件框架）

纯函数 & 高阶函数

纯函数: 一个函数要满足以下两条定义，它才能使一个纯函数
- 函数传入相同的参数结果不变
- 函数执行过程中没有副作用
举个栗子(加法函数):
```
function add(a,b) {
    return a + b;
}
```
而下面这个计数函数，就不是一个纯函数了，因为每次调用的结果都不一致：
```
let num = 0;
function count() {
    return ++num;
}
```
纯函数的好处

知道了什么是纯函数,那么接下来就说一说纯函数的好处，它主要体现在一下三个方面：

① 纯函数不依赖外部环境，移植方便，引入都能用。

② 只需要看函数就能知道其功能，代码易读，可维护性高。

③ 测试方便。

高阶函数(HOF): 只要满足以下任意一条，那么它就是一个高阶函数

参数可以接受一个函数
返回值是一个函数

举个栗子(节流函数)：

function throttle(fn,delay = 100) {
    let timer = null;
    return function () {
        if(timer) return;
        timer = setTimeout(() => {
            fn.apply(this,arguments);
            timer = null
        })
    }
}

而下面这个例子就不是高阶函数，因为既不接受函数作为参数，而且返回值也是一个对象：

function low() {
    const fun = () => {};
    return { fun }
}

常用的高阶函数： Throttle Debounce Iterative
高阶函数的作用：

① 般情况下，高阶函数可以看作是函数工厂，它们用于生产实现某一功能逻辑的函数，但并不去执行。所以基本上所有的高阶函数都是纯函数。

② 利用高阶函数将某些非纯函数封装扩展，可以实现逻辑的同时只产生纯函数。

③ 平时多使用高阶函数来实现需求，能提高代码的可维护性。

课后个人总结：

本堂课让我了解了一些关于如何更好地写好JavaScript的细节知识，也学习到了如何用JavaScript封装组件，了解到了什么是高阶函数，如何写一个高阶函数。
关于JavaScript的知识远不止这一点点，学涯无尽，要时刻保持一颗好奇心，善于发现身边的精彩事物，去思考他人是如何做出如此优雅的功能，相信这样对于学习的帮助是巨大的。

引用参考：

文章引用月影老师的代码片段，老师主页：juejin.cn/user/712139…

关于如何写好JavaScript的一些小技巧 | 青训营笔记