这是我参与「第五届青训营 」伴学笔记创作活动的第3天
一.各司其责
让HTML、CSS和JavaScript职能分离
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用clss来表示状态
- 纯展示类交互寻求零JS方案
在方案优化上，可以考虑各司其责这一概念，尽可能得满足这一个概念，方案后期方案的优化和修改
二.组件封装
好的UI组件具备正确性、扩展性、复用性
组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元
基本方法：
-
结构设计
-
展示效果
-
行为设计
- API(功能)
- Event(控制流) ——> 使用自定义事件来解耦
进一步优化：
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模块化
解耦
- 将HTML模块化，更易于扩展
抽象
- 将组件通用模型抽象出来
总结：
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展示效果、行为设计
-
三次重构
插件化
模块化
抽象化(组件框架)
组件的封装需要考虑代码的简洁，数据更换后是否还能展示相同的效果
三.过程抽象
应用函数式编程思想
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
Once
为了能够让“只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象
function once(fn){
return function(...args){
if{fn}{
const ret = fn.apply(this.args);
fn = null;
return ret;
}
}
}
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOFO(fn){
return function(...args){
return fn.apply(this.args);
}
}
常用高阶函数
- Once
- Throttle(节流函数)
- Debounce(防抖函数)
- Consumer/2
- Iterative
function throttle(fn,time = 500){
let timer;
return function(...args){
if(timer == null){
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
},time)
}
}
}
function debounce(fn,dur){
dur = dur || 100;
var timer;
return function(){
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this,arguments);
},dur);
}
}
高阶函数的使用可以减少维护的成本
总结
JavaScript对组件化优化时可以思考HTML、CSS、JS是否各司其责，可以适当的引用高阶函数的使用，大大提高组件的可维护性和复用性
