关于dialog的初始化方式

对话框dialog有如下两种初始化方式：

第一种：在页面加载完成时进行初始化：

HTML代码：

<div id="windowdv">
    <!-- your dialog content html code -->
</div>

JS代码:

$(function(){
    $("#windowdv").dialog({
        //dialog具体参数代码
    });
});
//打开窗口方法
function showWindow(){
    $("#windowdv").dialog("open");
    //打开窗口后执行的代码
}

这个方法的优点：1.窗口div只初始化一次，以后每次打开时不需再初始化；

缺点：1.初始化代码在页面加载完成后执行，这是没必要的，因为用户不一定想立刻看到窗口，应该在点击打开窗口按钮的时候进行初始化；

　　   2.当页面中窗口比较多，或者窗口中的HTML代码比较复杂时，页面加载完成后，大量的JS操作使得页面卡住不动，用户体验差；

　　　3.窗口中可能会有一些组件要进行初始化获取数据，如combobox、combotree等等，如果这些初始化代码也放在$(function()){}中，那用户体验更不堪设想；

为了解决以上问题，我想到了以下这种初始化方式：没错，就是点击打开窗口按钮时进行初始化：

HTML代码稍有不同：

<div id="windowdv" style="display:none;">
    <!-- your dialog content html code -->
</div>

display:none是必需的

JS代码：

//打开窗口方法
function showWindow(){
    var $windowdv = $("#windowdv");//缓存jQuery对象
    try{
        $windowdv.dialog("open");
    }catch(ex){
        $windowdv.show().dialog({
            //dialog具体参数代码
            closed : false
        });
        //窗口中组件的初始化代码
    }
}

这样，catch里面的代码只执行一次，就是在第一次点击打开窗口按钮时执行(open方法抛出异常)，同时初始化窗口中的组件，以后点击时就直接打开窗口。使用这种按需初始化方式，无论页面中有多少个窗口，也不会影响页面的加载效果，用户体验更好，按需加载始终是最佳选择。