这是我参与「第四届青训营 」笔记创作活动的第3天
写好JS的一些原则
各司其职
让HTML、CSS和JavaScript职能分离。
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
好的UI组件具备正确性、扩展性、复用性。
组件是指Web页面上抽出来一个个包含模版HTML、功能 JS 和样式CSS的单元。好的组件具备封装性、正确性、扩展性、复用性。
基本方法
-
结构设计
-
展现效果
-
行为设计
- API(功能)
- Event(控制流)
重构:插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构:模板化
解耦
- 将HTML模板化，更易于扩展
组件框架
抽象
- 将组件通用模型抽象出来
总结
-
组件设计的原则:封装性、正确性、扩展性、复用性
-
实现组件的步骤:结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化(组件框架)
过程抽象
应用函改式编程思想
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
操作次数限制
- —些异步交互
- —欠性的HTTP请求
const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button) => {
button.addEventListener('click', (evt) => {
const target = evt.target;
target.parentNode.className = 'completed';
setTimeout(() => {
list.removeChild(target.parentNode);
}, 2000);
});
});
高阶函数
once
为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
}
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
常用高阶函数
- once
- Throttle
- Debounce
- Consumer / 2
- lterative
编程范式
命令式
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/装饰器
- 命令式/声明式
如何写好JavaScript
写代码最应该关注什么?
- 风格?
- 效率?
- 约定?
- 使用场景?
- 设计?
当年的Leftpad事件
function leftpad(str, len, ch) {
str = String(str);
var i = -1;
if (!ch && ch !== 0) ch = ' ';
len = len - str.length;
while (++i < 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;
}
- 代码更简洁
- 效率提升
