如何写好JS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

一、写好JS的一些原则

1. 各司其职：让HTML、CSS和JavaScript职能分离。
2. 组件封装：好的UI组件具备正确性、扩展性、复用性。
3. 过程抽象：应用函数式编程思想。

二、深夜食堂结论

• HTML/CSS/JS各司其职
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

三、组件封装

• 结构设计
  • 结构：HTML
    • 轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
• 展现效果
  • 表现：CSS
    • 使用CSS绝对定位将图片重叠在同一个位置
    • 轮播图切换的状态使用修饰符（modifier）
    • 轮播图的切换动画使用CSS transition
• 行为设计
  • API（功能）
  • Event（控制流）
    • 使用自定义事件来解耦

四、组件封装总结

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

• 组件设计的原则性：封装性、正确性、扩展性、复用性
• 实现组建的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
    • 将控制元素抽取成插件
    • 插件与组件之间通过依赖注入方式建立联系
  • 模板化
    • 将HTML模板化，更易于扩展
  • 抽象化（组件框架）
    • 将组件通用模型抽象出来

五、过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

六、课后总结

这次的课给我的感觉就是从前面学过的知识来了一个大的跳跃，难度骤然提升，不过这次的课给我们讲解了很多实例，学以致用，能够更好、更深刻的理解，坚持下去！