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

作者:zhensg 时间:2024-04-29 14:09:13 

本文实例讲述了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>

运行结果:

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函数效果等。

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

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

来源:https://www.cnblogs.com/zhensg123/p/9023808.html

标签:js,设计模式,单例模式
0
投稿

猜你喜欢

  • Python编程之变量赋值操作实例分析

    2021-09-20 12:12:01
  • ASP中Request对象获取客户端数据的顺序

    2007-09-22 10:36:00
  • PHP的PDO大对象(LOBs)

    2023-06-07 06:45:36
  • 基于Python socket实现简易网络聊天室

    2021-10-19 09:10:30
  • Python使用Srapy框架爬虫模拟登陆并抓取知乎内容

    2022-02-02 11:08:01
  • 用python做个代码版的小仙女蹦迪视频

    2022-10-14 12:48:59
  • 基于Python实现对比Exce的工具

    2022-12-04 17:44:44
  • python httpx的具体使用

    2021-05-31 21:42:28
  • python爬取网页版QQ空间,生成各类图表

    2023-01-18 06:30:58
  • Python数据可视化之用Matplotlib绘制常用图形

    2023-04-05 07:10:46
  • Python实现代码统计工具(终极篇)

    2021-10-21 03:01:47
  • python之PySide2安装使用及QT Designer UI设计案例教程

    2023-01-18 06:42:53
  • Python中如何导入类示例详解

    2023-05-09 08:35:58
  • 设计较好付款流程的12个建议

    2009-06-08 12:45:00
  • PHP完全二叉树定义与实现方法示例

    2023-07-04 10:49:10
  • 浅析Python 简单工厂模式和工厂方法模式的优缺点

    2023-08-04 00:15:00
  • Python数据分析 Pandas Series对象操作

    2021-07-17 20:18:52
  • python Web应用程序测试selenium库使用用法详解

    2023-10-05 22:15:00
  • Django中针对基于类的视图添加csrf_exempt实例代码

    2021-05-22 03:08:19
  • Python爬虫之教你利用Scrapy爬取图片

    2022-11-02 10:35:02
  • asp之家 网络编程 m.aspxhome.com