• 售前

  • 售后

热门帖子
入门百科

怎样用Javascript实现单例模式

[复制链接]
123457886 显示全部楼层 发表于 2021-10-26 13:47:12 |阅读模式 打印 上一主题 下一主题
目次


  • 概述
  • 代码实现

    • 简朴版单例模式
    • 改良版
    • 代理版单例模式
    • 惰性单例模式


概述

单例模式也称为单体模式,规定一个类只有一个实例,而且提供可全局访问点;
在读这篇文章之前,大概你对单例模式的概念感到模糊或者不清楚,但是其着实日常的开发中你肯定用到过单例模式;
JavaScript中没有类的定义,单例模式的特点是”唯一“和”全局访问“,那么我们可以遐想到JavaScript中的全局对象,利用ES6的let不答应重复声明的特性,刚好符合这两个特点;是的,全局对象是最简朴的单例模式;
  1. let obj = {
  2.     name:"咸鱼",
  3.     getName:function(){}
  4. }
复制代码
上述代码中可以知道obj就是一个单例,由于obj刚好就符合单例模式的两大特点:"唯一"和"可全局访问";
但是我们并不建议这么实现单例,由于全局对象/全局变量会有一些弊端:
污染命名空间(容易变量名辩说)维护时不容易管控 (搞不好就直接覆盖了)

代码实现


简朴版单例模式

分析:只能有一个实例,以是我们需要利用if分支来判断,如果已经存在就直接返回,如果不存在就新建一个实例;
  1. let Singleton = function(name){
  2.     this.name = name;
  3.     this.instance = null;
  4. }
  5. Singleton.prototype.getName = function(){
  6.     console.log(this.name);
  7. }
  8. Singleton.getInstance = function(name){
  9.     if(this.instace){
  10.         return this.instance;
  11.     }
  12.     return this.instance = new Singleton(name);
  13. }
  14. let winner = Singleton.getInstance("winner");   //winner
  15. console.log(winner.getName());
  16. let sunner = Singleton.getInstance("sunner");   //winner
  17. console.log(sunner.getName())
复制代码
上面代码中我们是通过一个变量instance的值来进行判断是否已存在实例,如果存在就直接返回this.instance,如果不存在,就新建实例并赋值给instance;
但是上面的代码还是存在题目,由于创建对象的操作和判断实例的操作耦合在一起,并不符合”单一职责原则“;

改良版

思绪:通过一个闭包,来实现判断实例的操作;
闭包告诫:不明白闭包的同学请先学习闭包
  1. let CreateSingleton = (function(){
  2.     let instance = null;
  3.     return function(name){
  4.         this.name = name;
  5.         if(instance){
  6.             return instance
  7.         }
  8.         return instance = this;
  9.     }
  10. })()
  11. CreateSingleton.prototype.getName = function(){
  12.         console.log(this.name);
  13. }
  14. let winner = new CreateSingleton("winner");  //winner
  15. console.log(winner.getName());
  16. let sunner = new CreateSingleton("sunner");  //winner
  17. console.log(sunner.getName())
复制代码
代理版单例模式

通过代理的情势,将创建对象的操作和实例判断的操作进行解耦拆分,实现更小粒度的划分,符合”单一职责原则“;
  1. let ProxyCreateSingleton = (function(){
  2.     let instance = null;
  3.     return function(name){
  4.         if(instance){
  5.             return instance
  6.         }
  7.         return instance = new Singlton(name);
  8.     }
  9. })();
  10. let Singlton = function(name){
  11.     this.name = name;
  12. }
  13. Singlton.prototype.getName = function(){
  14.     console.log(this.name);
  15. }
  16. let winner = new ProxyCreateSingleton("winner");
  17. console.log(winner.getName());
  18. let sunner = new ProxyCreateSingleton("sunner");
  19. console.log(sunner.getName());
复制代码
上面的代码中,ProxyCreateSingleton()只负责判断实例,Singlton只负责创建对象和赋值;

惰性单例模式

我们经常会有如许的场景:页面多次调用都有弹窗提示,只是提示内容不一样;
这个时间我们可以立马想到是单例模式,弹窗就是单例实例,提示内容是参数转达;我们可以用惰性单例模式来实现它;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="loginBtn">有梦想的咸鱼</div>
  11. </body>
  12. <script>
  13. let getSingleton = function(fn) {
  14.     var result;
  15.     return function() {
  16.         return result || (result = fn.apply(this, arguments)); // 确定this上下文并传递参数
  17.     }
  18. }
  19. let createAlertMessage = function(html) {
  20.     var div = document.createElement('div');
  21.     div.innerHTML = html;
  22.     div.style.display = 'none';
  23.     document.body.appendChild(div);
  24.     return div;
  25. }
  26. let createSingleAlertMessage = getSingleton(createAlertMessage);
  27.     document.getElementById('loginBtn').onclick=function(){
  28.         let alertMessage = createSingleAlertMessage('看来真的是个咸鱼');
  29.         alertMessage.style.display = 'block';
  30.     }
  31. </script>
  32. </html>
复制代码
惰性单例是指的是页面开始加载的时间我们的实例是没有进行创建的,是当我们点击页面的div之后才开始创建实例(按需创建),这可以进步我们的网页性能,加快我们的页面渲染速率;
以上就是怎样用Javascript实现单例模式的详细内容,更多关于Javascript单例模式的资料请关注脚本之家其它相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作