用js面向对象思想封装插件

Posted CSS is awesome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用js面向对象思想封装插件相关的知识,希望对你有一定的参考价值。

js是基于原型的面向对象语言,如果你学过java,c#等正统面向对象语言,你会难以理解js的面向对象,他和普通的面向对象不太一样,今天,我们通过封装一个toast插件,来看看js面向对象是如何运行的。

html

<div id="toast"></div>

css

* {
    margin: 0;
    padding: 0;
}

#toast {
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    z-index: 99999;
    margin: 0 auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 50%;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: #000;
}

使用方法

var toast = new Toast("toast", "你好,对话框");
toast.show();

js核心代码

 1 (function() {
 2     /***
 3      * 信息提示组件Toast v1.0
 4      * @param {Object} container 内容容器(必填)
 5      * @param {Object} content 文字内容(可选)
 6      * @param {Object} duration 显示时长(可选)
 7      * 使用方法
 8      * var toast = new Toast("toast", "你好,对话框");
 9      * toast.show();(支持回调函数)
10      */
11     function Toast(container, content, duration) {
12         this.container = document.getElementById(container);
13         this.content = content || "这是一段对话";
14         this.duration = duration || 2000;
15     }
16 
17     Toast.prototype.show = function(callback) {
18         this.callback = callback || function() {};
19         this.container.style.opacity = 1;
20         this.container.style.display = "block";
21         this.container.innerHTML = this.content;
22 
23         setTimeout(function() {
24             this.callback && this.callback();
25             this.hide();
26         }.bind(this), this.duration);
27 
28         return this;
29     }
30 
31     Toast.prototype.hide = function(callback) {
32         this.callback = callback || function() {};
33 
34         this.container.style.display = "none";
35         this.callback && this.callback();
36         return this;
37     }
38 
39     window.Toast = Toast;
40 
41 })(window);

Toas函数是一个构造函数,相当于面向对象语言中的类(class),并且有形参,函数内部代码相当于给成员变量赋值。通常在这里初始化成员变量,这就好理解了。接下里的show,hide方法都是在Toast上的原型上添加共有的方法,对应的是修饰词为public的一个成员方法。函数最后都会返回this(当前函数执行的上下文),是为了可以进行链式调用。这些方法都支持回调函数,当函数执行完毕后会执行传入的回调函数,这在编写插件的时候通常都会用到,比如说ajax请求完成后,你得到返回的数据,并且需要后续操作,这时就要用回调函数。因为代码都放在闭包环境下,外界访问不了里面的变量和方法,所以把Toast强行暴露出去,就可以在window访问到。

以上是关于用js面向对象思想封装插件的主要内容,如果未能解决你的问题,请参考以下文章

原生JS面向对象思想封装轮播图组件

拖拽系列利用JS面向对象OOP思想实现拖拽封装

JS高级---复习

面向对象

原生js怎么封装插件

JS面向对象编程