The fourth day of learning YUI.Ext--Usage of dialog box Dialog_YUI.Ext related

使用方法：
1.加入YUI.Ext 库到你的web程序： 


<script></script><script></script>
2.加入样式表 CSS Style 。如果你是一个美工，最多打交道的地方，可能就是这几个文件：
 
 

 
 

3.加入一个holder.holder的意思是一个载体，JS处理好数据，转变成内容（Contents，文字、图片、表格等）放在这里,也可以理解为一个架子，承托所有内容。holder表现形式很简单，通常是几行div。 

    
 

中易旅游网

    
 

 您没确认条款内容。

     

4. Add the definition Dialog script and instantiate the Dialog:

// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
//Anything in this area is a private variable and can only be accessed in HelloWorld
var dialog, showBtn;

var toggleTheme = function(){
getEl(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
       showBtn = getEl('goNextBtn'); //Bind a button
                                                                                                                                                                                                                                                               );

                                                                                                                                                   log ){ //Because it adopts singleton mode, it cannot be repeatedly instanced by new. This is a lazy way of making judgments.
                                                                                                                                                                                                                                                                             >                                                                                                                                         shadow:true,
minWidth:508,
shim: true,
autoScroll: false,
resizable:false,
     minHeight:300
    }); 🎜> Dialog.addButton('Exit', dialog .hide, dialog);
                                                                                                                                                                                                       . This pair of parentheses will not be executed if it is missing.
//Use onDocumentReady instead of windows.onload initializer. When the DOM is ready, there is no need to wait for images and other resources to be loaded; for a discussion of the two, please see here
YAHOO.ext.EventManager.onDiocumentReady(HelloWorld.init, HelloWorld, true);
Difficulty Analysis: Singleton Pattern Design Pattern Singleton

What is Singleton Pattern?

Anwser: Singleton Pattern is a very basic and important creation pattern. The responsibility of a "singleton" is to ensure that a class has one and only one instance, and to provide a global access point to access it.During the programming process, there are many situations where it is necessary to ensure that a class can only have one instance.

What are the benefits of singleton pattern?

Anwser: 1. Reduce the memory usage caused by new operation; 2. In JS, you can create your own namespace.

How to implement singleton mode?

Anwser:

In traditional programming languages, in order to have only one instance of a class, the easiest way is to embed a static variable in the class and set the variable in the first instance. And every time you enter the constructor, a check must be done. No matter how many instances the class has, static variables can only have one instance. To prevent the class from being initialized multiple times, declare the constructor as private so that only one instance can be created in a static method. Please see the following example:

Copy code The code is as follows:

function __typeof__( objClass) //Return the name of the custom class
{
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); .Static properties determine whether to repeatedly produce new objects
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());


The second and third ones are random. In short, the results of both groups are the same. It can be seen that in Singleton mode, after an object is instantiated once, its properties or variables will not change (even the new operation) unless you modify it manually. The above example can indeed guarantee a "unique instance" by calling the Constructor static property to obtain the object. However, the failure of this example is that it does not effectively prohibit the construction of the Singleton object. Therefore, if we manually add new Singleton to the program code (), multiple objects can still be obtained, causing the mode to fail. Therefore, fully implementing Singleton is not as simple as imagined. So we thought further and came up with the third method below. This method cleverly uses the characteristics of the "anonymous" function to prohibit access to the SingletonObject class constructor. It can be said that it better simulates the characteristics of the private constructor, thus comparing Perfectly solves the problem of using JavaScript to implement Singleton Pattern.

Copy code

The code is as follows:

(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); //成功