【字节青训营】跟着月影学JSの学习笔记

JavaScript

月影老师讲的很棒，由浅入深。小白我还要多多课后消化消化，三个小时听下来感觉知识量挺多的。。。

---

总的原则

写好JavaScript的原则：各司其职、组件封装、过程抽象。

• HTML/CSS/JavaScript各司其责
• 应当避免不必要的由JS直接操作样式，尽量实现重构
• 可以用class 来表示状态
• 纯展示类交互寻求零JS方案（例如：通过label与CheckBox组合的方式）

轮播图引发的思考

实现的思路：

HTML实现：

轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现。

CSS实现：

使用CSS绝对定位将图片重叠在同一个位置; 轮播图切换的状态使用修饰符（modifier）;轮播图的切换动画使用CSS transition。

JS实现：

API设计应保证原子操作，职责单一，满足灵活性。
通过自定义时间来解耦，降低代码之间的关联度，提高可扩展性。
(如何解耦?将控制元素抽取成插件;插件与组件之间通过依赖注入方式建立联系;将HTML模板化，使得扩展性更好)

小结

• 抽象：将通用的组件的模型抽象出来
• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计

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

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

过程抽象

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。过程抽象是用来处理局部细节控制的一些方法。属于函数式编程思想的基础应用

操作次数限制：一些异步交互、一次性的HTTP请求

高阶函数

特点：以函数作为参数； 以函数作为返回值；常用于作为函数装饰器。
如
Once， Throttle， Debounce， Consumer/2， lterative

为什么需要有高阶函数（HOF）？

纯函数：与时间无关，而且具有逆等性。
非纯函数：依赖外部环境，如执行的顺序、执行时间等等。
高阶函数能够减少非纯函数的存在，提高编程的准确性，使得程序运行符合期望。

编程范式

JS具有命令式与声明式两种编程范式。命令式更加注重过程，声明式将过程抽象。两种编程范式都可以用JS实现。所有的抽象都是为了更好的可拓展性。