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


Posted in Javascript onMarch 10, 2007

使用方法:
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的一些参数,如大小、有?右跤啊⑹欠窀哺?elect等
                        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); //成功 
Javascript 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
学习YUI.Ext基础第一天
Mar 10 #Javascript
JavaScript触发器详解
Mar 10 #Javascript
又一个图片自动缩小的JS代码
Mar 10 #Javascript
基础的prototype.js常用函数及其用法
Mar 10 #Javascript
优秀js开源框架-jQuery使用手册(1)
Mar 10 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
vue.js的提示组件
2017/03/02 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
用js实现放大镜效果
2020/10/28 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python实现猜单词小游戏
2020/05/22 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python日志syslog使用原理详解
2020/02/18 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
党风廉政建设责任书
2014/04/14 职场文书
生产助理岗位职责
2014/06/18 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书