關於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方法拋出異常)，同時初始化窗口中的組件，以后點擊時就直接打開窗口。使用這種按需初始化方式，無論頁面中有多少個窗口，也不會影響頁面的加載效果，用戶體驗更好，按需加載始終是最佳選擇。