web前端组件开发之弹窗组件实现

widget 抽象类

首先抽象出弹窗组件的一些共有属性和方法。

widget抽象类中定义一个最外层容器，即整个弹窗，在widget构造函数中，添加一个属性：

this.boundingBox = null;  // 弹窗组件最外层容器

在widget抽象类中，提供4个接口，具体实现留给子类去实现。
4个接口具体功能如下：

    //接口，添加DOM节点renderUI: function() {},//接口，绑定事件bindUI: function() {},//接口，初始化组件属性,如拖动，换肤等属性syncUI: function() {},//接口，销毁前的处理函数，类似析构函数destructor: function() {},

并且为了方便调用renderUI ，bindUI ，syncUI 接口，还需要增加一个
渲染组件的方法render ，在render方法依次调用以上接口。
其中必须在bindUI 前面，定义自定义事件handlers对象，在bindUI方法之前，置为空。如果在构造函数中定义，当remove节点时，没有移除绑定的事件

//渲染整个组件方法
render: function(container) {this.renderUI();this.handlers = {};     //在这里定义handlers 对象this.bindUI();this.syncUI();
$(container || document.body).append(this.boundingBox);
}，

并且还需要一个销毁组件方法：

    //销毁组件方法destroy: function() {this.destructor();this.boundingBox.off();  //取消绑定在boundingBox上DOM层面的事件this.boundingBox.remove(); //移除组件最外层DOM节点},

组件级别，监听自定义事件，一个on方法，用来监听事件， fire方法，用来触发事件，什么时候触发。具体实现如下：

    //组件级别，自定义事件 监听事件on: function(type, handler) {if (typeof this.handlers[type] == 'undefined') {this.handlers[type] = [];}this.handlers[type].push(handler);return this; //链式调用},//何时出发自定义事件，当触发时，自动去遍历所有handler，利用观察者模式fire: function(type, data) {if (this.handlers[type] instanceof Array) {var handlersArr = this.handlers[type];for (var i=0; i<handlersArr.length; i++) {handlersArr[i](data);}}}

window子类

我们通过$.extend方法在window原型上，实现继承，原理：把子类实现后接口后的字典跟widget类字典混合，代码如下：

Window.prototype = $.extend({},new widget.Widget(), {//实现接口，添加DOM节点renderUI: function() {.....});

同时window类中，构造函数有一个 cfg的属性，定义窗口所有属性。

this.cfg = {width: 500,     //窗口宽默认500pxheight: 300,    //窗口高默认是300pxtitle: "系统消息",//窗口默认标题： 系统消息content: "",    ......}

bindUI 具体实现：监听事件，组件级别，和DOM级别事件监听
代码如下：

    bindUI: function() {var that = this;//绑定JQ中on方法，添加事件绑定this.boundingBox.on("click", ".window_alertBtn", function(){that.fire("alert");   //触发封装的自定义事件that.destroy();});......//组件级别自定义事件if (this.cfg.handler4AlertBtn) {this.on("alert", this.cfg.handler4AlertBtn);}......

此时 alert方法变得非常干净，清爽

alert: function(cfg) {$.extend(this.cfg, cfg, {winType: "alert"});this.render();return this; //实现连缀语法},

应用层 main.js 调用如下：

    $('#a').click(function(){var win = new w.Window();win.alert({title: "提示",content: "welcome!",width: 300,height: 150,y: 50,hasCloseBtn: true,text4AlertBtn: "OK",dragHandle: ".window_header",//skinClassName: "window_skin_a",handler4AlertBtn: function() {alert("你第一次点击了OK按钮");},handler4CloseBtn: function() {alert("你第一次点击了关闭按钮");}});win.on("alert", function() { alert("第二次点击了OK按钮!");});win.on("alert", function() { alert("第三次点击了OK按钮!");});win.on("close", function() { alert("第二次点击了关闭按钮!");});
});

至此，我们基本上，完成一个弹窗组件的实习思路

最后一个效果如下：