6js组件封装|青训营

如何学好JavaScript

HTML/CSS/JS各尽其职

应当避免不必要由JS直接操作样式

可以用class来表示状态

纯展示类交互寻求零JS方案

组件封装

组件是指web页面上抽出来一个个包含模板，js，样式的单元。好的组件具备封装性、正确性、拓展性、复用性。

eg：用原生JS写一个电商网站的轮播图，应该怎么实现？

结构：HTML

<div id =”my-slider” class=”slider-list”>
    <ul>
        <li class="slider-list_item--selected">
            <img src="https://p5.ssl.qhimg.com/t0119c746>
        </li>
        <li class="slider-list_item--selected">
            <img src="https://p5.ssl.qhimg.com/t01abde33>
        </li>
        <li class="slider-list_item--selected">
            <img src="https://p5.ssl.qhimg.com/t01645cd5>
        </li>
        <li class="slider-list_item--selected">
            <img src="https://p5.ssl.qhimg.com/t01331ac1>
        </li>
      </ul>
     </div>