JavaScript_1|青训营

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

• 目录

  • 各司其职

    • 什么叫做各司其职？
    • 案例优化方案

  • 组件封装

    • 什么是组件
    • 为什么要进行组件封装
    • 什么情况下考虑组件封装
    • 组件封装的基本原则
    • 基础结构

• 详细

  • 各司其职

    • 什么叫做各司其职？

      • 良好的前端代码，需要避免不必要的JS直接操作CSS
      • 避免使用class切换样式 而不要修改style 因为style应该是由CSS负责的
      • 如果只是展示内容 可以考虑零JS的方案 只使用HTML和CSS

    • 案例优化方案

      • 案例一中使用JS直接操作CSS的方法并不好 2种优化方案如下
      • 使用className 同时修改CSS 可以减少DOM的操作次数
      • 这个界面只是展示 所以可以考虑零JS 即使用:checked伪类 也可以实现切换界面day/night模式的功能

  • 组件封装

    • 什么是组件

      • 一个功能或一个ui样式就是一个组件 eg：导航栏、banner等等
      • 不同的框架对组件的分类会有差异，但都大同小异

    • 为什么要进行组件封装

      • 提高开发效率
      • 方便重复使用
      • 简化调试步骤
      • 提升项目可维护性
      • 便于协同开发

    • 什么情况下考虑组件封装

      • 一般没有响应式数据的组件可以注册成函数式组件
      • 多组件切换的情况（部分代码重复 只是少量数据不一样）可以使用动态组件

    • 组件封装的基本原则：

      • 封装性
      • 正确性
      • 扩展性
      • 复用性

    • 案例

      • HTML结构：

        • 轮播图是列表结构，用ul元素可以实现

      • CSS表现：

        • 使用CSS绝对定位以将图片重叠在同一个位置
        • 切换动画用transition（之前也用过）
        • 切换的状态用< >

      • JS行为设计：

        • Slider（API）：

          • getSelectedItem() 获取当前选中元素
          • getSelectedItemIndex() 获取当前选中元素的下标
          • slideTo() 播放
          • slideNext() 切换到下一张
          • slidePrevious() 切换到前一张

        • Event 控制流：

          自定义事件的方式是一个好的方法 不会让图片耦合在一起

          • 在Slider中 自定义了多个监听事件 在事件中间接操作CSS
          • 定义了start()和stop()函数 以代替setInterval()

      • 改进

        代码较复杂 不够灵活 插件化以解耦：

        • 将控制元素抽取为插件
        • 插件与组件之间通过依赖注入方式建立联系

• 实操

• 总结

  之前JS学的不多 所以今天进度比较慢orz... 如果说CSS能在界面仅展示的时候打遍天下无敌手 那么JS有了组件封装之后就能在动态交互的时候发挥很大作用

• 参考

  组件化开发之如何封装组件