这是我参与【第五届青训营】笔记创作活动的第三天

重点内容

1. 掌握写好JavaScript代码的原则
2. 了解组件封装的基本方法
3. 掌握利用原生JS实现电商网站轮播图
4. 了解过程抽象的概念
5. 掌握高阶函数使用模式
6. 掌握JavaScript编程范式

知识点介绍

1. 写好JS的三大原则

• 各司其职、组件封装、过程抽象

2. JS原则一：各司其职

• 最好的版本使得html/css/js各司其职
• 避免由JS直接操作样式
• 用class来表示状态
• 纯展示类交互寻求零JS方案

3. JS原则二：组件封装

• 组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元
• 好的组件具备封装性、正确性、扩展性、复用性
• 结构：HTML
• 展示效果：CSS
• 行为：JS / API
• • 组件封装的基本方法：结构设计 - 展现效果 - 行为设计（API功能 + Event控制流）
• • 三次重构：插件化、模板化、抽象化（组件框架）

4. 重构：插件化

• 目的：改进组件封装灵活性，即通过HTML模块化，更易于扩展
• 解耦：将控制元素抽取成插件、插件与组件之间通过依赖注入的方式建立联系
• 抽象：将通用的组件模型抽象出来

5. JS原则三：过程抽象

• 过程抽象：用来处理局部细节控制的一些方法、函数式编程思想的基础应用

6. Once

• 为了满足“只执行一次”的需求覆盖不同的事件处理，将这个需求抽离出来的过程称为过程抽象

7. 高阶函数（HOF）

• 重函数 - 无状态
• 目的：使用高阶函数，大大减少使用非重函数的次数，增强维护性
• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器
• 常用的高阶函数
• • Once
• • Throttle
• • Debounce
• • ......

8. 编程范式

• 分类：命令式编程语言、声明式编程语言
• 命令式 - 强调怎么做
• 声明式 - 强调做什么
• 例如：针对多个数乘以2，有数组如下：

let list = [1,2,3,4];
// 命令式
let map = [];
for(let i = 0;i < list.length;i++){
    map.push(list[i] * 2 );
}
// 声明式
const double - x => x * 2;
list.map(double);

具体案例

1. 利用原生JS实现电商网站轮播图

• 轮播图是一个典型的列表结构，使用无序列表ul元素来实现

<div id="my-slider" class="slider-list">
    <ul>
        <li class="slider-list__item--selected">
            <img src="img/slider-list/selected.png"/>
        </li>
        <li class="slider-list__item">
            <img src="img/slider-list/item1.png"/>
        </li>
        <li class="slider-list__item">
            <img src="img/slider-list/item2.png"/>
        </li>
    </ul>
</div>

• 使用CSS绝对定位将图片重叠在同一个位置

#my-slider {
    position: relative;
    width: 700px;
}
.lider-list ul {
    list-style-type: none;
    position:relative;
    padding: 0;
    margin:0;
}

• 轮播图切换状态使用修饰符
• 轮播图的切换动画使用CSS transition

.slider-list__item,
.slider-list__item--selected{
    positine:absolutel
    transition: opacity ls;
    opacity: 0;
    text-align: center;
}
.slider-list__item--selected{
    transition: opacity ls;
    opacity: 1;
}

• 行为API设计保证原子操作、职责单一、满足灵活性

class Slider{
    getSelectedItem(){...}
    getSelectedItemIndex(){...}
    slideTo(){...}
    slideNext(){...}
    slidePrevious(){...}
}

个人总结

通过本次学习，明白了写好JavaScript代码的三大原则并加以区分、掌握，认识到JS的编程范式。在本次学习中，对于新概念的学习仍然不太熟悉，会加以弥补。