这是我参与「第四届青训营 」笔记创作活动的的第3天
## 写好JS的一些原则
-
各司其责
让HTML、CSS和JavaScript职能分离。
-
组件封装
好的UI组件具备正确性、扩展性、复用性。
-
过程抽象
应用函数式编程思想。
深夜食堂 结论
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
组件封装
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。 用原生 JS 写一个电商网站的轮播图，应该怎么实现？
- 结构：HTML
轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item--selected">
<img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
</li>
<li class="slider-list__item">
<img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
</li>
</ul>
</div>
- 表现：CSS
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用 CSS transition
#my-slider{
position: relative;
width: 790px;
}
.slider-list ul{
list-style-type:none;
position: relative;
padding: 0;
margin: 0;
}
.slider-list__item,
.slider-list__item--selected{
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
.slider-list__item--selected{
transition: opacity 1s;
opacity: 1;
}
API
控制流,使用自定义事件来解耦。
组件封装总结
基本方法
-
结构设计
-
展现效果
-
行为设计
- API （功能）
- Event （控制流）
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦
- 将HTML模板化，更易于扩展
组件框架
抽象
- 将组件通用模型抽象出来
总结
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子
操作次数限制
- 一些异步交互
- 一次性的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);
}
}
常用高阶函数
HOF
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
编程范式
命令式与声明式
命令式更强调怎么做，声明式更强调做什么，更简洁
let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
mapl.push(list[i] * 2);
}
let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);
例子
总结
- 过程抽象 / HOF / 装饰器
- 命令式 / 声明式
