深入JS | 青训营笔记这是我参加⌈第四届青训营⌋笔记创作活动的第2天。今天侧重从如何写好JS的原则谈起写好JS的

这是我参加⌈第四届青训营⌋笔记创作活动的第2天。

今天侧重从如何写好JS的原则谈起

写好JS的原则分如下三点：

一、各司其职

让HTML、CSS和JavaScript职能发分离。

写一段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 = '🌞';
    }

版本二：

触发事件欲将样式改变时，我们通过改变元素的class属性值达到切换样式的效果

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

版本三：

还可以全权交给HTML和CSS处理样式的改变，从各司其职的角度，这个方法最为推荐，也好维护修改

  <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>

 #modeCheckBox {
    display: none;
  }

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

结论：

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

二、组件封装

好的UI组件具备正确性、扩展性、复用性。

用原生JS写一个电商网站的轮播图

结构：

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

表现：

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

轮播图切换的状态使用修饰符（modifier）

轮播图的切换动画使用 CSS transition

行为：控制流

使用自定义事件解耦。

组件封装

总结基本方法

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

API（功能）

Event（控制流）

重构：插件化

解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

解耦

将HTML模板化，更易于扩展

抽象

将组件通过模型抽象出来

总结：

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

三、过程抽象

应用函数式编程思想

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

操作次数限制

一些异步交互
一次性的HTTP请求

高阶函数

Once

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

HOF

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

常用高阶函数

HOF

编程范式

命令式与声明式

命令式编程

告诉编辑器如何做

let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }
复制代码

声明式编程

告诉编辑器做什么。如何做的部分被封装到高阶函数（如map等）

 let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);
复制代码

声明式编程可以写出更简洁、更有表现力的代码。代码越少，bug出现的机率越小。

总结

过程抽象 / HOF / 装饰器
命令式 / 声明式

深入JS | 青训营笔记