学习JavaScript|青训营笔记这是我参与「第四届青训营」笔记创作活动的第3天 1）什么是JavaScript Ja

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

1）什么是JavaScript

JavaScript的简称为JS，是一种直译式脚本语言，它是web前端中不可缺少的一部分，它用于增强HTML页面，通常可以嵌入HTML代码中，JavaScript以交互式和动态的方式呈现网页，这允许页面对事件做出反应，展示特殊效果。

JS是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

2）写好JS的一些原则

各司其职：让HTML,CSS,和JavaScript职能分离
组件封装：好的UI组件具备正确性，扩展性，复用性
过程抽象：应用函数式编程思想

a.各司其职

例：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现，你会怎么做？

入门级

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入门</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <button id="modeBtn">🌞</button>
    <h1>模式切换</h1>
  </header>
  <main>
    <p>入门</p>
    <br />
    <p>写JS时各司其责原则。</p>
  </main>
  <script src="./index.js"></script>
</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;
}
#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 = '🌞';
  }
});

发现该版本通过JS代码改变颜色，读懂代码比较困难。

进阶

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>
          进阶
      </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: '🌜';
}

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

通过修改body元素的class属性改变颜色，比较上一个入门级要好许多

最终

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>
  <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>
         最终 。

CSS

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

body {
  box-sizing: border-box;
}

.content {
  height: 100%;
  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: '🌜';
}

样式效果完全由CSS实现，实现了各司其职原则，这种方式最好

得到如下结论

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

b.组件封装

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

组件设计的原则：封装性，正确性，扩展性，复用性。
实现组件的步骤：结构设计，展现效果，行为设计。
三次重构：插件化，模板化，抽象化（组件架构）。

结构HTML
表现CSS

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

行为JS

API：Slider
控制流：

使用自定义事件来解耦。
重构：插件化

解耦

a. 将控制元素抽取成插件

b. 插件与组件之间通过依赖注入方式建立联系

重构：模板化

解耦

将HTML模板化，更易于扩展
组件框架

3）过程抽象原则

用来处理局部细节控制的一些方法
函数式编程思想的基础应用