1.场景:当我们需要多人合作完成一个项目,但是有一些操作是同样的操作时(例如:点击按钮显示加载的遮罩层;例如:提交表单时的验证都是一样的),这个时候我们就需要单例模式;

2.什么是单例模式:是一种常见的设计模式,在应用这个模式时,必须保证单利对象的类只有一个实例存在;这样全局拥有一个对象,有利于我们进行系统调整;

3.创建单例模式:

  var singleton = {

    name:'zhaokaikai',

    func (){
      console.log('您执行了一个单例模式中的方法')

    }

  }

4.缺点:我们可以通过操作直接对象中的属性改变了原有的值

5.需求:如果我们想既可以扩展对象又可以继承对象中的属性与方法。

6.解决办法:var singleton = function () {

    this.name = 'zhaokaikai',

    this.func = function(){

      console.log('您执行了一个单例模式中的方法')

    }

  }

var first = new singleton();

7.缺点:如果空间中出现了一个相同的名字会造成覆盖。

8.解决办法:

(function(){

  var nameSpace = nameSpace||{};

  nameSpace.singleton = function(){ 

    this.name = 'zhaokaikai',

    this.func = function(){

      console.log('您执行了一个单例模式中的方法')

    }

  }

  if(window)

  window.nameSpace = nameSpace||{}

})(window,undefined)

9.网上看到的对于遮罩层的封装

var createMask = function(){
   var mask;
   return function(){
     return mask || ( mask = document.body.appendChild( document.createElement('div') ) )
   }
  }()

js中的单例模式的更多相关文章

  1. JS中的单例模式及单例模式原型类的实现

    单例模式 单例模式的定义: 保证一个类只有一个实例,并提供一个访问它的全局访问点 通过一个简单的例子来了解单例模式的作用: class Div { constructor() { return doc ...

  2. js中State模式的解析及运用

     状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...

  3. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

  4. js中静态函数与变量

    一 私有变量和函数 js中没有概念上的私有,公有也没有静态和非静态相关概念,有的只能是通过作用于来模仿 函数的块级作用域使得函数内部成员可以不被外部所访问,比如我们使用块级作用于定义一个类 //定义一 ...

  5. js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...

  6. [JS设计模式]:单例模式(1)

    什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...

  7. [js]js中原型的继承

    js继承01 思路: 单例/工厂/构造函数--演进到原型 搞清原型结构 原型继承 模拟系统原型继承 实现自己的继承 观察原型继承特点 演进到原型链这一步 //单例模式: 防止变量名冲突: // 思路: ...

  8. JS中的发布订阅模式

    一. 你是如何理解发布订阅模式的 JS中的设计模式: 单例模式:处理业务逻辑 构造原型模式:封装类库,组件,框架,插件等 类库:jQuery 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业 ...

  9. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

随机推荐

  1. 【Flask】报错解决方法:AssertionError: View function mapping is overwriting an existing endpoint function: main.user

    运行Flask时出现了一个错误, AssertionError: View function mapping is overwriting an existing endpoint function: ...

  2. GitLab实战操作指南

    一.Git原理 1.Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 2.Git有什么特点? 简单来说就是:高端大气上档次! 3.GIt与SVN区别 SVN管理: 属于集中式 ...

  3. 将mysql中的一张表中的一个字段数据根据条件导入另一张表中

    添加字段:alter table matInformation add facid varchar(99)  default ''; 导入数据:update matInformation m set ...

  4. 如何在html显示当前时间

    下边那个是一直快速跳转的 <!doctype html>  <html>  <head>  <meta charset="utf-8"&g ...

  5. Python3学习笔记(urllib模块的使用)

    转载地址:https://www.cnblogs.com/Lands-ljk/p/5447127.html 1.基本方法 urllib.request.urlopen(url, data=None,  ...

  6. Docker动态给容器Container暴露端口

    查看Container的IP地址 docker inspect <container name or id>| grep IPAddress 查看Container的映射的端口 docke ...

  7. 洛谷 P2678 & [NOIP2015提高组] 跳石头

    题目链接 https://www.luogu.org/problemnew/show/P2678 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布 ...

  8. java ReentrantLock 公平锁 非公平锁 测试

    package reentrantlock; import java.util.ArrayList; import java.util.concurrent.locks.ReentrantLock; ...

  9. oh-my-zsh: 让终端飞

    上一次推文写了JupyterLab:程序员的笔记本神器,介绍的是如何在web端打造一个便捷的开发环境,发出后反响还不错 因此我决定再写几篇能提升程序员工作以及学习效率的文章,如果能形成一个系列那是最好 ...

  10. [原创]基于Zybo SDIO WiFi模块调试

    采用的是RTL8189 SDIO 模块,介绍如下 The Realtek RTL8189ES-VB-CG is a highly integrated single-chip 802.11n Wire ...