这是我参与「第四届青训营 」笔记创作活动的第2天，在今天有幸可以跟月影大佬一起学JavaScript,让我们迅速开始学习之旅吧。
首先，先要了解如果作为一名职业代码工程师，我们需要写出好的代码。所谓好，便是代码精简，逻辑清晰，易维护。
一.写好JS的一些规则
- 各司其责（让HTML，CSS，JS职能分离）
- 组件封装（好的UI组件具有正确性，扩展性，复用性）
- 过程抽象（应用函数式编程思想）
（1）各司其责
这里我们用深夜食堂这个例子来说明各司其责的含义： 深夜食堂
注意：
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
（2）组件封装
基本方法：
- 结构设计
- 展现效果
- 行为设计（包括
API【功能】Event【控制流】）
下面我们有一个封装组件的实例供大家赏析：
该组件实现了几张广告图片的轮播，在编程的过程中使用了解耦的方式，先将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系，这一步叫插件化。接着将HTML模板化，更易于扩展。最后搭建组件框架，将组件通用模型抽象出来。其逻辑图如下所示：
通过上面这个例子，我们总结如下：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
（3）过程抽象
所谓过程抽象，其是用来处理局部细节控制的一些方法，是函数式编程思想的基础应用，为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。 这里介绍高阶函数，在过程抽象中经常用到。
高阶函数（HOF）
上图为高阶函数的图示，在图中我们可以发现高阶函数的特征如下：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
高阶函数主要有以下几类：
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
二.编程范式
JS在编程时既具有命令式，也具有声明式，具体情况可参照下图：
总的来说，可以将其归纳为两点：
- 过程抽象 / HOF / 装饰器
- 命令式 / 声明式
三.心得总结
在老师讲解JS的过程中，尽管做为小白有些吃力，但还是感受到了写好代码的重要性。在后续写JS代码的过程中，要充分考虑其运行效率和可维护性。相信在不断的练习中我们可以掌握写代码的精髓。
