javascript 单例模式演示代码 javascript面向对象编程

(编辑：jimmy 日期: 2026/11/3 浏览：2)

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">

</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 设计模式之组合模式解析

下一篇：跟着Jquery API学Jquery之一选择器