前端之JavaScript编码原则 | 青训营笔记

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

本堂课重点内容：

JavaScript 好代码的标准

HTML/CSS/JS 各司其责
组件的定义解析及特征
组件封装基本方法
过程抽象概念
高阶函数使用模式
JavaScript 编程范式

什么才是好的JS代码

应该要遵循的是以下三个原则：

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

一、各司其职

HTML 负责页面结构， CSS 负责页面样式，JS 负责交互行为。

示例——控制一个页面深色和浅色两种浏览模式

第一种

 
 <!-- Html代码（部分） -->
 <div>
 <button id="change">🌞</button>
 <h1>深夜食堂</h1>
 </div>
 <div>
 <div class="pic">
   <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
 </div>
 <div class="description">
   <p>
       这是一间营业时间从午夜十二点到早上七点的特殊食堂......
   </p>
 </div>
 </div>

 /* CSS代码（部分） */
 ......
 div.pic img {
   width: 100%;
 }
 #change {
   font-size: 2rem;
   float: right;
   border: none;
   background: transparent;
 }

 // JS代码（部分）
 const btn = document.querySelector('#change');
 btn.addEventListener('click', (e) => {
   const body = document.body;
   if(e.target.innerHTML === '🌞') {
     body.style.color = 'white';
     body.style.backgroundColor = 'black';
     e.target.innerHTML = '🌜';
   } else {
     body.style.backgroundColor = 'white';
     body.style.color = 'black';
     e.target.innerHTML = '🌞';
   }
 });

第二种

 /* CSS代码（部分） */
 ......
 body.night {
   background-color: black;
   color: white;
   transition: all 1s;
 }
 
 #change::after {
   content: '🌞';
 }
 body.night #change::after {
   content: '🌜';
 }

 // JS代码
 const btn = document.querySelector('#change');
 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 属性为空。

从这个示例代码的展示，在各司其职角度讲可以看出第二种效果是更好的。因此我们在日后的编码中尽量满足：

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

二、组件封装

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

基本方法：

展示效果
结构设计
行为设计
- API
- Event

实现组件的步骤：

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

三次重构：

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

三、过程抽象

过程抽象是一种思维方式，也是一种编程方式。我们可以把函数当成一个控制器，控制这函数的输入和输出，它也是函数式编程思想的基础。

用来处理局部细节控制的—些方法

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

高阶函数

接收函数作为参数或者返回函数的函数

以函数作为参数
以函数作为返回值
常用于作为函数装饰器

常用的高阶函数有：

Array.prototype.map

Array.prototype.filter

Array.prototype.reduce

纯函数

简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，就把这个函数叫做纯函数

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