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面向对象思想封装插件
原文地址：http://www.cnblogs.com/zt123123/p/7644974.html