【字节青训营】| JS学习笔记

目录

如何写好JS？

写好JS的一些原则

---

如何写好JS？

《JavaScript权威指南》--犀牛书

写好JS的一些原则

1. 各司其职
2. 组件封装
3. 过程抽象

深夜食堂案例结论

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

组件封装

轮播图

用原生JS来实现轮播图

结构设计：HTML

轮播图是典型的列表结构，我们使用无序列表<ul>来实现。

<div id="my-slider" class="slider-list">
    <ul>
        <li class="slider-list__item--selected">
            <img src="../img/img1.png"/>
        </li>
        <li class="slider-list__item">
            <img src="../img/img2.png"/>
        </li>
        <li class="slider-list__item">
            <img src="../img/img3.png"/>
        </li>
        <li class="slider-list__item">
            <img src="../img/img4.png"/>
        </li>
    </ul>
</div>
        

展现效果：CSS

• 使用CSS的绝对定位将图片重叠在同一位置
• 轮播图切换状态使用修饰符modifier
• 轮播图切换动画使用CSS transition

行为设计：API

行为设计：控制流

使用自定义事件解耦

重构：插件化

妈的 实现轮播图写的这么复杂

太困了 明天再写