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

使用方法:
1.加入YUI.Ext 库到你的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 。如果你是一个美工,最多打交道的地方,可能就是这几个文件:
<!--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.加入一个holder.holder的意思是一个载体,JS处理好数据,转变成内容(Contents,文字、图片、表格等)放在这里,也可以理解为一个架子,承托所有内容。holder表现形式很简单,通常是几行div。

<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">    
 <div class="ydlg-hd">中易旅游网</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
    //任何在这个区域的都是私有变量 ,只能在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); //成功

(0)

相关推荐

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

    使用方法: 1.加入YUI.Ext 库到你的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 ty

  • 学习YUI.Ext 第六天--关于树TreePanel(Part 1)

    学习YUI.Ext 第五天--关于树TreePanel(Part 1)  效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp     树组件是YUI.Ext 0.40 新增的组件.虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发.具体原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245(翻译文章)或http://www.jackslocum.com/blog/2

  • 学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

    之前在Part 1简单介绍了Veiw和JSONView.今天这里小弟为大家说说应用的案例,原本Jack的Image Chooser是一个非常好的案例,当中包含Jack大量的奇技淫巧,不过正因为这样,过于深奥,小弟我亦不能全盘吃透,只挑其"勃大茎深"之处,与君共勉之!本文包含四大知识点:1.在LayoutDialog中加入Tabs:2.View的使用方式:3.JSONView的使用方式;4.获取XML/JSON的fields值与分页 演示地址 [View之定义]  A View is g

  • 学习YUI.Ext 第七天--关于View&JSONView

    展现一条一条的二维关系的数据,我们可以使用GIRD组件. 但有些场合,如产品展示,画册,我们可以使用View组件,来展示"矩阵"式的数据. View的数据源来自DataModel对象,即包含XMLDataModel和JSONDataModel.尽管View支持JSON,但如果不是用于DataModel,View的子类JSONView更适用,因为它提供更多的事件和方法.一般来说,View用于XML数据源:JSONView用于JSON数据源. View如何工作? 记得以前如何输出一个记录吗

  • 学习YUI.Ext基础第一天

    导言 翻了翻以前的旧贴子,有值得回味的地方共分享: Post1: ................. 我们现在的大量应用依赖于浏览器(主要是 IE)的脚本处理能力,在有些老机器上跑的时候确实会略显缓慢,但是目前的主流机型处理起来已经没有任何问题了.我们设计了一整套的 Web 开发框架,这套框架将随着应用的锤炼而越来越稳定.JavaScript 用的不好容易造成 IE 的崩溃,我们是靠提高代码的重用度来解决这个问题的,因为重用度越高的代码往往越稳定. 有些眼高手低的人往往凭第一眼印象就把 Java

  • 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

    下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有待大家一起研究. 异步取节点的思路是这样的: 1.先定义一个初始化节点(也可以不定义,看个人需求) 2.yui-ext根据该节点id请求服务器,获得子节点各属性 3.循环 特点:可以在上一级目录中,在服务器端预先将该节点是否有子节点读好(json中的isLeaf属性),虽然但数据库将多承担一些压力,但用个count(*)不会造成太大负担(除非查询条件异常复杂

  • 学习YUI.Ext第五日--做拖放Darg&Drop

    拖放某个元素Darg&Drop是windows(视窗)问世时的一个重要特征.现在我们要在浏览器里面实现,怎么做呢?先看看基本例子: 复制代码 代码如下: YAHOO.example.DDApp = function() {      var dd;      return {          init2: function() { //   var dropzone =["dz"];  //   for(i in dropzone){  //           new YA

  • 学习YUI.Ext 第三天

    对于以前很多混淆不清的知识,有必要再梳理一下:就从最基础的变量开始说起. 1..变量variable a.全局变量Global Variable 和 局部变量 Private Variable 加var和不加var是有区别的        -->如果不用关键字var,声明一个变量,那么这个是全局变量,任何子函数都可以访问,就算是跳出花括号的地方,亦可被访问:       -->如果使用关键字var,则从所在的"花括号{}"起,全体函数都可以访问该变量,如: function

  • 学习YUI.Ext 第二天

    遇到一些JS的语法上的问题,没有理解透,恶补基本功! 匿名函数 An anonymous function 没有名字的就叫作"匿名函数",像这个 function(x,y){return x+y} 没有名字当然不能直接调用,也无法调用:最多能只能把它赋值或闭包处理(闭包是什么下面再讲),如: var sum =function(x,y){return x+y}; alert(sum(1,2)); 这时候,与传统写法是等价的 function sum(x,y){return x+y}.这

  • 属于自己的Android对话框(Dialog)自定义集合

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法,如果使用这些方法的话,Activity将通过getOwnerActivity()方法返回该Activity管理的对话框(dialog). onCreateDialog(int):当你使用这个回调函数时,Android系统会有效的设置这个Acti

随机推荐