本文实例讲述了js设计模式之单例模式原理与用。分享给大家供大家参考,具体如下:
关于设计模式,我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的。设计模式是人长期从事业务总结的具有普通适用性的解决方案。
就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥。写就写了很少站在设计模式的角度或者前人的角度去改善代码。
不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的角度改善开发。
在开始单例设计模式之前首先要搞清楚js之中的应用和电话的作用。
应用和电话的直接作用首先是运行函数,其次是根据对象是否发生改变,产生借方法和用方法的情况苹果和调用的区别是前者接收数组作为第二个参数,而电话接手的是参数列表。这个区别不具体说,说他们的作用
1)运行函数栗子
//运行函数
功能测试(){
提醒(1);
}
test.apply ();
之前
函数即便没有申请一样可以运行,但是在有些场合用到应用会显得专业。
2)(这个参数)中应用的这个不发生改变,也就是直接利用对象方法,不存在借的概念
var arr=(1、2、3);
var max=Math.max.apply (null, arr);
警报(max);
之前
3)这发生改变,这个时候是借助这这个对象借助其他对象的方法
& lt; script>/*定义一个人类*/函数的人(姓名、年龄){
this.name=名称;
这一点。年龄=年龄;
}/*定义一个学生类*/函数的学生(姓名、年龄、年级){
的人。应用(这个参数);
这一点。级=成绩;
}//创建一个学生类
var学生=新学生(“钱”,21岁的“一年”级);//测试
警报(“名字:”+ student.name +“\ n”+“年龄:”+学生。年龄+“\ n”+“评级:”+ student.grade);//测试结果的名字:钱年龄:21级:一年级//因为在执行过程中这个的对象发生改变,所以是这借助了波斯对象的方法。
& lt;/script>
之前
运行结果:
介绍完应用和这个下面是单例设计模式解释。
单例设计模式,核心是创造并且只返回一个对象。因为只有一个对象所以有缓存的概念。本文采用的是别人的案例,能够说清楚问题就是好案例;
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>单利模式应用& lt;/title>
& lt;/head>
& lt; body>
& lt; div>
& lt;按钮id=皁penbtn”比;
创建按钮
& lt;/button>
& lt;脚本type=" text/javascript祝辞//设计模式核心代码
var getSingle=函数(fn) {
var的结果;
返回函数(){
返回(结果| |(结果=fn.apply(这个参数)));
}
}//业务代码之创建div代码
var createDiv=function () {
var div=document.createElement (" div ");
div.innerHTML="我是创建对象”;
console.warn(11);//多次点击只输出一次
返回div;
}
var createSingleDiv=getSingle (createDiv);//业务代码之触发事件
. getelementbyid (“openbtn”)。onclick=function () {
var div=createSingleDiv ();
document.getElementsByTagName(“身体”)[0].appendChild (div);
}
& lt;/script>
& lt;/div>
& lt;/body>
& lt;/html>
之前
运行结果:
上面的| |有个小技巧,就是就近计算,如果结果有值了后面就不会计算了。还有上面的应用只是起到运行作用。
单例模式据说用处很多,目前我知道的创建弹窗,创建遮罩层,实现jquery的一个函数效果等。
最后这里设计模式核心代码运用的是闭包,闭包可以保存作用域链,因此产生了静态变量的改变。因此产生了缓存的效果。
感兴趣的朋友可以使用:http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
