当前位置: 首页 > 新闻动态 > 软件编程

JavaScript设计模式之单例模式简单实例教程

作者:用户投稿 浏览: 发布日期:2026-01-12
[导读]:这篇文章主要介绍了JavaScript设计模式之单例模式,结合简单实例形式分析了单例模式的概念、功能及javascript定义与使用单例模式相关操作技巧,需要的朋友可以参考下
目录
  • 一、单例模式概念
  • 二、单例模式的作用和注意事项
    • 模式作用:
    • 注意事项:
  • 三、单例模式代码和实战总结

    本文实例讲述了JavaScript设计模式之单例模式。分享给大家供大家参考,具体如下:

    一、单例模式概念

    单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

    二、单例模式的作用和注意事项

    模式作用:

    1、模块间通信

    2、系统中某个类的对象只能存在一个

    3、保护自己的属性和方法

    注意事项:

    1、注意this的使用

    2、闭包容易造成内存泄露,不需要的要赶快干掉

    3、注意new的成本。(继承)

    三、单例模式代码和实战总结

    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title>单例模式</title>
    </head>
    <body>
    <!--<script>
      var Singleton = (function(){
        var instantiated;
        function init(){
          /*这里定义单例代码*/
          return{
            publicMethod:function(){
              console.log("hello world");
            },
            publicProperty:"test"
          };
        }
        return{
          getInstance:function(){
            if(!instantiated){
              instantiated = init();
            }
            return instantiated;
          }
        }
      })();
      Singleton.getInstance().publicMethod();
    </script>-->
    <script>
       /*1.独立的对象 建2个一个xiaowang一个xiaoli
       2.让xiaoli跟xiaowang通过门铃进行通信
       3.先看一下xiaowang家有没有门 如果油门直接通过门铃通讯didi如果没有门先建门
       4.两个单例之间看是通讯*/
      var xiaowang = (function(argument){
        var men;
        var xiaowangjia = function(msg){
          this.menling = msg;
        }
        var info = {
          sendMessage:function(msg){
            if(!men){
              men = new xiaowangjia(msg);
            }
            return men;
          },
          abc:function(){
            return 123;
          }
        };
        return info;
      })();
      var xiaoli = {
        callXiaowang:function(msg){
          var _xw = xiaowang.sendMessage(msg);
          alert(_xw.menling);
          console.log(_xw.menling);
          _xw = null;//等待垃圾回收
          var abc = xiaowang.abc();
          console.log(abc);
        }
      }
      xiaoli.callXiaowang("didi");
    </script>
    </body>
    </html>

    使用在线HTML/CSS/JavaScript代码运行工具 http://tools./code/HtmlJsRun测试运行效果如下:

    更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

    免责声明:转载请注明出处:http://m.jing-feng.com.cn/news/577344.html

    扫一扫高效沟通

    多一份参考总有益处

    免费领取网站策划SEO优化策划方案

    请填写下方表单,我们会尽快与您联系
    感谢您的咨询,我们会尽快给您回复!