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

window子类

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

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

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

this.cfg = {
            width: 500,     //窗口宽默认500px
            height: 300,    //窗口高默认是300px
            title: "系统消息",//窗口默认标题： 系统消息
            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("第二次点击了关闭按钮!");});
});

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

最后一个效果如下：