Heim  >  Artikel  >  Web-Frontend  >  学习YUI.Ext 第四天--对话框Dialog的使用_YUI.Ext相关

学习YUI.Ext 第四天--对话框Dialog的使用_YUI.Ext相关

WBOY
WBOYOriginal
2016-05-16 19:17:081221Durchsuche

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


<script></script><script></script>
2.加入样式表 CSS Style 。如果你是一个美工,最多打交道的地方,可能就是这几个文件:
 
 

 
 

3.加入一个holder.holder的意思是一个载体,JS处理好数据,转变成内容(Contents,文字、图片、表格等)放在这里,也可以理解为一个架子,承托所有内容。holder表现形式很简单,通常是几行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
    //任何在这个区域的都是私有变量 ,只能在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的一些参数,如大小、有冇阴影、是否覆盖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);//参数为动画效果出现的地方
        }
    };
}();//注意这对括号,如果没有将不会执行。
//用onDocumentReady代替windows.onload初始化程序。当DOM准备好,无须等待载入图片和其他资源;有关两者的讨论,请看这里
YAHOO.ext.EventManager.onDiocumentReady(HelloWorld.init, HelloWorld, true);
难点分析: Singleton Pattern 设计模式之单例 

什么是 Singleton Pattern?

Anwser: 单例模式(Singleton Pattern)是一种非常基本和重要的创建型模式。 “单例”的职责是保证一个类有且只有一个实例,并提供一个访问它的全局访问点。 在程序设计过程中,有很多情况下需要确保一个类只能有一个实例。 

单例模式有什么好处? 

Anwser: 1.减少new操作带来的内存占用;2.在JS中,可以建立你自己的命名空间namespace. 

如何实现单例模式?

Anwser:

传统的编程语言中为了使一个类只有一个实例,最容易的方法是在类中嵌入静态变量,并在第一个实例中设置该变量,而且每次进入构造函数都要做检查,不管类有多少个实例,静态变量只能有一个实例。为了防止类被多次初始化,要把构造函数声明为私有的,这样只能在静态方法里创建一个实例。 请看下面的例子: 

复制代码 代码如下:

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.静态属性判断是否重复生产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出来的。总之有两组结果是一样的。可以看出Singleton的模式下,对象实例化一次后,其属性或变量不会变化(哪怕是new的操作),除非你人为地修改。 上面的例子通过调用Constructor静态属性来获得对象确实可以保证“唯一实例”,然而,这个例子的失败之处在于它并没有有效地禁止Singleton对象的构造,因此如果我们在程序代码中人工加入new Singleton (),仍然可以获得到多个对象而导致模式失败。因此要完全实现Singleton并没有想象中那么简单。 于是我们进一步思考,得到了下面第三种方法,这种方法巧妙利用了“匿名”函数的特征来禁止对SingletonObject类构造函数的访问,可以说比较好的模拟了私有构造函数的特性,从而比较完美地解决了用javascript实现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构造函数不能从外部访问,系统抛出了异常!");} 

instA = SingletonFactory.getInstance(); //通过Factory上定义的静态方法获得 
var instB = SingletonFactory.getInstance(); 
instA.methodA(); 
instB.methodA(); 

alert(instA == instB); //成功 
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn