学习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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
javascript的数组和常用函数详解
May 09 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue如何搭建多页面多系统应用
Jun 17 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+javascript的日历控件
2009/11/19 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Javascript倒计时代码
2010/08/12 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
宠物店的创业计划书范文
2014/01/11 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
趣味运动会标语口号
2015/12/26 职场文书