Home > Developer > JavaScript
Js Singleton writing
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> JS Singleton mode </title> <style type =" text/css "> div {height: 100px; width: 100px; background: # CCC; border: #000 1px solid;} </style> </pead> are you? (Singleton) are you? (Normal) <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Loop. js is a js class in singleton mode:
// You can create a new anonymous class at the beginning. In this way, the single instance function is implemented.
Var loop = new (function (){
// External Public Functions
// Infinite loop operation
This. setloop = function (fn) {Infinite_loop.setLoopFn (fn);} // parameter 1 parameter Type function
This. deleteloop = function (fn) {Infinite_loop.deleteLoopFn (fn);} // parameter 1 parameter Type function
This. stoploop = function () {Infinite_loop.stopLoop ();}
// One-time cyclic Operation
This. setloopOne = function (fn) {one_loop.setLoopOneFn (fn);} // parameter 1 parameter Type function
This. stoploopOne = function () {one_loop.stopLoopOne ();}
// The following two private Singleton mode members
// List object for infinite loop execution
Var Infinite_loop = new (function (){
This. loop_stop = true;
This. loop_action = new Array ();
This. loop_actionID = 0;
Var opp = this;
This. setLoopFn = function (fn ){
If (typeof (fn )! = "Function "){
Throw new Error ("window. loop. setloop's argment is not a function! "); Return;
}
For (var I = 0; I <this. loop_action.length; I ++ ){
If (this. loop_action [I] = fn ){
Throw new Error (fn + "has been registered! ");
Return;
}
}
This. loop_action.push (fn );
This. startLoop ();
};
This. deleteLoopFn = function (fn ){
For (var I = 0; I <this. loop_action.length; I ++ ){
If (this. loop_action [I] = fn ){
This. loop_action.splice (I, 1 );
}
}
};
This. Loop = function (){
Var run = function (){
If (opp. loop_action.length> 0 ){
(Opp. loop_action [opp. loop_actionID]) ();
Opp. loop_actionID ++;
If (opp. loop_actionID> = opp. loop_action.length) opp. loop_actionID = 0;
SetTimeout (opp. Loop, 20 );
Return;
}
Opp. loop_stop = true;
};
Run ();
}
This. stopLoop = function (){
This. loop_stop = true;
}
This. startLoop = function (){
If (! This. loop_stop) return;
This. loop_stop = false;
This. Loop ();
}
})();
/* List objects executed at a time */
Var one_loop = new (function (){
This. loopOne_stop = true;
This. loopOne_action = new Array ();
Var opp = this;
This. setLoopOneFn = function (fn ){
If (typeof (fn )! = "Function "){
Throw new Error ("window. loop. setloopOne's argment is not a function! "); Return;
}
This. loopOne_action.push (fn );
This. startLoopOne ();
}
This. LoopOne = function (){
Function run (){
If (opp. loopOne_action.length> 0 &&! Opp. loopOne_stop ){
(Opp. loopOne_action.shift ())();
SetTimeout (opp. LoopOne, 20 );
Return;
}
Opp. loopOne_stop = true;
}
Run ();
}
This. stopLoopOne = function (){
This. loopOne_stop = true;
}
This. startLoopOne = function (){
If (! This. loopOne_stop) return;
This. loopOne_stop = false;
This. LoopOne ();
}
})();
})();
The following is an example: loop.html
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> loop. js </title>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "loop. js"> </script>
<Script type = "text/javascript">
Function moveLayer1 (){
This. moveleft = true;
This. movedown = true;
This. x1 = 100
This. y1 = 100;
This. x2 = 800;
This. y2 = 400;
}
MoveLayer1.prototype. move = function (){
Var divLayer1 = document. getElementById ("Layer1 ");
Var l = parseInt (divLayer1.style. left ),
T = parseInt (divLayer1.style. top );
Var r = parseInt (Math. random () * 20 );
If (l <this. x2 & this. moveleft ){
L + = 1 + r;
If (l> this. x2-1) this. moveleft = false;
} Else if (l> this. x1 &&! This. moveleft ){
L-= 1 + r;
If (l <this. x1 + 1) this. moveleft = true;
}
If (t <this. y2 & this. movedown ){
T + = 1 + r;
If (t> this. y2-1) this. movedown = false;
} Else if (t> this. y1 &&! This. movedown ){
T-= 1 + r;
If (t <this. y1 + 1) this. movedown = true;
}
DivLayer1.style. left = l + "px ";
DivLayer1.style. top = t + "px ";
}
Function circle (){
This. r = 50;
This. rx = 500;
This. ry = 500;
This. x;
This. y;
This. angle = 0;
This. speedAngle = 10;
}
Circle. prototype. init = function (){
This. setXY ();
$ ("Body "). append ('<div id = "cd" class = "Layer2" style = "left:' + this. x + 'px; top: '+ this. y + 'px; "> </div> ');
$ ("Body "). append ('<div class = "Layer1" style = "left:' + this. rx + 'px; top: '+ this. ry + 'px; "> </div> ');
}
Circle. prototype. setXY = function (){
This. x = this. rx + this. r * Math. cos (this. angle/(180/Math. PI ));
This. y = this. ry + this. r * Math. sin (this. angle/(180/Math. PI ));
}
Circle. prototype. draw = function (){
This. angle + = this. speedAngle;
This. setXY ();
Var f = document. getElementById ("cd ");
// $ ("Body"). append ($ ("# cd"). clone ());
F. style. left = this. x + "px ";
F. style. top = this. y + "px ";
}
Function timetable (){
Var f = document. getElementById ("daa ");
Var d = new Date ();
F. innerHTML = "current time:" + d. getUTCFullYear () + "year" + d. getUTCMonth () + "month" + d. getUTCDate () + "day week" + d. getUTCDay () + "" + d. getUTCHours () + ":" + d. getUTCMinutes () + ":" + d. getUTCSeconds ();
}
Var lenstr =-1;
Function prints (){
Var str = document. getElementById ("sourse"). innerHTML;
If (lenstr <str. length ){
Lenstr ++;
Var f = document. getElementById ("prin ");
// If (lenstr % 100 = 0) f. innerHTML + = "<br/> ";
F. innerHTML + = str. charAt (lenstr );
} Else {
Loop. deleteloop (prints );
}
}
Var movediv = new moveLayer1 ();
Function imgMove () {movediv. move ();}
Var mycircle = new circle ();
Function drawCircle () {mycircle. draw ();}
Function winInit (){
Mycircle. init ();
Loop. setloop (drawCircle );
Loop. setloop (imgMove );
Loop. setloop (timetable );
Loop. setloop (prints );
}
</Script>
<Style type = "text/css">
<! --
. Layer1 {
Position: absolute;
Overflow: hidden;
Color: # fff;
Width: 50px;
Height: 50px;
Z-index: 50;
}
. Layer2 {
Position: absolute;
Overflow: hidden;
Color: # fff;
Width: 40px;
Height: 40px;
Z-index: 1;
}
-->
</Style>
</Head>
<Body onload = "winInit ();">
<Div id = "daa"> </div>
<Div id = "Layer1" class = "Layer1" style = "left: margin PX; top: 101px;">
</div>
<Pre id = "prin"> </pre>
<Div id = "sourse" style = "display: none">
Var x = 1;
Var y = 2;
Var z = 3;
Var sum;
Function Plus (a, B)
{
Var z = 0;
Var I = 0;
For (I = 0; I <arguments. length; I ++)
{
Z + = arguments [I];
}
SetTimeout (function () {alert (z) ;}, 6000); // you can call setTimeout with variable parameters.
Return z;
}
SetTimeout (function () {sum = Plus (x, y, z) ;},3000 );
/* In addition to variable parameters, you can also obtain the setTimeout call form of the returned value */
</Div>
</Body>
</Html>
Jquery. js
JQuery is 1.2.6 and a small js framework. You can download it at http://jquery.com /.
TestFile/glass_32x32.gif
In fact, you can think deeply,
For example, simulate a simple factory.
Var money = factory. creater ("USD ");
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
