热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

《JavaScript设计模式》—对单例模式的一些见解

《JavaScript设计模式》—对单例模式的一些见解JavaScript设计模式主要分类:①创建型设计模式,例如单例模式、工厂模式②结构型设计模式,例如装饰者模式、适配器模式

《Javascript设计模式》— 对单例模式的一些见解

Javascript设计模式主要分类:

①创建型设计模式,例如单例模式、工厂模式

②结构型设计模式,例如装饰者模式、适配器模式

③行为型设计模式,例如观察者模式、访问者模式

④技巧型设计模式,例如委托模式、数据访问队形模式

⑤结构型设计模式,例如MVC模式、MVVM模式、MVP模式

本文讨论的是Javascript中最常见的设计模式:单例模式,适合对Javascript设计模式没什么太多了解的伙伴。

单例模式出现的背景:

以下为一段用于前后端交互的js

    function getUserInfo() {
        // 获取用户信息
    }
    function setUserInfo(param) {
        // 设置用户信息
    }
    function getCount() {
        // 登录
    }
    function logout() {
        // 注销
    }

这样写的弊端:因为function getUserInfo(){}相当于 var getUserInfo = function(){},产生了很多全局变量,例子举的例子算是比较特殊的了,如果是比较大众一点的变量名,就很容易产生冲突。

如何解决?

使用单例模式定义命名空间:

var requestUtil = {
        getUserInfo: function () {
            // 获取用户信息
        },
        setUserInfo: function (param) {
            // 设置用户信息
        },
        login: function () {
            // 登录
        },
        logout: function () {
            // 注销
        }
    }

函数的调用:当需要获取用户信息时,requestUtil.getUserInfo()即可。

使用单例模式创建小型代码库:

  var X = {
      Util: {
          util1: function () {},
          util2: function () {}
      },
      Ajax: {
          get: function () {},
          post: function () {}
      },
      Others: {
          function1: function () {},
          function2: function () {}
      }
  }

使用方法:X.Ajax.get()

使用单例模式管理静态变量:

背景:我们都知道,Javascript没有static这类关键字,所以定义任何变量理论上都是可以改变的(ES6前,因为ES6出现了类似的const,用于定义常量),那么在ES6前,想定义一个静态变量,原意是不想改变的,可实质上它又能被改变,应该如何做到不能被改变?答案如下:

  var COnf= (function () {
      // 私有变量
      var cOnf= {
          MAX_NUM: 100,
          MIN_NUM: 1,
          COUNT: 1000
      }
      // 返回取值函数
      return {
          get: function (name) {
              retrun conf[name] ? conf[name] : null
          }
      }
  })()

没有定义赋值函数,因此里边的变量自然就不能被改变。

使用方法: var count = Conf.get('MAX_NUM')

惰性单例:

说明:用于延迟单例对象的创建,即惰性创建。

  var LazySingle = (function () {
      var _instance = null
      function Single () {
          return {
              publicMethod: function () {
                return this.publicProperty
              },
              publicProperty: '1.0'
          }
      }
      return function () {
          if (!_instance) {
              _instance = new Single()
          }
          return _instance
      }
  })()
    console.log(LazySingle().publicMethod())



推荐阅读
  • PHP中的单例模式与静态变量的区别及使用方法
    本文介绍了PHP中的单例模式与静态变量的区别及使用方法。在PHP中,静态变量的存活周期仅仅是每次PHP的会话周期,与Java、C++不同。静态变量在PHP中的作用域仅限于当前文件内,在函数或类中可以传递变量。本文还通过示例代码解释了静态变量在函数和类中的使用方法,并说明了静态变量的生命周期与结构体的生命周期相关联。同时,本文还介绍了静态变量在类中的使用方法,并通过示例代码展示了如何在类中使用静态变量。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • [JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
    [JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ... [详细]
  • JavaScript - let和var区别
    前提ES5只有函数作用域和全局作用域,var属于ES5。let属于ES6,新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 预备知识可参考我整理的博客Windows编程之线程:https:www.cnblogs.comZhuSenlinp16662075.htmlWindows编程之线程同步:https ... [详细]
  • 本文讨论了一个数列求和问题,该数列按照一定规律生成。通过观察数列的规律,我们可以得出求解该问题的算法。具体算法为计算前n项i*f[i]的和,其中f[i]表示数列中有i个数字。根据参考的思路,我们可以将算法的时间复杂度控制在O(n),即计算到5e5即可满足1e9的要求。 ... [详细]
  • 本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线(Event Bus)实现中的使用方法。RxJava是一种基于观察者模式的异步java库,可以提高开发效率、降低维护成本。通过RxJava,开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说,本文将详细介绍如何利用RxJava实现事件总线,并提供了使用建议。 ... [详细]
  • 我有使用googledrivepdf的共享链接,我必须使用angular7下载pdf文件。我已经完成了自欺 ... [详细]
author-avatar
狂龙
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有