紧跟月影大佬的步伐，一起来学习如何写好JS（上）

Posted 2021-10-03 星期一研究室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了紧跟月影大佬的步伐，一起来学习如何写好JS（上）相关的知识，希望对你有一定的参考价值。

🌂序言

对于前端来说，js 可以说是非常常见的脚本语言之一了。前端工程师写的最多的代码，可能就是 js 代码了。可很多时候，我们都只是 CV 工程师，只管把代码写完跑起来了就行，但是呢，殊不知存在的一个问题是，我们一个稍微疏忽的编写，就很容易导致程序不知不觉的bug出现。

因此呢，写好 js 代码，必须要遵循到几大原则：各司其职、组件封装和过程抽象。

前段时间参加了字节的青训营，有幸听到月影大佬💁‍♂️的直播课。那么接下来，我们就跟着月影大佬的步伐，来了解一下如何写好 JS ~

一起来学习吧~⛱️

一、☂️什么才是好的JS代码？

在真正讲解写好 JS 的三大原则之前，我们先来谈论一个话题，什么才是好的 JS 代码呢？

对于好的 js 代码来说，应该要遵循的是以下三个原则。分别是：

各司其职
组件封装
过程抽象

那么下面，我们将依据这三个原则，来进行展开细述。

二、🧵 写好JS的一些原则

1. 各司其职👋

（1）定义

写前端的小伙伴们应该知道，前端为什么要分成 html 、 CSS 和 JS 。那其实实际上，在前端中， HTML 负责结构， CSS 负责表现，而 JS 负责行为。如下图所示：

（2）例子阐述

我们先来看一道题目，假设现在要写一段 JS ，控制一个网页，让它只会浅色和深色两种浏览模式。如下图所示：

如果是你来实现，你会怎么做呢？

Now，我们先来看第一个版本。

先来看 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <header>
    <button id="modeBtn">🌞</button>
    <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>
</body>
</html>

现在来看 css 代码：

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
}
div.pic img {
  width: 100%;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  background: transparent;
}

最后，我们来看 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 = '🌞';
  }
});

现在，大家可以来看下上面的这个版本。大家可以先想一下，这个版本会有什么问题呢？如果是你来优化，你会怎么做呢？

对于以上这段代码，主要存在以下几点问题：

样式和行为没有分离，即没有做到职责分离
全局污染
复用性不强
封装性不好

针对以上所存在的问题，我们来进行第二版本的优化。具体如下：

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <header>
    <button id="modeBtn"></button>
    <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>
</body>
</html>

CSS 代码：

body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
  transition: all 1s;
}
div.pic img {
  width: 100%;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  background: inherit;
}

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

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

JS 代码：

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

大家可以看到，我们尽可能的把样式都抽离到 css 当中，这样让职责更加的分离，代码效果更好。

那看到这里，可能有的小伙伴就会像，有没有可能所有的内容都放在 css 当中呢，而不要去用到 JS 来实现。答案是肯定的。接下来我们来看第三个版本。

进一步优化，我们来看第三个版本。 HTML 代码与上面一样保持不变，没有 JS 代码。下面附上新的 CSS 代码：

body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

/* 当选中时，给其再加个content类 */
#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

/* 当选中时，对content类的内容进行修改 */
#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

大家可以看到，修改到最后版本的时候，是不是就只剩下 HTML 和 CSS 了呢，是不是简洁了许多了呢。

现在，我们来对以上这个例子做个小结。深夜食堂例子结论如下👇

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

到这里，相信大家对上面这个例子也有了一定的了解。

同时，上面代码已放到在线网站 code.h5jun 上，大家根据自身需求在下面点击链接进行获取哦~

👉深夜食堂：版本一

👉深夜食堂：版本二

👉深夜食堂：版本三

2. 组件封装🤏

（1）定义

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

（2）例子阐述：轮播组件

用原生 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/t01abe3351db853eb3.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/t01331ac159b58f5478.jpg" />
        </li>
        <li class="https://slider-list__item">
            <img src="htttps://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg" />
        </li>
    </ul>
</div>

从上面的代码中我们可以看到，轮播图是一个典型的列表结构，我们可以使用无序列表 <ul> 元素来进行实现。

继续，我们来对它的展现效果 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 {
    /* 使用 css 绝对定位将图片重叠再同一个位置 */
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
}

/* 轮播图切换的状态使用修饰符 */
.slider-list__item--selected {
    /* 轮播图的切换动画使用css transition */
    transition: opacity 1s;
    opacity: 1;
}

对于以上所设计的 css 来说，主要有以下几个特点：

使用 css 绝对定位将图片重叠在同一个位置；
轮播图切换的状态使用修饰符（modifier）；
轮播图的切换动画使用 CSS transition 。

下面我们来对它的行为也就是 JS 进行设计。具体代码如下：

class Slider {
    constructor(id) {
        this.container = document.getElementById(id);
        this.items = this.container
        .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    getSlectedItem() {
        const selected = this.container
        .querySelector('.slider-list__item--selected');
        return selected;
    }
    getSlectedItemIndex() {
        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.getSlectedItemIndex();
        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);
    }
}

JS 其实就是用来设计一些行为 API ，那对于 API 设计来说，它应该尽量保证原子操作，且职责要单一，满足灵活性。

下面给出上面这段 JS 代码中的 API 。具体如下图：

除了以上内容以外，细心的小伙伴应该已经发现，下面切换部分还有几个小圆点，我们称它为控制流。那对于这些控制流来说，又该怎么设计呢？

请看下面代码：

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

以上代码在线网址👉轮播组件第一版本

现在，我们先来总结一下上面这个基本方法的结构组成，如下所示：

结构设计 HTML ；
展现效果 CSS ；
行为设计 JS ，分别包含 API(功能) 和 Event(控制流) 。

好了，到这里，我们的轮播组件基本上也就完成啦！但是呢，同学么看上面的代码，是否有发现存在什么样的问题呢？

在上面的几段代码设计中，主要存在以下问题：

构造函数太复杂
可扩展性和灵活性相对较小

（3）轮播组件重构：插件化

上面这段代码明显是还不够好的，那如果是让你来重构这个轮播图组件，你又会怎么做呢？

现在，我们首先来对这个组件进行解耦。所谓解耦，就是：

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

如下图所示：

从上图中我们可以知道，将向左向右滚动，以及底下的点击切换按钮，这三个控制元素给抽取出来形成插件。

抽离后的三个插件分别进行封装，封装结果如下：

class Slider{
  constructor(id, cycle = 3000)紧跟月影大佬的步伐，一起来学习如何写好JS（下）
 紧跟月影大佬的步伐，一起来学习如何写好JS（下）
 紧跟大佬步伐，恺明大神新作MAE复现历程
 紧跟大佬步伐，恺明大神新作MAE复现历程
 青训营月影老师告诉我写好JavaScript的四大技巧——妙用特性
 青训营月影老师告诉我写好JavaScript原则与技巧大总结

紧跟月影大佬的步伐，一起来学习如何写好JS（上）

如何写好JS - 三大原则

🌂序言

一、☂️什么才是好的JS代码？

二、🧵 写好JS的一些原则

1. 各司其职👋

（1）定义

（2）例子阐述

2. 组件封装🤏

（1）定义

（2）例子阐述：轮播组件

（3）轮播组件重构：插件化