这是我参与【第五届青训营】伴学笔记创作活动的第3天。
本堂课的重点内容：
- JavaScript编码原则之各司其责
- JavaScript编码原则之组件封装
- JavaScript编码原则之过程抽象
- Leftpad事故背景引入
- JavaScript代码质量优化之路
详细知识点介绍：
- 各司其责：
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
- 组件封装：
- 组件是指Web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元，好的组件具有封装性，正确性，扩展性，复用性
- 组件封装的基本方法：
- 结构设计（HTML）
- 展现效果(CSS)
- 行为设计(JS)
- API（功能）应保证原子操作，职责单一，满足灵活性
- Event（控制流）使用自定义事件来解耦
- 组件设计的原则：封装性，正确性，扩展性，复用性
- 三次重构：
- 插件化
- 模块化
- 抽象化（组件框架）
- 解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
- 将HTML模板化，更易于扩展
- 抽象：将通用的组件模型抽象出来
- 过程抽象(Once)：
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象
- 高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数修饰器
- 常用高阶函数
-
Once（过程抽象）
function once(fn,context){ let res; return function(){ if(fn){ res=context?fn.apply(context,arguments):fn(...arguments) fn=null } return res; } } -
Throttle（节流）：限制一个函数在一定时间内只能执行一次
var throttle = function (fn, delay) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } }; var f = throttle(testFn, 200); window.onresize = function () { f(); }; -
Debounce（防抖）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间
function debounce(fn,wait){ var timer = null; return function(){ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(fn,wait); } } function handle(){ console.log(Math.random()); } window.addEventListener("resize",debounce(handle,1000)); -
Consumer/2（这个有点知识盲区了，没学好）
-
Iterative（迭代函数）：让函数支持多个参数迭代求解
function add(x, y){ return x + y; } function sub(x, y){ return x - y; } console.log(add(add(add(1,2),3),4));//不好！！ console.log([1, 2, 3, 4].reduce(add)); console.log([1, 2, 3, 4].reduce(sub)); //------------------------------------------------ function iterative(fn){ return function(...args){ return args.reduce(fn.bind(this)); } } const add = iterative((x, y)=> x + y); const sub = iterative((x, y)=> x - y); console.log(add(1,2,3,4)); console.log(sub(1,2,3,4));
-
- 编程范式
- 命令式：一种描述计算机所需作出的行为的编程典范，即一步一步告诉计算机先做什么再做什么。（声明式编程与命令式编程是相对立的，只需要告诉计算机要做什么而不必告诉他怎么做）
- 声明式：声明式编程与命令式编程是相对立的，只需要告诉计算机要做什么而不必告诉他怎么做
- 写代码最应关注点：
- 风格
- 效率
- 约定
- 使用场景
- 设计
