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

前言

JavaScript是前端程序员写好Web页面的基础，如何在有着良好JS基础的前提下优化代码，使得JS代码的可读性和可维护性更强是我们以后想成为优秀的前端工程师的必经之路。前端的基础准则是HTML负责页面结构，CSS负责页面样式，JS负责页面行为，他们各司其职，才能达到代码优化的效果。

实例——代码的优化

控制浏览器的浅色模式和深色模式的切换

HTML页面布局

  <div class="content">
    <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>
  </div>

相应CSS样式

body {
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
div.pic {
  width: 100%;
}
img {
  width: 100%;
}
#modeBtn {
  font-size: 2em;
  float: right;
  border: none;
  background: transparent;
}

JS行为（操作DOM，直接用JS修改CSS样式）

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会采用的一种写法，很直接地拿到页面的DOM节点，通过鼠标操作获取目标并触发事件，但是随着网页功能复杂度的增加，直接操作DOM以及用原生JS操作CSS样式也会带来不小的麻烦。因此在此基础上将变化直接在CSS中通过class进行修改。

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    //修改body的class，使页面变成黑色
    if(body.className !== 'night') {
      body.className = 'night';
    } else {
      body.className = '';
    }
  });

通过给CSS设置class能够控制想要的页面样式变化，从而精简JS代码。在某些情况下，单独使用CSS也能达到很好的显示效果。

从以上例子中可以看出HTML、CSS、JavaScript各司其职的重要性，避免因不必要的操作直接修改JS代码，给代码的后期维护带来不便。

组件的封装

定义函数的时候，做好封装函数，尽量不要让一个函数直接处理一个外部的变量，最好把这个变量变成一个参数，传递给函数。例如常用的组件：电商类平台的轮播图，由于使用场景较多，复用性强，可扩展性高，将其封装为组件有利于后期修改和使用。封装函数的时候要做好数据抽象与过程抽象。

数据抽象：把用到的一些数据进行分离出来，在函数外部定义一个对象数组，将其传入函数中使用，将数据解耦出来，提高函数的可复用性
过程抽象：用来处理局部细节控制的一些方法，将一些操作抽象出来成一个单独的函数，也就是将操作行为从函数中解耦出来，需要的地方进行引入。

高阶函数与纯函数

一个函数可以接收另一个函数作为参数，则称为高阶函数，函数可以作为参数传入或者函数可以作为返回值输出。 JS数组中常用的高阶函数API有：every、map、filter、forEach、reduce、sort；常用的高阶函数有：Once、Throttle、Debounce、Consumer、Iterative。

纯函数不依赖外部环境，也不改变外部环境，不管调用几次，不管什么时候调用，只要参数确定，返回值就确定，不会产生副作用。在进行单元测试的时候，如果是一个纯函数的话，可以不需要上下文环境直接进行测试，而如果是非纯函数，还要构建好它的上下文环境。

总结

不仅可以对数据进行抽象，也可以对过程进行抽象
使用高阶函数，利于复用，并且不修改原有函数代码
代码书写时尽量多使用纯函数
JS可以编写命令式代码，也可以编写声明式代码，其中声明式代码抽象程度更高，可拓展性更强。
代码优化善于运用组件封装，便于后期维护

如何写好JavaScript | 青训营笔记

前言

实例——代码的优化

组件的封装

高阶函数与纯函数

总结