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

如何写好JavaScript

本节课重点讲述了JavaScript的编码三大原则：各司其职、组件封装、过程抽象及各自应用

职能分离

以切换白天和夜间的浏览状态为例：
版本一：

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

通过CSS的控件来操作，缺点：用JS来写CSS的内容

版本二：

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

简化JS的代码，在CSS中写具体的颜色变换

版本三：

//html
<input id="modeCheckBox" type="checkbox">
          <div class="content">
            <header>
              <label id="modeBtn" for="modeCheckBox"></label>
              //这个切换可以切换复选框的状态
              <h1>深夜食堂</h1>
            </header>

//css
  #modeCheckBox {
            display: none;
          }

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

版本三实现了零JS方案，只用HTML和CSS

分离的原则

让HTML,CSS和JavaScript职能分离，让HTML负责结构，CSS负责展现，JS负责行为。
应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案

组件封装

组件：Web页面上抽象出来的一个个包含模板（HTML）,功能（JS）和样式（CSS）的单元，好的UI组件具备正确性，扩展性和复用性。

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

结构设计
展先效果

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

行为设计

getSelectltem()获取当前元素
getSelectedltemIndex()获取当前元素索引
slideTo()滑到某一张
slideNext()滑到下一张
slidePrevious()滑倒上一张

这个例子存在的问题：JS的部分不够灵活

三次重构

插件化

解耦

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

模板化
抽象化

过程抽象

用来处理局部细节控制的一些方法，应用了函数式编程思想。简单来说把函数本身function看成一个封装好的过程，关注它的输入和输出的结果。
以Once函数为例

    function once(fn) {
            return function(...args) {
              if(fn) {
                const ret = fn.apply(this, args);
                fn = null;
                return ret;
              }
            }
          }

函数的参数是一个函数fn，执行的时候会返回一个函数出去，在返回函数中间进行判断fn是否存在，如果存在用实际参数执行fn,然后将fn=null,这样下次就不会执行该函数。

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象，在JS中可以用高阶函数来实现过程抽象。
高阶函数：以函数作为参数，以函数作为返回值。HOF是默认的等价高阶函数，一般的高级函数是在HOF的基础上改变一些参数。
常用的高阶函数有：Once,Throttle(节流函数),Debounce（防抖函数）,Consumer/2,Iterative
14：42

思考总结

JS的课程讲了很多优化代码的思路，让我了解了很多的优化方法，也让我知道在之后的前端工程中一些基本的优化原则。

JavaScript|青训营笔记

如何写好JavaScript

职能分离

组件封装

过程抽象

思考总结