Loading元件的樣式模仿於NG-ZORRO元件庫，四個圓點順時針旋轉

封裝之後的用法如下，首先準備一個容器元素來接收Loading元件，這樣你可以隨意控制組件的位置

比如我要放到body裡

let loading = new Loadig(document.body, ['yellow', 'green', 'red', 'blue']);

第一個引數代表容器元素，第二個引數代表四個點的顏色，可傳可不傳，不傳採用預設值'blue' 'red' 'green' 'yellow'

顯示的話呼叫show方法

loading.show();

隱藏呼叫hide方法

loading.hide();

銷燬呼叫destroy方法

loading.destroy();

實現思路如下，Loading元件最好是寫成一個類，然後把顯示隱藏銷燬的方法掛載到類上

基於此，我們需要寫一個建構函式用來初始化物件，然後把show hide destroy等方法掛載到建構函式原型上

function Loading(e, colorList = ['blue', 'red', 'green', 'yellow']) {
            let span = document.createElement('span');
            span.style = 'display: inline-block;width: 38px;height: 38px;transform: rotate(0deg);visibility: hidden;';
            let i1 
 
= document.createElement('i'), 
                i2 = document.createElement('i'), 
                i3 = document.createElement('i'), 
                i4 = document.createElement('i');
            let style = 'display: block;float: left;width: 14px;height: 14px;border-radius: 100%;';
            i1.style 
 
= style + `background-color: ${colorList[0]};`;
            i2.style = style + `background-color: ${colorList[1]};margin-left: 10px;`;
            i3.style = style + `background-color: ${colorList[2]};margin-top: 10px;`;
            i4.style = style + `background-color: ${colorList[3]};margin-top: 10px;margin-left: 10px;`;
            span.appendChild(i1);
            span.appendChild(i2);
            span.appendChild(i3);
            span.appendChild(i4);
            e.appendChild(span);
            this.e = span;
            this.isShow = false;
        }

建構函式做的事情無非是建立一個span元素，裡面有四個i元素代表四個圓點，

設定好樣式，然後把建立的span元素插入容器元素，接著賦值給即將建立的物件的e屬性

同時設定一個isShow屬性用來控制是否顯示Loading元件

Loading.prototype.action = function() {
            let angle = 0;
            let f = (function() {
                this.e.style.transform = `rotate(${angle}deg)`;
                angle += 2;
                if (this.isShow) {
                    window.requestAnimationFrame(f);
                }
            }).bind(this);
            window.requestAnimationFrame(f);
        };

這個方法控制組件的旋轉動畫效果，我們採用更友好的requestAnimationFrame而非定時器來實現

注意this指向，讓它時刻指向自身

Loading.prototype.show = function() {
            this.isShow = true;
            this.e.style.visibility = 'visible';
            this.action();
        };

show方法設定元素顯示，把isShow設為true，然後呼叫action方法

Loading.prototype.hide = function() {
            this.isShow = false;
            this.e.style.visibility = 'hidden';
        };

hide方法設定元素隱藏，把isShow設為false

Loading.prototype.destroy = function() {
            this.e.parentNode.removeChild(this.e);
            this.e = null;
        };

destroy方法銷燬元件，首先在dom中移除Loading元件元素，然後把自身屬性e設為null

// 完整的呼叫程式碼：
        // 建立並初始化Loading元件
        let loading = new Loading(容器元素, 顏色列表<Array>);
        // 顯示Loading
        loading.show();
        // 隱藏Loading
        loading.hide();
        // 銷燬Loading
        loading.destroy();
        // 也可以建立多個Loading元件用在頁面的不同位置，它們都是互相獨立的
        let o1 = new Loading(document.body);
        let o2 = new Loading(document.body, ['red', 'blue', 'red', 'blue']);
        let o3 = new Loading(document.getElementById('root'), ['blue', 'yellow', 'black', 'red']);

感興趣的話可以擴充套件更多功能

比如新增一個方法控制轉動的速度，控制順時針還是逆時針，控制靜止還是轉動

還可以接受一個顏色值，然後按照一定規則自動計算出其他的三個顏色

還可以接受一個元素，來頂替本來的四個圓點，這樣可以讓呼叫者隨意控制Loading主體的內容

……