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

前言

现实生活中，良好的代码编写习惯能让人赏心悦目，有阅读下去的耐心。但是如果不注重代码的编写格式，这往往会让人不敢再往下阅读，甚至会影响阅读者一天的心情。这节笔记主要介绍新手小白如何写好JavaScript代码。

课堂重点🗒️🖋️

JavaScript 好代码的标准

HTML/CSS/JS 各司其责

组件的定义解析及特征

组件封装基本方法

利用原生JS 实现电商网站轮播图

代码写作关注事项

left-pad 事件背后的代码规范

写好JS代码，需要遵循以下三个原则：

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

1. 各司其责

（1）定义

让 HTML 、 CSS 和 JavaScript 职能分离， HTML 是页面的骨架， CSS 是页面的皮肤， JavaScript 是页面的动作。如下图所示:

我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

（2）具体案例-深夜食堂

效果图如下：

版本一：

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

当 body 元素的 class 属性不等于 night 时，表示浅色模式，所以现在需要将它的状态修改为夜间模式，于是我们只要将它的 class 属性设置为 night ，页面就会呈现夜间模式的样式。同理，当 body 元素的 class 属性等于 night 时，表示 body 元素是深色模式，所以需要将这个元素的状态修改为浅色模式，即 class 属性等于空(默认状态)。

优点：

JS 仅仅是修改元素的类名 className ，描述了这是一个深色 ( night )模式的状态，这样就便于别人快速理解业务需求，能更直观的表达代码想表达的意思，可读性也提高了。
可以更灵活变更背景等样式需求。如果需求变更，例如把模式对应的颜色换了，我们不需要修改 JS 代码,只需要修改 body.night 的样式规则即可。

版本三

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

总结：

直接在 js 中去修改 css 样式，虽然可以实现业务需求，但是违背了各司其责原则，让整个代码的可维护性变差；但是如果 js 只是控制添加 css 类名，而由 css 去控制页面样式，这样可以做到各司其职，整个页面的代码就显得简洁并且可维护性会更高；更好的解决办法就是用纯 css 来完成页面的切换，不涉及 js 交互，首先页面中有一个隐藏的选择框，把按钮用 label 代替，如果 label 的 for 属性值和选择框的 id 一样的话，那么点击 label 就相当于点击 input 选择框，结合伪类选择器来对 content 进行样式的修改。

2. 组件封装

（1）定义

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

（2）例子-电商网站轮播图

结构： HTML

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

表现：CSS

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

行为：API 控制流-使用自定义事件来解耦

总结

1. 组件设计的原则

结构设计
展现效果
行为设计( API-功能；Event-控制流 )

2. 实现组件的步骤

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

3. 三次重构

插件化
模板化
抽象化 (组件框架)

3. 过程抽象

所谓过程抽象其实是一种思维方式，也是一种编程方式，我们可以把函数当成一个控制器，控制这函数的输入和输出，它也是函数式编程思想的基础。 用来处理局部细节控制的一些方法；函数式编程思想的基础应用。

3.1 高阶函数

含义：接收函数作为参数或者返回函数的函数。首先是个函数且参数或返回值是函数

高阶函数除了上面once还有其他常用的：

节流 throttle code.h5jun.com/gale/1/edit…
防抖 Debounce code.h5jun.com/wik/edit?js…
把同步变成异步 Consumer code.h5jun.com/roka/7/edit… code.h5jun.com/bucu/3/edit…
迭代 Lterative code.h5jun.com/kapef/edit?…

3.2 纯函数

纯函数就是返回结果只依赖于它的参数目不会改变上下文环境，不会有任何副作用，一个项目如果纯函数很多的话，说明这个项目可维护性很高。

举例:

    // 纯函数
    function add(a,b){
        return a + b;
    };
    // 非纯函数
    let num = 6;
    function add1(){
      return  num++;
    }
    console.log(add(1,2));//3
    console.log(add1());//6
    console.log(add1());//7

4. 代码注意事项

风格
效率
约定
使用场景
设计

结尾

今天主要学习如何写好JavaScript代码，了解三大原则：各司其责、组件封装、过程抽象。

综上，今天又是好好学习的一天！😊

如何写好JavaScript代码 | 青训营笔记

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

前言

课堂重点🗒️🖋️