【青训营】- 如何写好JS(上)

871 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与掘力星计划,赢取创作大礼包,挑战创作激励金

前言

一个好的JS代码要遵守以下一些原则

  • 各司其责:即HTML负责网页结构,CSS负责元素样式,JS 则负责交互和行为。

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

  • 过程抽象:用函数作为黑盒来编写和使用,这过程也称为过程抽象

各司其责

QQ截图20210930110710.png

例子

通过写一段JS,控制一个网页,让它支持浅色和深色两种浏览模式。如果是你来实现,你会怎么做? QQ截图20210930134800.png

深夜食堂:版本一

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, 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: '🌜';
}

深夜食堂:版本三

<!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>
  <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>
</body>
</html>
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;
}

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

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

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

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

深夜食堂:结论

QQ截图20210930141219.png

  • HTML/CSS/JS各司其责

  • 应当避免不必要的由JS直接操作样式

  • 可以用class来表示状态

  • 纯展示类交互寻求零JS方案

组件封装

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

例子

用原生JS 写一个电商网站的轮播图,应该怎么实现? QQ截图20210930141545.png

结构设计:HTML

结构:HTML

轮播图是一个典型的列表结构,我们可以使用无序列表<ul>元素来实现。 QQ截图20210930142151.png

展现效果:CSS

表现:CSS

  • 使用CSS绝对定位将图片重叠在同一个位置

  • 轮播图切换的状态使用修饰符(modifier)

  • 轮播图的切换动画使用CSS transition QQ截图20210930142524.png

行为设计:API

行为:JS

  • API设计应保证原子操作,职责单一,满足灵活性。
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');
slider.slideTo(1);

QQ截图20210930142701.png

行为设计:控制流

行为:控制流

  • 使用自定义事件来解耦。 QQ截图20210930142840.png

总结:基本方法

  • 结构设计

  • 展现效果

  • 行为设计

    • API(功能)

    • Event(控制流)

重构:插件化

解耦

  • 将控制元素抽取成插件

  • 插件与组件之间通过依赖注入方式建立联系 QQ截图20210930143746.png QQ截图20210930143806.png

重构:模板化

解耦

  • 将HTML模板化,更易于扩展 QQ截图20210930143943.png QQ截图20210930143958.png

重构:组件框架

抽象

  • 将通用的组件模型抽象出来 QQ截图20210930144208.png QQ截图20210930144240.png

总结

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

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

  • 三次重构

    • 插件化

    • 模板化

    • 抽象化(组件框架)

  • 如以上有错误的地方,请在评论区中指出,谢谢!

小可爱们看完点个赞再走一走~~