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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
node之本地服务器图片上传的方法示例
Mar 26 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
一段实用的php验证码函数
2016/05/19 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
python简单实现旋转图片的方法
2015/05/30 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python3多线程知识点总结
2019/09/26 Python
运动会开幕式解说词
2014/02/05 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS