[easyui]封装一个dialog

我觉得以后做项目，还是首先把组件都自己封装一遍好了，这样以后想改起来也方便，哈哈。

先上效果图

我自己看别人博客写东西总是喜欢看最终效果图，觉得感兴趣就会继续看。

哈哈，现在不方便提供图。。看下面代码怎么使用好了。

html

我会将所有dialog一开始都放在一个隐藏的div里，这样即使它还没初始化在页面也是不可见的，经过EasyUI初始化之后，会自动跑到body下面。

<div style="display:none">    <div id="dlg-a"></div>    <div id="dlg-b"></div>    ...</div>

js

首先一定要注意的就是代码一定要写在onload事件里，或者 $(function)

// 我个人习惯先声明这样一个变量，用来存放所有的dialogvar dialogs = {};// hm是项目名，dialog这个函数下文开始细说// 第一个参数选择器，第二个参数是dialog的option// 这样就定义好了这个dialog，此时它还没有初始化，只是定义dialogs.a = new hm.dialog('#dlg-a',{title:'a'});// 会在首次使用的时候才去初始化（单例模式）// 这里有个回调函数，返回值跟messager.confirm一样// 这样设计我觉得还挺方便使用的，比如添加和编辑，使用同一个dialog，但是操作却是不同的。dialogs.a.open(function(result){});

开始分析封装

新建一个dialog.js文件

// 国际惯例，自执行函数(function(){            function dialog(selector,options) {}    // 这里重写dialog的默认属性或者添加一些属性    dialog.options = {};    // 重写or添加 事件    dialog.events = {};    // 重写or添加 方法    dialog.methods = {};    // hm是项目名，所以我的一些组件都是封装在这个位置    window.hm.dialog = dialog;})();

参数

dialog.options = {    // 既然是一个dialog，我觉得肯定是需要两个按钮的，一个确定，一个取消。    buttons:[{ text:'确定' },{ text:'取消' }],    // 我个人喜欢设置为模态式的窗口，即打开的时候是无法操作其他区域的。    modal:true,    // 当然，一开始这个dialog也是要隐藏的    closed:true};

事件

暂无

方法

暂无

单例模式实现

function dialog(selector,options) {    var instance = null;    function init(){        if(null === instance) {            instance = $(selector).dialog($.extend({},dialog.options,options));        }    }    return {        invoke : function(method, params) {            init();            var result;            // 现看有没有重写过该方法，有则执行            if(dialog.methods[method]){                result = dialog.methods[method](params);            } else{                result = instance.dialog(method, params);            }            // 如果方法的返回值为实例，则返回this，实现链式调用            if(result === instance) { return this; }            return result;        },        open : function(callback) {            init();            if(callback) { _callback = callback; }            this.invoke('open');        }    }}

回调函数的实现

首先声明一个回调

// 使用下划线，避免重名var _callback = null;

然后就是给按钮的handler实现，这里就有个问题了，按钮是定义在dialog.options里面，这个是在dialog函数外面的，这样就无法取到instance的引用了
于是我在init()里面更改了代码

function init(){    if(null === instance) {        // 这里不允许添加button了        if(options.buttons){ delete options.buttons; }        options = $.extend({},dialog.options,options);        // 手动更改确定和取消按钮的操作        options.buttons[0].handler = function() { handler(true); };        options.buttons[0].handler = function() { handler(false); };        instance = $(selector).dialog(options));    }}function handler(result) {    // 执行callback,如果没有返回false，则关闭窗口    if(_callback){        if(false !== _callback(result)) {            instance.dialog('close');        }    }}

这里又要提一点了，我觉得回调应该是一次性的，执行完就应该清除这个回调，然后，清除的代码写哪里呢，一开始觉得就放在function handler(result){} 里就好啊，但后来又想，这样如果用户点击按钮后确实可以清除回调，但如果用户点击的是右上角的叉叉来关闭呢，所以干脆写在onClose事件里好了。

然后问题又来了，怎么得到引用，，只能又写在init()里面了

options.onClose = function() { _callback = null; };

这样写也有问题啊，如果我某个dialog定义了这个事件怎么办，不是被覆盖了？
又要改代码，真是太蛋疼了。

function init() {    if(null === instance) {        // copy一份默认值        var defaults = $.extend({}, dialog.options);        // 在默认值上修改        defaults.buttons[0].handler = function() { handler(true); };        defaults.buttons[1].handler = function() { handler(false); };        defaults.onClose = function() {            _callback = null;            // 如果定义了，就执行（好像需要用到call，我没测试）            if(options.onClose){ options.onClose() }；        };        // 这里不允许添加button了        if(options.buttons){ delete options.buttons; }        instance = $(selector).dialog($.extend({},defaults,options));    }}

我感觉写到这里就差不多了，最后把代码完整发一遍好了

dialog.js

// 国际惯例，自执行函数(function(){            function dialog(selector,options) {        var             instance = null,            // 使用下划线，避免重名            _callback = null        ;        function init() {            if(null === instance) {                // copy一份默认值                var defaults = $.extend({}, dialog.options);                // 在默认值上修改                defaults.buttons[0].handler = function() { handler(true); };                defaults.buttons[1].handler = function() { handler(false); };                defaults.onClose = function() {                    _callback = null;                    // 如果定义了，就执行（好像需要用到call，我没测试）                    if(options.onClose){ options.onClose() }；                };                // 这里不允许添加button了                if(options.buttons){ delete options.buttons; }                instance = $(selector).dialog($.extend({},defaults,options));            }        }        function handler(result) {            // 执行callback,如果没有返回false，则关闭窗口            if(_callback){                if(false !== _callback(result)) {                    instance.dialog('close');                }            }        }        return {            invoke : function(method, params) {                init();                var result;                // 现看有没有重写过该方法，有则执行                if(dialog.methods[method]){                    result = dialog.methods[method](params);                } else{                    result = instance.dialog(method, params);                }                // 如果方法的返回值为实例，则返回this，实现链式调用                if(result === instance) { return this; }                return result;            },            open : function(callback) {                init();                if(callback) { _callback = callback; }                this.invoke('open');            }        }    }    // 这里重写dialog的默认属性或者添加一些属性    dialog.options = {        // 既然是一个dialog，我觉得肯定是需要两个按钮的，一个确定，一个取消。        buttons:[{ text:'确定'},{ text:'取消'}],        // 我个人喜欢设置为模态式的窗口，即打开的时候是无法操作其他区域的。        modal:true,        // 当然，一开始这个dialog也是要隐藏的        closed:true    };    // 重写or添加 事件    dialog.events = {        onClose: undefined    };    // 重写or添加 方法    dialog.methods = {};    // hm是项目名，所以我的一些组件都是封装在这个位置    window.hm.dialog = dialog;})();

备注

这篇博客全是手打的，因为我今天得空，但是源代码不在手边，就纯靠手打了，如有意外请指出。

写完才觉得我这样设计的也不怎么样，就比如互相引用不好解决。