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. vertical-align作用的前提++图片不上下居中

    5.3.2 vertical-align作用的前提 很多人,尤其CSS新手,会问这么一个问题:“为什么我设置了vertical-align却没任何作用?” 因为vertical-align起作用是有前 ...

  2. Java版InfluxDB工具类

    InfluxDB工具类 package com.influxdb.test; import java.util.Map; import org.influxdb.InfluxDB; import or ...

  3. 分割字符串和截取字符串:split 和substring

    //按“,”截取字符串 String id="123123,234534,453456"; String[] idArry = id.trim().split(",&qu ...

  4. zabbix 修改为UTC 时区的配置

    修改php.ini中的date.timezone = UTC还确实是正解,修改后要重新启动apache,另外你应该用phpinfo()检查一下你修改php.ini和phpinfo()中指明的当前php ...

  5. [原创]免固件开发USB2.0 FPGA方案 速度40Mbyte/s+

    USB 2.0接口,实测速度40Mbyte/s: 一个接口实现两种功能(USB2.0+FPGA配置): 免固件开发: 完整的FPGA代码,即拿即用: FPGA逻辑工程师开发USB接口福音: 平台可移植 ...

  6. python常见排序算法解析

    python——常见排序算法解析   算法是程序员的灵魂. 下面的博文是我整理的感觉还不错的算法实现 原理的理解是最重要的,我会常回来看看,并坚持每天刷leetcode 本篇主要实现九(八)大排序算法 ...

  7. .net core Swagger 过滤部分Api

    因为场景需要,要把某些特定的api过滤掉,不允许显示在swaggerui里, 具体操作步骤: 分为三步 步骤1: 创建Attribute    /// <summary> /// igno ...

  8. vue-router路由模式

    什么是单页应用? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web ...

  9. java变量和javascript变量之间的传递

    java代码是运行在服务器上的,返回的值只是静态的存在于页面,而javascript是脚本语言,是运行在客户端的!它们是两种完全不同的语言,变量不能直接进行交换,但是通过一定的方式,变量可以传递. j ...

  10. 浅谈Java反射

    什么是反射? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语 ...