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();