javascript面向对象编程一直都是初学者的难点,都看过很多文章,却没有动手写过,还是理解不深刻,今天我看文章的时候手写了一个及小的插件,正好练练手。
详细的js面向对象编程可以看阮一峰老师的文章 阮一峰-面向对象编程
我正好在看文章时,动手写了一个loading的插件,也可以用在项目中去。分享出来。 github链接
loading效果是这样的:
直接看代码吧,执行特别简单:
只需要事先准备好一个容器
只有三个api
直接看源码吧, 简单得令人发指:
逐一分析:
- 创建一个叫Loading的构造函数。
this.color = ['#5fc6b3', '#5fc6b3', '#5fc6b3']; // default colors
给三个小圆点定义三个默认颜色。this.init = function (id) {
};
根据传进来的id来获取到dom元素。并将该dom元素对象赋值给this.container,方便以后使用。最后return this,这里为了方便api实现链式调用,所以return了this。实现了如
loading.init(‘container’).start().end();`
这样的链式调用,这种写法在jquery中很常见。
start
方法。
这里处理shart’方法传进来的color,是一个数组,如果没有传入,则为我们默认的colors。循环创建3个div,并赋上相应的属性,再添加到container中。
this.end = function () {
}
`
最后也很简单,移除这个container。
¨NBSP;详细代码见github
这个例子很小,希望对你有帮助。