欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2007-03-10 作者: 来源:转载
使用方法:1.加入YUI.Ext库到你的web程序:2.加入样式表CSSStyle。如果你是一个美工,最多打交道的地方,可能就是这几个文件:3.加入一个holder.holder的意思是一个载体,JS处理好数据,转变成内容(Contents,文字、图片、表格等)放在这里,也可以理解为一个

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



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




3.加入一个holder.holder的意思是一个载体,JS处理好数据,转变成内容(Contents,文字、图片、表格等)放在这里,也可以理解为一个架子,承托所有内容。holder表现形式很简单,通常是几行div。


中易旅游网


您没确认条款内容。


4.加入定义Dialog脚本,实例化Dialog:

//createtheHelloWorldapplication(singleinstance)
varHelloWorld=function(){
//everythinginthisspaceisprivateandonlyaccessibleintheHelloWorldblock
//任何在这个区域的都是私有变量,只能在HelloWorld访问
vardialog,showBtn;

vartoggleTheme=function(){
getEl(document.body,true).toggleClass('ytheme-gray');
};
//returnapublicinterface
return{
init:function(){
showBtn=getEl('goNextBtn');//绑定一个按钮
//attachtoclickevent加入事件
/showBtn.on('click',this.showDialog,this,true);

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

showDialog:function(){
if(!dialog){//因为采用单例模式,不能被new重复实例。这里是用懒惰的方法作判断。
dialog=newYAHOO.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);
难点分析:SingletonPattern设计模式之单例

什么是SingletonPattern?

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

单例模式有什么好处?

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

如何实现单例模式?

Anwser:

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

复制代码 代码如下:
function__typeof__(objClass)//返回自定义类的名称
{
if(objClass!=undefined&&objClass.constructor)
{
varstrFun=objClass.constructor.toString();
varclassName=strFun.substr(0,strFun.indexOf('('));
className=className.replace('function','');
returnclassName.replace(/(^s*)|(s*$)/ig,'');
}
returntypeof(objClass);
}
functionSingleton()
{
//templatecodeforsingletonclass.静态属性判断是否重复生产new对象
if(this.constructor.instance)
{
returnthis.constructor.instance;
}
else{alert("else");this.constructor.instance=this;
}

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

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

varsingleton=newSingleton();
alert(__typeof__(singleton));
alert(singleton.GetValue());
alert(singleton.GetValue());
singleton.SetValue(1000000);
varsingleton=newSingleton();
alert(singleton.GetValue());
alert(singleton.GetValue());

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

复制代码 代码如下:
(function(){
//instancedeclared
//SingletonFactoryInterface
SingletonFactory={getInstance:getInstance}

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

//SingletonFactoryimplementions
functiongetInstance(){
if(SingletonObject.instance==null)returnnewSingletonObject();
elsereturnSingletonObject.instance;
}
})();

varinstA=null;
try
{
alert("试图通过newSingletonObject()构造实例!");
instA=newSingletonObject();
}
catch(e){alert("SingletonObject构造函数不能从外部访问,系统抛出了异常!");}

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

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

相关推荐