JavaScript 编码原则之各司其责
写好JS的一些原则
各司其职：让HTML、CSS和JavaScript 职能分离
组件封装：好的 UI 组件具备正确性、拓展性、复用性
过程抽象：应用函数式编程思想
深夜食堂——讨论
1、HTML/CSS/JS 各司其职
2、应当避免不必要的由 JS 直接操作样式
3、可以用 class 来表示状态
4、纯展示类交互寻求零 JS 方案
JavaScript 编码原则之组件封装
组件封装
组件是指 Web 页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、拓展性、复用性。
总结：基础方法
1、结构设计
2、展现效果
3、行为设计：API（功能）、Event（控制流）
重构：插件化
解耦
1、将控制元素抽取成插件
2、插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦
将HTML模板化，更易于拓展
抽象
将组件通过模型抽象出来
总结
1、组件设计的原则：封装性、正确性、拓展性、复用性
2、实现组件的步骤：结构设计、展现效果、行为设计
3、三次重构：插件化、模板化、抽象化（组件框架）
JavaScript 编码原则之过程抽象
过程抽象
1、用来处理局部细节控制的一些方法
2、函数式编程思想的基础应用
高阶函数
Once
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
HOF
1、以函数作为参数
2、以函数作为返回值
3、常用于作为函数装饰器
常用高阶函数
Once
Throttle
Debounce
Consumer/2
Iterative
编程范式
总结
1、过程抽象/HOF/装饰器
2、命令式/声明式
Leftpad 事故背景引入
当年的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;
}
1、NPM 模块粒度
2、代码风格
3、代码质量/效率
function leftpad(str, len, ch) {
str = "" + str;
const padLen = len - str.length;
if(padLen <= 0) {
return str;
}
return (""+ch).repeat(padLen)+str;
}
1、代码更简洁
2、效率提升
