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 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
学生会竞选演讲稿
2014/04/24 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
安全生产演讲稿
2014/05/09 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年人大工作总结
2014/12/10 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android