【青训营】- 如何写好 JavaScript写好JS的一些基本原则各司其职应当避免不必要的由 JS 直接操作样式可

写好JS的一些基本原则

各司其职

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

组件封装

组件是指Web页面上抽出来一个个包含模板（HTML）、样式（CSS）、功能（JS）的单元。

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

这里一个轮播图为例：

HTML 部分：

<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 部分：

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

JS代码是一个初步封装的结果，我们把轮播图设计成一个类，类中设计了一些常用的方法。第一次学到可以这样设计 HTML 页面大受震惊，这种方法比直接写 js 优雅的多，可读性也更强。

当然还有更深层次改良，之后分析。

这种应该算是面向对象编程（个人理解，若有异议请指正）。

实现组件的步骤：

结构设计
展现效果
行为设计

过程抽象

新概念：函数式编程。

函数式编程中的函数指的不是程序中的函数（方法），而是数学中的 函数映射关系

一个特定输入产生一个特定输出，把现实世界中的事物和事物之间的联系抽象到程序世界，是对运算过程的抽象。

疑问点：函数式编程是对运算过程的抽象，是否是等价于或类似于面向过程编程？解惑：面向过程编程是分析出解决问题所需要的步骤，然后用函数一步步的实现，使用时依次调用，存在变量状态和相互依赖，属于串行, 而函数式编程更接近于数学计算，着眼于实现，无状态，无副作用，因此不等价

函数式编程特点

纯函数
相同的输入总是得到相同的输出
可以重复使用

函数式编程优点

便于测试
运行快
复用性好

纯函数：

始终返回相同的值
自包含
不引起副作用

个人总结

函数式编程对我来说还是比较新鲜的内容，有点难，有点有趣，翻看了几篇资料，又稍微懂了一些。函数式编程在如今前端领域越来越火，无论是React16、Vue3都在大量拥抱函数式编程，掌握函数式编程的理念和写法是前端必不可少的知识。多加运用函数式编程的理念应该会有助于学习的。

【青训营】- 如何写好 JavaScript