这是我参与「第四届青训营」笔记创作活动的的第4天
本堂课重点内容
- 如何写好 JavaScript
详细知识点介绍
如何写好 JavaScript
写好 JS 的一些原则
-
各司其职
-
让 HTML、CSS和 JavaScript 职能分离
-
应当避免不必要的由 JS 直接操作样式
-
可以用 class 来表示状态
-
纯展示类交互寻求零 JS 方案
-
-
组件封装
组件指 Web 页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS） 的单元
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤
-
结构设计
-
展示效果
-
行为设计
-
API（功能）
-
Event（控制流）
-
-
插件化
-
模板化
-
抽象化（组件框架）
-
-
-
过程抽象
即用来处理局部细节控制的一些方法
-
应用函数式编程思想
-
高阶函数
-
以函数作为参数
-
以函数作为返回值
-
常用于作为函数装饰器
-
常用高阶函数
-
Once
-
Throttle
-
Debounce
-
Consumer / 2
-
lterative
-
-
-
编程范式
-
命令式与声明式
声明式的编程思想天然的比命令式更有扩展性
-
-
实践练习例子
例一：轮播图组件框架的实现
HTML 部分
<div id="my-slider" class="slider-list"></div>
CSS 部分
JavaScript 部分
解析
HTML 结构
轮播图是一个经典的列表结构，我们可以使用无序列表 ul 元素来实现
CSS 表现
-
使用 CSS 绝对定位将图片重叠在同一个位置
-
轮播图切换的状态使用修饰符（modifier）
-
轮播图的切换动画使用 CSS transition
JS 行为
定义一个 Slider 类，在类中实现相应 API
-
Slider
-
getSelectedltem()：获取当前选中图片元素
-
getSelectedltemlndex()：获取当前选中图片元素在列表中的下标
-
slideTo()：slideTo 到特定 Index 的元素上
-
slideNext()：轮播下一张图片
-
slidePrevious()：轮播上一张图片
-
stop()：暂停轮播
-
start()：继续轮播
-
解耦
使用自定义事件来，避免组件状态与图片状态耦合在一起
-
将控制元素抽取成插件
-
插件与组件之间通过依赖注入方式建立联系
抽象出来的插件
-
pluginController()：展示底部轮播控制
-
pluginPrevious()：展示上一张图片控制
-
pluginNext()：展示下一张图片控制
将 HTML 模板化，更易于扩展
-
render()：生成渲染 HTML 模板代码
-
action()：完成初始化
抽象
由轮播图组件、插件，将组件通用模型抽象出来
Slider
-
+ render()
-
+ registerPlugins(...plugins)
-
+ getSelectedltem()
-
+ getSelectedltemlndex()
-
+ slideTo()
-
+ slideNext()
-
+ slidePrevious()
-
+ stop()
-
+ start()
SliderPlugin
-
+ render(data)
-
+ action(component)
得到组件通用模型
Component
-
+ registerPlugins(...plugins)
-
+ render()
运行结果
课后个人总结
本节课跟着月影老师学习的写好 JS 的一些原则，让我对编程思想有了更深层次的理解。同时也让我意识到了自己对 JavaScript 的认识与了解还有着十分多的不足，只有打扎实基础，才能去优化发现自己写的代码的不足。
引用参考
第四届字节跳动青训营「跟着月影学 JavaScript 」课程
