理解JavaScript | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天如何写好JavaScript

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

如何写好JavaScript？

1.各司其职：让HTML、CSS和JavaScript职能分离。

2.组件封装：好的UI组件具备正确性、扩展性、复用性。

3.过程抽象：应用函数式编程思想。

各司其职

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

版本一

通过JavaScript控制css，不便于后续修改需求

 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 = '🌞';
    }
  });

版本二

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

如果遇到纯UI展示类的操作，页面样式的切换，动画之类的，我们可以优先考虑使用CSS来操作，而不是JavaScript！简单来说解决bug的最好方式就是不写代码。

组件封装

总结：基本方法

结构设计
展现效果
行为设计
1. API （功能）
2. Event （控制流）

结构：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>

表现：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;
}

.slider-list__item--selected{
 transition: opacity 1s;
 opacity: 1;
}

行为：JS

 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');
  slider.slideTo(3);

我们定义函数的时候，要做好封装函数，尽量不要让一个函数直接处理一个外部的变量，最好把这个变量变成一个参数，传递给函数。封装函数的时候要做好数据抽象与过程抽象。

编程范式

总结

过程抽象 / HOF / 装饰器
命令式 / 声明式

高阶函数

Once

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

 function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }

HOF

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

function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

命令式与声明式

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);