「跟着月影学 JavaScript 」（上） ｜ 青训营笔记

掘金值得关注的人
77 阅读7分钟

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

什么才是好的JavaScript代码？

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

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

写好JS的一些原则

QQ截图20220727105550.png

案例: 写一段 JS ，控制一个网页，让它只会浅色和深色两种浏览模式。

QQ截图20220727105613.png

第一个版本

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 当中，这样让职责更加的分离，代码效果更好。

第三版本的优化

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 解决方案。

组件封装

定义

组件是指 Web 页面上抽出来的一个个包含模板（ HTML ）、功能（ JS ）和样式（ 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/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>

从上面的代码中我们可以看到，轮播图是一个典型的列表结构，我们可以使用无序列表

    元素来进行实现。

    继续，我们来对它的展现效果 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);
    }
}

    切换部分还有几个小圆点，我们称它为控制流

    <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(控制流) 。

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

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

    组件重构1：插件化

    1b433bb2cb3a8bd496a1e7ec7f0476ed.png

    重构2：模板化

    将html也模板化，做到只需一个 <div class='slider‘> 就能实现图片轮播，修改控制器的构造，传入图片列表。

    重构3：抽象化

    将通用的组件模型，抽象出来一个组件类（Component），其他组件类通过继承该类并实现其render方法。

    t0152a5c963a9854531.png

    总结：

    • 组件设计的原则——封装性、正确性、拓展性和复用性

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

    • 三次重构

      • 插件化
      • 模板化
      • 抽象化

    • 改进：CSS模板化、父子组件的状态同步和消息通信等等

      过程抽象

    • 处理局部细节控制的一些方法

    • 函数式编程思想的基础应用

    t013bcb517ea0c6099a.png

    应用：操作次数限制

    • 一些异步交互
    • 一次性的HTTP请求

    高阶函数

    高阶函数是什么

    依据于上面过程抽象的思想，目前我们以它为衍生的还有高阶函数。

    所谓高阶函数，即以函数作为参数或以函数作为返回值的一种函数。还有另外一种情况是，如果你既以函数作为参数，又以函数作为返回值，那么这种类型的称之为函数装饰器。

    下面我们来看一些常见的高阶函数。

    常用高阶函数

    Once一次函数：只执行一次的函数。 Throttle节流：将频繁执行变为每隔一段时间执行一次。 Denounce防抖：将频繁执行变为最后一次执行。 Consumer：用来消费数据。（Consumer补充） Iterative：迭代器。

avatar
文章
阅读
粉丝