这是我参与「第四届青训营」笔记创作活动的的第四天。 今天学习了如何写好JavaScript（上），讲师通过一个轮播图案例以及几个常用的高阶函数，并且对编程范式进行了举例。让我明白了该如何学习js，以及如何去正确的使用编程思想去编写代码。

本堂课重点内容

写好js的原则
轮播图案例
案例重构，插件化、模板化、抽象
高阶函数
编程范式

详细知识点介绍

详细的知识点也是记录成了笔记，文末分享。

课后个人总结

通过今天的《如何写好JavaScript（上）》，我对js的认识更深入了一步，随着前端技术的开发，js也是越来越重要，而且前端轮子现阶段已经存在很多种，如何学好js以及能否学好js是以后前端技术高低的一个决定性因素，所以学习好js基础，以及前沿性的js技术，非常重要。

笔记总结

如何写好JavaScript（上）

1、写好JS的一些原则

各司其职：让HTML、CSS和JavaScript职能分离
组件封装：好的UI组件具备正确性、扩展性、复用性
过程对象：应用函数式编程思想

2、案例

写一段js，控制一个网页，支持浅色和深色两种浏览样式

（1）方案一：直接使用js操作对象的样式

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(e.target.innerHTML === '🌞') {
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
      e.target.innerHTML = '🌜';
    } else {
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
      e.target.innerHTML = '🌞';
    }
  });

不足：

代码阅读性差
不容易维护，改变需求代码改动比较大

（2）方案二：使用js改变对象的css选择

  const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
      body.className = 'night';
    } else {
      body.className = '';
    }
  });

（3）方案三：零js方案

通过css的伪类选择器，来进行样式的切换

举例结论：

HTML、CSS、JavaScript各司其职
应当避免不必要的由JS直接操作眼视光hi
可以使用class来表示状态
纯展示类交互寻求零JS方案

3、轮播图案例

组件封装：组件是指Web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。

使用原生JS写一个电商网站的轮播图

（1）结构：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/t01adbe3351db853eb3.jpg">
            </li>
            <li class="slider-list__item">
                <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
            </li>
            <li class="slider-list__item">
                <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
            </li>
        </ul>
    </div>

（2）表现：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 1s;
    /* 将图片设置为透明的 */
    opacity: 0;
    text-align: center;
  }

  /* 要显示的一张图片的样式，优先级高于上面的css */
  .slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;
  }

（3）行为：JS

行为我们要使用这几个API：

得到当前选中的元素
得到当前选中的元素的下标
选择特定的元素
选择特定元素的下一张图片
选择特定元素的上一张图片

class Slider {
    constructor(id) {
        this.container = document.getElementById(id);
        this.items = this.container
            .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    /* 获取当前选中的元素 */
    getSelectedItem() {
        const selected = this.container
            .querySelector('.slider-list__item--selected');
        return selected
    }
    /* 获取当前选中的元素的下标 */
    getSelectedItemIndex() {
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    /* 跳转到指定的下标元素 */
    slideTo(idx) {
        const selected = this.getSelectedItem();
        if (selected) {
            selected.className = 'slider-list__item';
        }
        const item = this.items[idx];
        if (item) {
            item.className = 'slider-list__item--selected';
        }
    }
    /* 下一张图片 */
    slideNext() {
        const currentIdx = this.getSelectedItemIndex();
        const nextIdx = (currentIdx + 1) % this.items.length;
        this.slideTo(nextIdx);
    }
    /* 上一张图片 */
    slidePrevious() {
        const currentIdx = this.getSelectedItemIndex();
        const previousIdx = (this.items.length + currentIdx - 1)
            % this.items.length;
        this.slideTo(previousIdx);
    }
}

const slider = new Slider('my-slider');

/* 测试，这样我们就实现了一个自动播放的简单的轮播图 */
setInterval(() => {
    slider.slideNext();
},2000);

（4）控制流

使用自定义事件来解耦。

示例见代码。

（5）重构：插件化

解耦：

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

（6）重构：模板化

将HTML模板化，更易于扩展

（7）重构：抽象

将组件通用模型抽象出来

4、过程抽象

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

为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象。

5、高阶函数

以函数作为参数
以函数作为返回值
常用于作为函数装饰器

常用的高阶函数

Once
Throttle
Debounce
Consumer / 2
Iterative

6、编程范式

命令式与声明式举例

let list = [1,2,3,4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
}

let list = [1,2,3,4];
const double = x => x * 2;
list.map(double);

如何写好JavaScript（上） ｜ 青训营笔记