學習YUI.Ext 第四天--對話框Dialog的使用

更新時間：2007年03月10日 00:00:00 作者：

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


<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 。如果你是一個美工，最多打交道的地方，可能就是這幾個文件：

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

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

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

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

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

        showDialog : function(){
            if(!dialog){ //因為采用單例模式，不能被new重復實例。這里是用懶惰的方法作判斷。
                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ù)為動畫效果出現(xiàn)的地方
        }
    };
}();//注意這對括號，如果沒有將不會執(zhí)行。
//用onDocumentReady代替windows.onload初始化程序。當DOM準備好，無須等待載入圖片和其他資源；有關兩者的討論，請看這里
YAHOO.ext.EventManager.onDiocumentReady(HelloWorld.init, HelloWorld, true);
難點分析： Singleton Pattern 設計模式之單例

什么是 Singleton Pattern？

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

單例模式有什么好處？

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

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

Anwser:

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

復制代碼代碼如下:

function __typeof__(objClass) //返回自定義類的名稱  
{   
    if ( objClass != undefined && objClass.constructor )   
    {   
        var strFun = objClass.constructor.toString();   
        var className = strFun.substr(0, strFun.indexOf('('));   
        className = className.replace('function', '');   
        return className.replace(/(^\s*)|(\s*$)/ig, '');   
    }   
    return typeof(objClass);   
}  
function Singleton()  
{  
    // template code for singleton class.靜態(tài)屬性判斷是否重復生產new對象  
    if ( this.constructor.instance )  
    {  
         return this.constructor.instance;  
    }   
        else{ alert("else");this.constructor.instance = this;  
    }  

    this.value = parseInt(Math.random()*1000000);  
    this.toString = function(){ return '[class Singleton]'; }  
}  

Singleton.prototype.GetValue = function(){return this.value; };  
Singleton.prototype.SetValue = function(value){ this.value = value; };        

    var singleton = new Singleton();  
    alert(__typeof__(singleton));  
    alert(singleton.GetValue());  
    alert(singleton.GetValue());   
    singleton.SetValue(1000000);  
    var singleton = new Singleton();  
    alert(singleton.GetValue());  
    alert(singleton.GetValue()); 

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

復制代碼代碼如下:

(function(){  
 //instance declared  
 //SingletonFactory Interface  
 SingletonFactory = {getInstance : getInstance}  

 //private classes  
 function SingletonObject(){  
     SingletonObject.prototype.methodA = function() {alert('methodA');}  
     SingletonObject.prototype.methodB = function() { alert('methodB'); }  
     SingletonObject.instance = this;  
 }  

 //SingletonFactory implementions  
 function getInstance(){  
     if(SingletonObject.instance == null) return new SingletonObject();   
     else return SingletonObject.instance;  
 }  
})();  

var instA = null;  
try  
{  
    alert("試圖通過new SingletonObject()構造實例！");  
    instA = new SingletonObject();  
}  
catch(e){alert("SingletonObject構造函數(shù)不能從外部訪問，系統(tǒng)拋出了異常！");}  

instA = SingletonFactory.getInstance(); //通過Factory上定義的靜態(tài)方法獲得  
var instB = SingletonFactory.getInstance();  
instA.methodA();  
instB.methodA();  

alert(instA == instB); //成功 