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

如何写好JavaScript

• 写好JS的一些原则

  • 各司其责：让HTML、CSS和JavaScript职能分离
    • HTML/CSS/JS 各司其责
    • 避免不必要的由JS直接操作样式
    • 可以用 class 来表示状态
    • 纯展示类交互寻求零 JS 方案
  • 组件封装：好的UI组件具备正确性、扩展性、复用性
  • 过程抽象：应用函数式编程思想

如何做轮播图？

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

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

行为：控制流

• 使用自定义事件来解耦。

  <a class="slide-list__next"></a>
  <a class="slide-list__previous"></a>
  <div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
  </div>

 const detail = {index: idx}
  const event = new CustomEvent('slide', {bubbles:true, detail})
  this.container.dispatchEvent(event)

组件封装

总结：基本方法

• 结构设计

• 展览效果

• 行为设计

  • API（功能）
  • Event（控制流）

如何改进组件？

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

重构：

1. 插件化

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

2. 模板化

• 将HTML模板化，更易于扩展
• 将组件通用模型抽象出来

组件封装总结

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

过程抽象

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

高阶函数

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

常用的高阶函数有：

• Once
• Throttle
• Debounce
• Consumer / 2
• Iterative

编程范式

命令式与声明式

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

举例

• Toggle - 命令式
• Toggle - 声明式
• Toggle - 三态