这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
重点内容
- JavaScript 好代码的标准
- HTML/CSS/JS各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生JS实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- 为什么要使用高阶函数?
- JavaScipt 变成范式
JavaScript学习书籍
红宝书、犀牛书
JavaScript 好代码的标准
各司其责、组件封装、过程抽象
组件封装基本方法
组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。
结论
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计、展现效果、行为设计
- 三次重构:1.插件化 2.模板化 3.抽象化(组件框架)
过程抽象概念
过程抽象⽤来处理局部细节控制的⼀些⽅法,是函数式编程思想的基础应⽤,为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出去,这个过程我们称为过程抽象
高阶函数使用模式
HOF
1、以函数作为参数
2、以函数作为返回值
3、常用于作为函数装饰器
代码范例:
function HOF0 (fn){
return function(...args) {
return fn.apply (this,args);
}
}
常用高阶函数
(once、throttle(节流)、debounce(防抖)、consumer/2、lterativa(可迭代))
为什么要使用高阶函数?
纯函数与非纯函数
1. 纯函数 (pure function)
- 对外部没有副作用
- 效果可预期
2. 非纯函数 (inpure function)
- 对外部有副作用
- 测试时要构造特定的环境、初始化和还原
- 测试难度更大
使用高阶函数的好处
- 过程抽象
- 高阶函数都是纯函数,效果可预期
- 提升代码的可维护性