学习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 相关文章推荐
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JavaScript 原型与原型链详情
Nov 02 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
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
实例教学如何写vue插件
2017/11/30 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python得到windows自启动列表的方法
2018/10/14 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
剪彩仪式主持词
2014/03/19 职场文书
效能监察建议书
2014/05/19 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫