写好JavaScript的原则

• 各司其职 让HTML CSS Javascript职能分离
• 组件封装 好的UI组件具备正确性 拓展性 复用性
• 过程抽象 应用函数式编程思维

版本一

直接操作body 的style 用Javascript来处理CSS的事 不符合各司其职的原则

版本二

通过class进行控制

版本三 (不使用JavaScript解决)

总结

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

组件封装

总结

• 结构设计
• 展现效果
• 行为设计
  • API (功能)
  • Event (控制流)

总结

• 组件设计原则 封装性 正确性 扩展性 复用性
• 实现组件的步骤:结构设计 展现效果 行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化(组件框架)