这是我参与「第四届青训营 」笔记创作活动的的第2天。
写好JS的一些原则
- 各司其责
- 让HTML、CSS和JavaScript职能分离
- 组件封装
- 好的UI组件具备正确性、扩展性、复用性
- 过程抽象
- 应用函数式编程思想
组件封装
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）、和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
例子:用原生JS写一个电商网站工行的轮播图，应该怎么实现？
第一步，定义一个HTML结构。 结构：轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
第二步，表现。
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
第三步，行为。
行为：JS。
API
- Slider
-
+getSelectedItem() +getSelectedIndex() +slideTo() +slideNext() +slidePrevious() +start() +stop()
-
控制流：使用自定义事件来解耦。
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event(控制流)
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
- 将HTML模板化，更易于扩展
-
+render(data) +action(component)
-
抽象
- 将组件通用模型抽象出来
-
+registerPlugins(...plugins) +render()
-
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子：操作次数限制
- 一些异步交互
- 一次性的HTTP请求
高阶函数
Once:为了能够让“只执行一次”的需要覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
function once(fn){
return function(...args){
if(fn){
const ret=fn.apply(this,args);
fn=null;
return ret;
}
}
}
HOF：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn){
return function(...args){
return fn.apply(this,args);
}
}
常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
编程范式：命令式与声明式
命令式(趋向于怎么做)：
let list=[1,2,3,4];
let mapl=[];
for(let i=10;i<list.length;i++){
map.push(list[i]*2)；
}
声明式（趋向于做什么）：
let list[1,2,3,4];
const double=x => x*2;
list.map(double);
声明式比命令式具有可扩展性
总结
- 过程抽象/HOF/装饰器
- 命令式/声明式
leftpad事件
function leftpad(str,len,ch){
str=String(str);
var i=-1;
if(!ch&&ch!==0)ch='';
len0len-str.length;
while(++1<len){
str=ch+str;
}
return str;
}
事件本身的槽点：
- NPM模块粒度
- 代码风格
- 代码质量/效率
重构之后：
function leftpad(str,len,ch){
str=""+str;
const padLen= len-str.length;
if(padLen<=0){
return str;
}
return(""+ch).repeat(padLen)+str;
}
- 代码更简洁
- 效率提升
