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. cocos2dx 开启控制台

    打开 SimulatorWin.cpp 把这句启用: #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 这句本来因为#define隐藏了

  2. Python———pandas数据处理

    pandas模块 更高级的数据分析工具基于NumPy构建包含Series和DataFrame两种数据结构,以及相应方法 调用方法:from pandas import  Series, DataFra ...

  3. Python迭代器、生成器

    迭代器 iterator # 只要是能被for循环的数据类型 就一定拥有__iter__方法 # 迭代器多了的方法 print(set(dir([].__iter__()))-set(dir([])) ...

  4. 企业SVN版本控制服务器搭建

    服务器端配置 svn安装部署 查看系统环境 cat /etc/redhat-release uname -a 安装svn yum install -y subversion 配置并启动svn 建立sv ...

  5. Spark SQL UDF示例

    UDF即用户自定函数,注册之后,在sql语句中使用. 基于scala-sdk-2.10.7,Spark2.0.0. package UDF_UDAF import java.util import o ...

  6. BeautifulSoup4库

    BeautifulSoup4库 和lxml一样,Beautiful Soup也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML数据.lxml只会局部遍历,而Beautif ...

  7. html_之css

    css 有三种形式的写法: 直接在标签里写入style样式 在<head></head>里写入<style></style>样式 直接创建.css 文件 ...

  8. mysql存储过程游标使用

    BEGIN DECLARE idCount int DEFAULT 0;-- 定义查询的id count DECLARE nameCount int DEFAULT 0;-- 统计相同名字合计 DEC ...

  9. html动画实现

    1.目标动图 2.主要代码 <p><img src="http://img.baidu.com/hi/jx2/j_0043.gif"/><img sr ...

  10. 学习easyui的小伙伴有福利了

    easy-ui常用属性和方法 css定义与js定义两个版本