写好JS的原则

各司其职

html负责结构
css负责表现
JavaScript负责行为

举个例子：

让我们来看一下这个例子。通过写一段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 = '🌞';
  }
});

通过点击事件，我们实现了浅色和深色的切换。但是这段代码写的好吗？

对于不了解需求的人，能直接看懂含义吗？
这段代码能够实现复用吗？
如果需求改变能便于修改吗？

版本二

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

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

在这个版本，我们通过点击事件改变了<body>的类名，从而通过CSS去修改样式，className为night意味着是夜间模式。相比于上个版本，这一版本通过类名透露出了需求信息，且一旦需求更改可以直接修改CSS样式。

版本三

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

组件封装

组件是指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 优雅的多，可读性也更强。

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

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

实现组件的步骤：

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

过程抽象

新概念：函数式编程。

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

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

疑问点：函数式编程是对运算过程的抽象，是否是等价于或类似于面向过程编程？

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

函数式编程特点

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

函数式编程优点

便于测试
运行快
复用性好

纯函数：

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

【青训营】- 如何写好JS