这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
重点内容
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
- 代码写作关注事项
- left-pad 事件背后的代码规范
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
详细知识点介绍
1.三个编码原则
各司其责、组件封装、过程抽象
2.各司其责
各司其责指将html,css,javascript的职能分离
- html/css/javascriptg各司其责
- 应当避免不必要的JS直接操作样式
- 可以用class来表示样式状态
- 对于纯展示类交互我们应当寻求零JS方案
3.组件封装
组件是指Web页面上抽出来一个个包含模版（HTML)、功能（JS)和样式(CSs)的单元。好的组件具备封装性、正确性、扩展性、复用性。
我们可以对多次复用的代码组件进行封装，并提高其可扩展性。
组件封装的基本方法：
- 结构设计: HTML
- 展示效果: CSS
- 行为设计: JS
- 包括API(功能)
- Event(事件流)
组件初步封装完成后，我们还可以对其进行重构，以提高他的可扩展性。
解耦
1.插件化
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
2.模板化
- 将HTML模板化,更易于扩展
3.组件框架（抽象化）
- 将通用的组件模型抽象出来
总结
- 组件设计原则：封装性，正确性，扩展性和复用性。
- 实现组件的步骤:结构设计展现效果、行为设计
- 组件在封装完成后，需要经历三次重构，分别是插件化，模板化和抽象化。
4.过程抽象
将只执行一次的需求抽离成一个once()函数，它可以运行在一切只需要执行一次的函数上。在使用时，只需要把相应的需要只执行一次的函数作为参数传给once()方法即可。为了能够让“只执行一次“的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
- 用来处理局部细节的一些方法
- 函数式编程思想的基础应用
5.高阶函数
以函数作为参数，同时用函数作为返回值，常用于作为函数装饰器，这种函数称之为高阶函数。
常用高阶函数：
Once
Throttle
Debounce
Consumer / 2
lterative
为什么要使用高阶函数
纯函数是指不对外部环境产生依赖，不影响外部环境，在任何时候，只要参数确定返回值就确定的函数。因此，纯函数可以进行直接测试，同时也利于我们进行重构。因此，我们在开发中应尽量使用纯函数进行开发。高阶函数就是一种纯函数。
6.编程范式
命令式和声明式
命令式关注怎么做，声明式关注做什么。js编程既可以使用命令式编程也可以使用声明式编程，但是当代码逻辑较为复杂时，推荐使用声明式编程，这样抽象程度高，扩展性更强。
