使用方法:
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); //成功










