学习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 相关文章推荐
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
React事件处理的机制及原理
Dec 03 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
jquery实现上传图片功能
Jun 29 jQuery
学习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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Python实现文件复制删除
2016/04/19 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
北京振戎融通Java面试题
2015/09/03 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
《都江堰》教学反思
2014/02/07 职场文书
厨房管理计划书
2014/04/27 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
环保建议书作文300字
2015/09/14 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
python如何为list实现find方法
2022/05/30 Python