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

网络编程 2024/11/16 佚名

3 2 1

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,单例模式

标签：

javascript,单例模式

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“javascript 单例模式演示代码 javascript面向对象编程”

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

暂无“javascript 单例模式演示代码 javascript面向对象编程”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

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

javascript,单例模式

JavaScript 设计模式之组合模式解析

跟着Jquery API学Jquery之一选择器

评论“javascript 单例模式演示代码 javascript面向对象编程”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

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

javascript,单例模式

JavaScript 设计模式之组合模式解析

跟着Jquery API学Jquery之一 选择器

评论“javascript 单例模式演示代码 javascript面向对象编程”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

跟着Jquery API学Jquery之一选择器

RTX 5090要首发性能要翻倍！三星展示GDDR7显存