js设计模式之单例模式原理与用法详解
本文实例讲述了js设计模式之单例模式原理与用。分享给大家供大家参考，具体如下：
关于设计模式，我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前，设计模式就存在了，这个是显然的。设计模式是人长期从事业务总结的具有普通适用性的解决方案。
就个人来讲，写了太多的命令式编程代码，所谓命令式代码就是业务需要怎样就写怎么样的功能，比如添加一个点击事件，比如进行一个验证等扥。写就写了很少站在设计模式的角度或者前人的角度去改善代码。
不给自己找客观原因，最近开始关注设计模式，尝试从设计模式的角度改善开发。
在开始单例设计模式之前首先要搞清楚js之中的apply和call的作用。
apply和call的直接作用首先是运行函数，其次是根据对象是否发生改变，产生借方法和用方法的情况。apply和call的区别是前者接收数组作为第二个参数，而call接手的是参数列表。这个区别不具体说，说他们的作用
1）运行函数栗子
//运行函数
function test(){
alert(1);
}
test.apply();
函数即便没有apply一样可以运行，但是在有些场合用到apply会显得专业。
2）apply(this,arguments)中的this不发生改变，也就是直接利用对象方法，不存在借的概念
var arr=[1,2,3]; var max=Math.max.apply(null,arr); alert(max);
3）this发生改变，这个时候是借助this这个对象借助其他对象的方法
<script>
/*定义一个人类*/
function Person(name, age) {
this.name = name;
this.age = age;
}
/*定义一个学生类*/
function Student(name, age, grade) {
Person.apply(this, arguments);
this.grade = grade;
}
//创建一个学生类
var student = new Student("qian", 21, "一年级");
//测试
alert("name:" + student.name + "\n" + "age:" + student.age + "\n" + "grade:" + student.grade);
//测试结果name:qian age:21 grade:一年级
//因为在执行过程中this的对象发生改变，所以是this借助了Persion对象的方法。
</script>
运行结果：
介绍完apply和this下面是单例设计模式解释。
单例设计模式，核心是创造并且只返回一个对象。因为只有一个对象所以有缓存的概念。本文采用的是别人的案例，能够说清楚问题就是好案例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 单利模式应用</title>
</head>
<body>
<div>
<button id="openbtn">
创建按钮
</button>
<script type="text/javascript">
//设计模式核心代码
var getSingle = function(fn) {
var result;
return function() {
return (result || (result = fn.apply(this,arguments)));
}
}
//业务代码之创建div代码
var createDiv = function() {
var div = document.createElement("div");
div.innerHTML = "我是创建对象";
console.warn('11');//多次点击只输出一次
return div;
}
var createSingleDiv = getSingle(createDiv);
//业务代码之触发事件
document.getElementById("openbtn").onclick = function() {
var div = createSingleDiv();
document.getElementsByTagName("body")[0].appendChild(div);
}
</script>
</div>
</body>
</html>
运行结果：
上面的 || 有个小技巧，就是就近计算，如果result有值了后面就不会计算了。还有上面的apply只是起到运行作用。
单例模式据说用处很多， 目前我知道的创建弹窗，创建遮罩层，实现jquery的one函数效果等。
最后这里设计模式核心代码运用的是闭包，闭包可以保存作用域链，因此产生了静态变量的改变。因此产生了缓存的效果。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释，仍然有很多人问，本文给大家深度解析，需要的朋友可以参考下2017-02-02
下面小编就为大家带来一篇JavaScript几种数组去掉重复值的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2016-04-04
如何实现从照片中裁切自已的肖像呢？...2007-03-03
鼠标划过延迟加载隐藏层的效果，想必大家都有见到过吧，在本文将为大家详细介绍下使用js是如何实现的，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了JavaScript中使用参数个数实现重载功能,需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了微信小程序实现上传多个文件，超过10个，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
计时器效果想必大家都见到过吧，其实使用js可以很轻松的实现，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要为大家详细介绍了js回调函数仿360开机，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要为大家详细介绍了微信小程序实现日历签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下2023-09-09
最新评论