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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 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资源管理框架Assetic简介
2014/06/12 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
js 操作css实现代码
2009/06/11 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
《灯光》教学反思
2014/02/08 职场文书
大学生创业计划书
2014/08/14 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年护士长工作总结
2014/11/11 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书