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. [HTTP]POST报文中Content-Type对正文解析的影响

    概述 在POST请求中,理论上请求端程序可以发送任意格式报文正文,但是最好在报文头Content-Type字段标明正文的格式,方便接收端根据Content-Type正确处理正文. 传统HTML-for ...

  2. 从零开始搭建Android组件化框架

    问题 在已经开发过几个项目的童鞋,如果这时需要重新开发一个新项目,是否需要自己重新搭建框架呢,还是从老项目中拷贝粘贴? 我们是否可以封装一个底层的lib库,这个底层的公共基础库 包括了一些第三方库(如 ...

  3. STM32F0使用LL库实现SHT70通讯

    在本次项目中,限于空间要求我们选用了STM32F030F4作为控制芯片.这款MCU不但封装紧凑,而且自带的Flash空间也非常有限,所以我们选择了LL库实现.本篇我们将基于LL库采用模拟I2C接口的方 ...

  4. JavaScript代码规范

    变量名:驼峰命名法(首单词小写,后面每个单词首字母大写) firstName = "John"; lastName = "Doe"; price = 19.90 ...

  5. javascript--实现几个简单的操作

    利用JS实现几个简单的功能 --还有省市联动,商品的左右选择,表单的校验.但在学了jQuery之后,感觉这个没那么重要了,就不写了 表格的全选和全不选 表格的动态隔行换色 <!DOCTYPE h ...

  6. LoadRunner学习笔记(三)

    一.  LR如何监控Windows系统资源 一般通过LR进行压力测试,都需要实时监控服务端的系统资源,我们可以直接在远程连接服务器上面开启任务管理器 或者在控制面板中找到性能计数器来监控,但是为了在L ...

  7. python之地基(二)

    上一个阶段呢,我们已经学习了python的数据的类型.今天呢,我们来学习各种各样的运算符. 一.基本运算符 a = 10    b = 20 运算符号 描述 示例 + 加——两个对象相加 a+b 输出 ...

  8. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  9. 2018年最新JAVA面试题总结之框架(4)

    转自于:https://zhuanlan.zhihu.com/p/40098726 1.谈谈对spring框架的了解 ,spring有什么作用(IOC,AOP),spring的核心是什么?回答:Spr ...

  10. Python之copy模块

    概念 官方解释:Python中的赋值语句不复制对象,它们在目标和对象之间建立索引.对于可变项目或可变项目的集合,有时需要一个副本,以便可以更改一个副本而不更改其他副本.该模块提供通用的浅层和深层cop ...