封装Loading组件

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主体的内容

 ……