js的单例写法
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
loop.js是一个单例模式的js类：
//一开始就用new 无名类的方式创建。这样就实现了单例的功能。
var loop = new (function(){
// 外部公共函数
// 无限循环的操作
this.setloop = function(fn){Infinite_loop.setLoopFn(fn);} // 参数 1 参数类型 function
this.deleteloop = function(fn){Infinite_loop.deleteLoopFn(fn);} // 参数 1 参数类型 function
this.stoploop = function(){Infinite_loop.stopLoop();}
// 单次循环的操作
this.setloopOne = function(fn){one_loop.setLoopOneFn(fn);} // 参数 1 参数类型 function
this.stoploopOne = function(){one_loop.stopLoopOne();}
// 下面是两个私有的单例模式成员
// 无限循环执行的List对象
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对象 */
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();
}
})();
})();
下面是实例: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="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/loop.js"><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;"><img src="/UploadFiles/2021-04-02/glass_32x32.gif"> $("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 = "现在时间："+d.getUTCFullYear()+"年"+d.getUTCMonth()+"月"+d.getUTCDate()+"日 星期"+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:190px; top:101px;">
<img src="/UploadFiles/2021-04-02/glass_32x32.gif"><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); //可以带变量参数的setTimeout调用形式
return z;
}
setTimeout( function(){ sum = Plus(x, y, z); }, 3000);
/*除了可以带变量参数还可以获取返回值的setTimeout调用形式*/
</div>
</body>
</html>
jquery.js
jQuery 是1.2.6版的，小巧的js框架，可以到http://jquery.com/下载
testFile/glass_32x32.gif
其实大家可以再深入思考一下，
例如模拟一个简单工厂类的东西。
var money = factory.creater ("美元");
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
loop.js是一个单例模式的js类：
//一开始就用new 无名类的方式创建。这样就实现了单例的功能。
var loop = new (function(){
// 外部公共函数
// 无限循环的操作
this.setloop = function(fn){Infinite_loop.setLoopFn(fn);} // 参数 1 参数类型 function
this.deleteloop = function(fn){Infinite_loop.deleteLoopFn(fn);} // 参数 1 参数类型 function
this.stoploop = function(){Infinite_loop.stopLoop();}
// 单次循环的操作
this.setloopOne = function(fn){one_loop.setLoopOneFn(fn);} // 参数 1 参数类型 function
this.stoploopOne = function(){one_loop.stopLoopOne();}
// 下面是两个私有的单例模式成员
// 无限循环执行的List对象
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对象 */
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();
}
})();
})();
下面是实例: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="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/loop.js"><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;"><img src="/UploadFiles/2021-04-02/glass_32x32.gif"> $("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 = "现在时间："+d.getUTCFullYear()+"年"+d.getUTCMonth()+"月"+d.getUTCDate()+"日 星期"+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:190px; top:101px;">
<img src="/UploadFiles/2021-04-02/glass_32x32.gif"><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); //可以带变量参数的setTimeout调用形式
return z;
}
setTimeout( function(){ sum = Plus(x, y, z); }, 3000);
/*除了可以带变量参数还可以获取返回值的setTimeout调用形式*/
</div>
</body>
</html>
jquery.js
jQuery 是1.2.6版的，小巧的js框架，可以到http://jquery.com/下载
testFile/glass_32x32.gif
其实大家可以再深入思考一下，
例如模拟一个简单工厂类的东西。
var money = factory.creater ("美元");
标签：
javascript,单例模式
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“javascript 单例模式演示代码 javascript面向对象编程”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。