手把手教你做小插件

Author Avatar
linXiao 1月 17, 2018
  • 在其它设备中阅读本文章

javascript面向对象编程一直都是初学者的难点,都看过很多文章,却没有动手写过,还是理解不深刻,今天我看文章的时候手写了一个及小的插件,正好练练手。

详细的js面向对象编程可以看阮一峰老师的文章 阮一峰-面向对象编程

我正好在看文章时,动手写了一个loading的插件,也可以用在项目中去。分享出来。 github链接

loading效果是这样的:

效果

直接看代码吧,执行特别简单:

var loading = new Loading();

loading.init('container').start(['#5fc6b3', '#d3be87', '#e86c73']);

setTimeout(function () {
    // some ajax
       loading.end()
}, 5000)

只需要事先准备好一个容器

<div id="container"></div>

只有三个api


init() // 参数为容器的id (必须)

start() // 参数为由颜色组成的数组 (非必须)

end() // 无参数

直接看源码吧, 简单得令人发指:

/**
 * @Author zlx
 * @Date 2018/1/17 上午10:42
 */

var Loading = function () {
    this.color = ['#5fc6b3', '#5fc6b3', '#5fc6b3']; // default colors
    this.init = function (id) {
        var container = document.getElementById(id);
        this.container = container;
        return this;
    };

    this.start = function (color) {
        if (!color) {
            color = this.color;
        }
        for (var i = 0; i < 3; i++) {
            var dot = document.createElement('div');
            dot.style.backgroundColor = color[i];
            dot.setAttribute('class', 'dot'+(i+1));
            this.container.appendChild(dot);
        }
        return this;
    };

    this.end = function () {
        var parent = this.container.parentNode;
        if(parent){
            parent.removeChild(this.container);
        }
    }
}

逐一分析:

  • 创建一个叫Loading的构造函数。
  • this.color = ['#5fc6b3', '#5fc6b3', '#5fc6b3']; // default colors 给三个小圆点定义三个默认颜色。

  • 
    

    this.init = function (id) {

      var container = document.getElementById(id);
      this.container = container;
      return this;
    

    };
    根据传进来的id来获取到dom元素。并将该dom元素对象赋值给this.container,方便以后使用。最后return this,这里为了方便api实现链式调用,所以return了this。实现了如loading.init(‘container’).start().end();`这样的链式调用,这种写法在jquery中很常见。

  • start方法。
this.start = function (color) {
        if (!color) {
            color = this.color;
        }
        for (var i = 0; i < 3; i++) {
            var dot = document.createElement('div');
            dot.style.backgroundColor = color[i];
            dot.setAttribute('class', 'dot'+(i+1));
            this.container.appendChild(dot);
        }
        return this;
    };

这里处理shart’方法传进来的color,是一个数组,如果没有传入,则为我们默认的colors。循环创建3个div,并赋上相应的属性,再添加到container中。

  • 
    

    this.end = function () {

      var parent = this.container.parentNode;
      if(parent){
          parent.removeChild(this.container);
      }
    

    }
    `

最后也很简单,移除这个container。

详细代码见github

这个例子很小,希望对你有帮助。