学习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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 数组的方法集合
Jun 05 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
iOS10推送通知开发教程
2016/09/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python处理html转义字符的方法详解
2016/07/01 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python中常见的异常总结
2018/02/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python数据归一化及三种方法详解
2019/08/06 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
高三语文教学反思
2014/01/15 职场文书
面试后的感谢信范文
2014/02/01 职场文书
整脏治乱工作简报
2015/07/21 职场文书
班主任培训研修日志
2015/11/13 职场文书