[ JavaScript学习 | 青训营笔记]

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

一、书籍推荐

推荐了两本书：1. 犀牛书 2. 红宝书

此外，还有JavaScript：the good parts为进阶部分。在编程时，需要正确对待，不仅要能运行，更要注意效率以及可理解性。

二、一些原则

原则主要为：1. 各司其职（职能分离） 2. 组件封装 3. 过程抽象

（一）各司其职：HTML负责内容，CSS负责样式，JavaScript负责行为。三者功能各不相同，需要准确判断某些功能应该交给哪些工具去实现。

例如昼夜变换（深色浅色变换）按钮，我们既可以通过两类js代码实现，也可以通过css来实现

（二）组件封装

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

简要实现方法首先建立无序列表结构，再利用CSS绝对定位重叠图片，最后使用修饰符与CSS transition进行切换。也可以通过js来实现，并且增加悬停时不换页等功能。

重构：插件化。将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系

重构：模板化。将HTML模板化，更易于扩展

重构：抽象化（组件框架）

（三）过程抽象，处理局部细节控制的方法；函数式编程思想的基础应用。

高阶函数：以函数为参数；以函数为返回值；常用于作为函数装饰器

以函数作为参数，就能得到写出一个只执行一次或者限制次数的函数。例如下面`Once()`函数，这个函数的参数是一个函数`fn`，然后执行时会返回一个函数出去，在返回函数中间进行判断`fn`是否存在，如果存在则用实际参数执行`fn`，然后将`fn=null`这样下次就不会执行该函数。

    return function(...args){
        if(fn){ 
            const ret = fn.apply(this, args);
            fn = null;
            return ret;
        }
    }
}