写好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 = '';
  }
});

版本三：

<!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>
        文字叙述
        </p>
      </div>
    </main>
  </div>
</body>
</html>

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

版本三实现：

总结

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

组件封装

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

举例：用原生JS写一个电商网站的轮播图，应该怎么实现？

结构设计:HTML

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

效果展示:CSS

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

行为设计：API

API设计应保证原子操作，职责单一，满足灵活性。

行为设计：控制流

用自定义事件来解耦。

总结组件封装基本方法：

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

API (功能)

Event(控制流)

2023/1/20

JavaScript（上） | 青训营笔记

写好JS的一些原则

各司其职

组件封装