JavaScript 编码原则之过程抽象 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 3 天。在定

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

一、本堂课重点内容

JavaScript 好代码的标准
HTML/CSS/JS 各司其责
组件的定义解析及特征
组件封装基本方法
利用原生 JS 实现电商网站轮播图
过程抽象概念
高阶函数使用模式
JavaScript 编程范式

二、详细知识点介绍

写好JS的原则

各司其责
组件封装
过程抽象

结构: HTML

轮播图是一个典型的列表结构我们可以使用无序列表<ul>元素来实现。

<div id="my-slider" class="slider-list">
    <ul>
        <li class="slider-list_item--selected">
            <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
        </li>
        <li class="slider-list  item">
            <img src="https://p4.ssl.qhimg.com/t0ladbe3351db853eb3.jpg"/>
        </li>
        <li class="slider-list  item">
            <img src="https://p2.sst.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
        </li>
        <li class="slider-list__item">
            <img src="https://p4.ssl.qhimg.com/t0133lac159b58f5478.jpg"/>
        </li>
    </ul>
</div>

表现: CSS

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

#my-slider{
    position: relative;
    width: 790px;
}
.slider-list ul{
    list-style-type:none;
    position: relative;
    padding: 0;
    margin: 0;
}
.slider-list__item,
.slider-list__item--selected{
    position: absolute;
    transition: opacity ls;
    opacity: 0;text-align: center;
}
.slider-list__item--selected{
    transition: opacity Is ;
    opacity: 1;
}