How to use:
1. Join the Yui.ext library to your Web program:
<!--YAHOO UI Utilities Lib, you'll 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. Add style sheet CSS style. If you are a graphic artist, most of the places to deal with, may be these several files:
<!--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. Add a holder.holder meaning is a carrier, JS processing good data, converted into content (Contents, text, pictures, tables, etc.) here, can also be understood as a shelf, supporting all content. The holder representation is simple, usually a few lines of Div.
<div id= "Hello-dlg" style= "visibility:hidden;position:absolute;top:0px;" >
<div class= "YDLG-HD" > Easy Tourism Network </div>
<div class= "YDLG-BD" > You did not confirm the terms. </div>
</div>
4. Add Define Dialog script, Instantiate dialog:
Create the HelloWorld application (single instance)
var HelloWorld = function () {
Everything in this spaces is private and only accessible in the HelloWorld block
Any private variable in this area 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
Attach to click event Join events
/showbtn.on (' Click ', This.showdialog, this, true);
Getel (' theme-btn '). On (' click ', Toggletheme);
},
Showdialog:function () {
if (!dialog) {//Because the singleton mode is used, the instance cannot be repeated by new. Here is the lazy way to make judgments.
dialog = new YAHOO.ext.BasicDialog ("Hello-dlg", {
modal:true,//This code is a dialog of some parameters, such as size, there is no shadow, whether to overwrite select, etc.
Autotabs:false,
width:180,
HEIGHT:100,
Shadow:true,
minwidth:508,
Shim:true,
Autoscroll:false,
Resizable:false,
minheight:300
});
Dialog.addkeylistener (dialog.hide, dialog);/keyboard Event ESC exit
Dialog.addbutton (' exit ', Dialog.hide, Dialog);
}
Dialog.show (showbtn.dom);//parameter is where the animation effect appears
}
};
} ()//Note that the pair of parentheses, if not, will not be executed.
Replace the Windows.onload initialization program with Ondocumentready. When Dom is ready, there is no need to wait for pictures and other resources to be loaded; For a discussion of both, see here
YAHOO.ext.EventManager.onDiocumentReady (Helloworld.init, HelloWorld, true);
Difficulty Analysis: Single example of Singleton pattern design mode
What is Singleton pattern?
Anwser: Single-case mode (Singleton pattern) is a very basic and important creation pattern. The responsibility of "singleton" is to ensure that a class has and only one instance, and provides a global access point to access it. In the process of programming, there are many situations where you need to ensure that a class can have only one instance.
What are the benefits of a single case model?
Anwser:1. Reduce the memory footprint of the new operation; 2. In JS, you can build your own namespace namespace.
How do I implement a single case pattern?
Anwser:
In a traditional programming language, the easiest way to make a class have only one instance is to embed the static variable in the class, set the variable in the first instance, and check each entry into the constructor, regardless of the number of instances of the class, and the static variable can have only one instance. To prevent a class from being initialized multiple times, the constructor is declared private so that only one instance of the static method can be created. Take a look at the following example:
Copy Code code 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);
}
function Singleton ()
{
Template code for Singleton class. Static property to determine whether to repeat the production of the new object
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 are random out. In a word, two sets of results are the same. As you can see in singleton mode, when an object is instantiated once, its properties or variables do not change (even if it is new) unless you modify it artificially. The example above, by invoking the constructor static property to obtain that the object does guarantee a "unique instance", however, the failure of this example is that it does not effectively prohibit the construction of the Singleton object, so if we manually add the new Singleton () in the program code , you can still get more than one object and cause the schema to fail. So to fully realize singleton is not as simple as you might think. So we think further and get the following third method, which skillfully exploits the feature of the "anonymous" function to prohibit access to the Singletonobject class constructor, which can be said to simulate the properties of private constructors. Thus, the problem of using JavaScript to realize singleton pattern is solved perfectly.
Copy Code code 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 to new Singletonobject ();
else return singletonobject.instance;
}
})();
var insta = null;
Try
{
Alert ("Attempts to construct an instance through new Singletonobject ()!") ");
Insta = new Singletonobject ();
}
catch (E) {alert ("Singletonobject constructor cannot be accessed externally, the system throws an exception!") ");}
Insta = Singletonfactory.getinstance (); Obtained by the static method defined on the factory
var instb = singletonfactory.getinstance ();
Insta.methoda ();
Instb.methoda ();
Alert (Insta = = INSTB); Success
