当前位置:主页 > javascript教程 > js设计模式之单例模式原理与用法详解

js单例模式原理与用法简要说明

发布:2019-12-04 16:05:56 78


本站收集了一篇js单例模式相关的编程文章,网友武开朗根据主题投稿了本篇教程内容,涉及到js、设计模式、单例模式、js设计模式之单例模式原理与用法详解相关内容,已被225网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

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

本文实例讲述了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程序设计有所帮助。


参考资料

相关文章

  • JavaScript实现图片连播以及联级菜单的知识点

    发布:2020-01-07

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • 深入理解JavaScript中双向数据绑定

    发布:2020-02-11

    这篇文章主要为大家详细介绍了JavaScript中双向数据绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • js判断节假日的代码分享

    发布:2020-06-15

    因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?其实实现代码很简单的。下面小编给大家分享js判断节假日实例代码,需要的朋友参考下吧


  • 使用javascript如何实现文字无缝滚动

    发布:2020-03-12

    这篇文章主要为大家详细介绍了javascript实现文字无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • js转义字符及URI编码基础知识点

    发布:2020-01-07

    本文主要介绍了转义字符及URI编码的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧


  • Qt读取Json文件的方法详解(含源码+注释)

    发布:2023-03-05

    QT本身就有读取json的接口,简单又方便,下面这篇文章主要给大家介绍了关于Qt读取Json文件(含源码+注释)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下


  • javascript实现导航栏分页的代码示例

    发布:2021-06-12

    这篇文章主要为大家详细介绍了javascript实现导航栏分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • JS中serialize()多表单数据提交应用实例

    发布:2019-11-22

    这篇文章主要介绍了JS多个表单数据提交下的serialize()应用,接合实例形式分析了原生javascript实现多个表单提交时serialize操作相关使用技巧与操作注意事项,需要的朋友可以参考下


网友讨论