这是我参与「第五届青训营」笔记创作活动的第3天。
引入
课程伊始，月影老师抛出一个问题——什么才是好的JavaScript代码？
这就体现出我和大佬的差距，我认为好的代码那必须是时间复杂度和空间复杂度相权衡的代码，但月影老师告诉莪们，一段好的代码有以下几个要点：
- 各司其职
- 组件封装
- 过程抽象
老师列举了一个状态切换的例子，并列出一下三种方法：
- 直接操作Dom样式
- 通过类名切换不同状态
- 使用纯CSS实现
结论
- HTML/CSS/JS应各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class表示状态
- 纯展示类交互寻求零JS方案
重构轮播图组件
轮播图组件创建
-
结构展示
-
展示效果
-
行为设计
- API（功能）
- Event（控制流）
class Slider{
constructor(id,cycle=3000){}
getSelectedItem(){}
getSelectedItenIndex(){}
slideTo(idx){}
slideNext(){}
slidePrevious(){}
start(){}
stop(){}
}
插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式建立联系
registerPlugins(...plugins){
plugins.forEach(plugin=>plugin(this))
}
模板化
解耦
- 将HTML模板化，更易扩展
render() {
const images = this.options.images;
const content = images.map(image => `
<li class="slider-list__item">
<img src="${image}" alt="img"/>
</li>
`.trim());
return `<ul>${content.join('')}</ul>`;
}
抽象化
模型抽象
过程抽象
高阶函数
一个函数可以接收另一个函数作为参数，或者是返回一个函数，这类函数的优点是抽象、组合、代码可重用性和可读性
交通灯demo
版本一（连续定时器）
缺点：容易造成回调地狱
版本二（状态池）
缺点：复用性差，可扩展性差
版本三（柯里化）
优点：可扩展性和复用性良好
收获
在月影老师的课上，我最大的收获是有关编程思维的，现在做的都是一些小的项目或者demo，可以不用考虑复用，能实现效果就好，但以后进入公司，写的可能会有很多大项目，在那样的一个团体中自己的代码就需要做到可复用，可扩展，可封装。一个成熟的程序员，一定会为自己考虑好后路。
