使用方法：
1.加入YUI.Ext 庫(kù)到你的web程序： 

<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file -->
<script type="text/javascript" src="deepcms/yui/utilities_2.1.0.js"></script><script type="text/javascript" src="deepcms/yui-ext.0.33-rc1/yui-ext.js"></script>
2.加入樣式表 CSS Style 。如果你是一個(gè)美工，最多打交道的地方，可能就是這幾個(gè)文件：
<!--YahooUI! Ext --> 
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/reset-min.css" /> 
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/resizable.css" />
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/tabs.css" /> 
<link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/basic-dialog.css" /> 

3.加入一個(gè)holder.holder的意思是一個(gè)載體，JS處理好數(shù)據(jù)，轉(zhuǎn)變成內(nèi)容（Contents，文字、圖片、表格等）放在這里,也可以理解為一個(gè)架子，承托所有內(nèi)容。holder表現(xiàn)形式很簡(jiǎn)單，通常是幾行div。 

<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">    
 <div class="ydlg-hd">中易旅游網(wǎng)</div>    
 <div class="ydlg-bd"> 您沒(méi)確認(rèn)條款內(nèi)容。</div>     
</div>
4.加入定義Dialog腳本，實(shí)例化Dialog：

// create the HelloWorld application (single instance)
var HelloWorld = function(){
    // everything in this space is private and only accessible in the HelloWorld block
    //任何在這個(gè)區(qū)域的都是私有變量 ，只能在HelloWorld訪問(wèn)
    var dialog, showBtn;

    var toggleTheme = function(){
        getEl(document.body, true).toggleClass('ytheme-gray');
    };
    // return a public interface
    return {
        init : function(){
             showBtn = getEl('goNextBtn'); //綁定一個(gè)按鈕
             // attach to click event 加入事件
             /showBtn.on('click', this.showDialog, this, true);

             ///getEl('theme-btn').on('click', toggleTheme);
        },

        showDialog : function(){
            if(!dialog){ //因?yàn)椴捎脝卫Ｊ?，不能被new重復(fù)實(shí)例。這里是用懶惰的方法作判斷。 
                dialog = new YAHOO.ext.BasicDialog("hello-dlg", { 
                        modal:true,//這段代碼是dialog的一些參數(shù)，如大小、有冇陰影、是否覆蓋select等
                        autoTabs:false,
                        width:180,
                        height:100,
                        shadow:true,
                        minWidth:508,
      shim: true,
      autoScroll: false,
      resizable:false,
                        minHeight:300
                });
                dialog.addKeyListener(27, dialog.hide, dialog);//鍵盤事件Esc退出
                dialog.addButton('退出', dialog.hide, dialog);
                         }
            dialog.show(showBtn.dom);//參數(shù)為動(dòng)畫效果出現(xiàn)的地方
        }
    };
}();//注意這對(duì)括號(hào)，如果沒(méi)有將不會(huì)執(zhí)行。
//用onDocumentReady代替windows.onload初始化程序。當(dāng)DOM準(zhǔn)備好，無(wú)須等待載入圖片和其他資源；有關(guān)兩者的討論，請(qǐng)看這里
YAHOO.ext.EventManager.onDiocumentReady(HelloWorld.init, HelloWorld, true);
難點(diǎn)分析： Singleton Pattern 設(shè)計(jì)模式之單例 

什么是 Singleton Pattern？

Anwser: 單例模式（Singleton Pattern）是一種非?；竞椭匾膭?chuàng)建型模式。 “單例”的職責(zé)是保證一個(gè)類有且只有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。 在程序設(shè)計(jì)過(guò)程中，有很多情況下需要確保一個(gè)類只能有一個(gè)實(shí)例。 

單例模式有什么好處？ 

Anwser: 1.減少new操作帶來(lái)的內(nèi)存占用；2.在JS中，可以建立你自己的命名空間namespace. 

如何實(shí)現(xiàn)單例模式？

Anwser:

傳統(tǒng)的編程語(yǔ)言中為了使一個(gè)類只有一個(gè)實(shí)例，最容易的方法是在類中嵌入靜態(tài)變量，并在第一個(gè)實(shí)例中設(shè)置該變量，而且每次進(jìn)入構(gòu)造函數(shù)都要做檢查，不管類有多少個(gè)實(shí)例，靜態(tài)變量只能有一個(gè)實(shí)例。為了防止類被多次初始化，要把構(gòu)造函數(shù)聲明為私有的，這樣只能在靜態(tài)方法里創(chuàng)建一個(gè)實(shí)例。 請(qǐng)看下面的例子： 


第二個(gè)和第三個(gè)是random出來(lái)的?？傊袃山M結(jié)果是一樣的?？梢钥闯鯯ingleton的模式下，對(duì)象實(shí)例化一次后，其屬性或變量不會(huì)變化(哪怕是new的操作)，除非你人為地修改。 上面的例子通過(guò)調(diào)用Constructor靜態(tài)屬性來(lái)獲得對(duì)象確實(shí)可以保證“唯一實(shí)例”，然而，這個(gè)例子的失敗之處在于它并沒(méi)有有效地禁止Singleton對(duì)象的構(gòu)造，因此如果我們?cè)诔绦虼a中人工加入new Singleton ()，仍然可以獲得到多個(gè)對(duì)象而導(dǎo)致模式失敗。因此要完全實(shí)現(xiàn)Singleton并沒(méi)有想象中那么簡(jiǎn)單。 于是我們進(jìn)一步思考，得到了下面第三種方法，這種方法巧妙利用了“匿名”函數(shù)的特征來(lái)禁止對(duì)SingletonObject類構(gòu)造函數(shù)的訪問(wèn)，可以說(shuō)比較好的模擬了私有構(gòu)造函數(shù)的特性，從而比較完美地解決了用javascript實(shí)現(xiàn)Singleton Pattern的問(wèn)題。

最新評(píng)論