这是我参与「第四届青训营 」笔记创作活动的第6天。
写好JS的一些原则
- 各司其责：让HTML、CSS和JavaScript职能分离。
- 组件封装：好的UI组件具备正确性、扩展性、复用性。
- 过程抽象：应用函数式编程思想。
深夜食堂案例总结：
- HTML/CSS/Js各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
例子
用原生 JS 写一个电商网站的轮播图，应该怎么实现？
结构：HTML
轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
表现：CSS
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用 CSS transition
行为：JS
行为：API
行为：控制流
- 使用自定义事件来解耦。
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API （功能）
- Event （控制流）
重构：插件化
思考：改进空间？
如果让你来重构这个轮播图组件，你会怎么做？
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦
- 将HTML模板化，更易于扩展
抽象
- 将组件通用模型抽象出来
总结
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子
操作次数限制
- 一些异步交互
- 一次性的HTTP请求
高阶函数
Once
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
HOF
思考和讨论
- 为什么要使用高阶函数？
编程范式
命令式与声明式
例子
总结
- 过程抽象 / HOF / 装饰器
- 命令式 / 声明式
写代码最应该关注什么？
- 风格？
- 效率？
- 约定？
- 使用场景？
- 设计？
当年的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;
}
- 代码更简洁
- 效率提升
小结：这一节是我学的最困难的课，便将月影大大的讲解过程记录在此，以便知识填充后再学习。
