这是我参与「第四届青训营 」笔记创作活动的第2天
写好JS的一些原则
1.各司其责
让HTML、CSS和JavaScript职能分离。
案例：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。
写法一：这个写法使用js做了css该做的事情，违背了各司其职的原则。
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '🌞') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌜';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '🌞';
}
});
写法二：这个写法使用添加删除class，表名了它的状态(比较推荐)
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
写法三：通过纯css的方式来完成这个案例，纯展示类交互寻求零 JS 方案(强烈推荐)
//html
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
<main>
<div class="pic">
<img src="">
</div>
<div class="description">
<p>
???????
</p>
</div>
</main>
</div>
//css
#modeCheckBox {
display: none;
}
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
结论：
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
2.组件封装
好的UI组件具备正确性、扩展性、复用性。
总结：
- 结构设计
- 展现效果
- 行为设计
- API （功能）
- Event （控制流）
重构代码：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模块化
- 将HTML模板化，更易于扩展
组件框架
将组件通用模型抽象出来
组件封装
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
3.过程抽象
应用函数式编程思想。
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
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
Once
Throttle
Debounce
Consumer
Consumer/2
lterative
编程范式
命令式与声明式
命令式编程
告诉编辑器如何做
let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
mapl.push(list[i] * 2);
}
声明式编程
告诉编辑器做什么。如何做的部分被封装到高阶函数（如map等）
let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);
声明式编程可以写出更简洁、更有表现力的代码。代码越少，bug出现的机率越小。
例子：命令式
声明式
三态
算法
交通灯：版本一
交通灯：版本二（数据抽象）
交通灯：版本三（过程抽象）
交通灯：版本四（异步+函数式）
判断是否是4的幂
洗牌
洗牌-使用生成器
分红包-[切西瓜法]
分红包-[抽牌法]
总结：通过月影老师的带领发现前端也很需要算法，数学的知识。这次老师教的部分算法代码没有理解，以后再回来看看。
