js设计模式之单例模式原理与用法详解


Posted in Javascript onAugust 15, 2019

本文实例讲述了js设计模式之单例模式原理与用。分享给大家供大家参考,具体如下:

关于设计模式,我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的。设计模式是人长期从事业务总结的具有普通适用性的解决方案。

就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等?O。写就写了很少站在设计模式的角度或者前人的角度去改善代码。

不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的角度改善开发。

在开始单例设计模式之前首先要搞清楚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>

运行结果:

js设计模式之单例模式原理与用法详解

介绍完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>

运行结果:

js设计模式之单例模式原理与用法详解

上面的 || 有个小技巧,就是就近计算,如果result有值了后面就不会计算了。还有上面的apply只是起到运行作用。

单例模式据说用处很多, 目前我知道的创建弹窗,创建遮罩层,实现jquery的one函数效果等。

最后这里设计模式核心代码运用的是闭包,闭包可以保存作用域链,因此产生了静态变量的改变。因此产生了缓存的效果。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
js实现无缝轮播图特效
May 09 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 #Javascript
vue的keep-alive用法技巧
Aug 15 #Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 #Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 #Javascript
You might like
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
input 高级限制级用法
2009/03/26 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python画双y轴图像的示例代码
2019/07/07 Python
python 类之间的参数传递方式
2019/12/20 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python 如何实现遗传算法
2020/09/22 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
小学教师岗位职责
2013/11/25 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
小学德育工作总结2015
2015/05/12 职场文书
PHP命令行与定时任务
2021/04/01 PHP
如何使用CocosCreator对象池
2021/04/14 Javascript
python实现Thrift服务端的方法
2021/04/20 Python
HAM-2000摩机图
2021/04/22 无线电
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript