这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
什么才是好的JavaScript代码？
犀牛书 JavaScript The good parts
写好JS的一些原则
- 各司其职 HTML、CSS和JavaScript职能分离
- 组件封装 好的UI组件具备正确性、扩展性、复用性
- 过程抽象 应用函数式编程思想
结论
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件分装
-
-
- 组件是指web页面上抽出来一个个包含模板（Html)、功能（JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。
-
第一步 定义HTML结构 轮播图是一个典型的列表结构，可以使用无序列表Ul来实现
第二步 CSS定位 表现 使用 CSS 绝对定位将图片重叠在同一个位置 轮播图切换的状态使用修饰符 (modifier) 轮播图的切换动画使用 CSS transition
第三部 行为JS 实现切换行为 API
- Slider
- +getSelectedltem()
- +getSelected|temindex()
- +slideTo（)
- +slideNext（ )
- +slidePrevious( )
控制流（如何控制，添加控制方式）
使用自定义事件实现控制流
重构：模板化
解耦 将html模板化 更易于扩展
总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
•三次重构
-
- 插件化
-
- 模板化
-
- 抽象化（组件框架）
