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. 程序员不能忍996了!全民 fuck ,GitHub来说话

    前两天有个Github超级火的一个项目,在一小时之内星标上千. https://github.com/997icu/996.ICU   截至目前 这个项目start数量超过63K.Issues5000 ...

  2. 2小程序canvas使用,及一些坑,以及自己的一些小总结

    自己做了一个小程序,主要用于给头像加图标的那种,和qq似的,主要用canvas做的, 第一回用,掉了很多坑,所以今天总结一下自己所做的,如果大家有不理解的地方,欢迎提问:如果帮到大家的话,帮忙点个啥的 ...

  3. Uncaught TypeError: Cannot read property ‘split’ of undefined

    问题 :Uncaught TypeError: Cannot read property ‘split’ of undefinedat HTMLLIElement. split()切割的问题 因为遍历 ...

  4. Vue:window.onresize

    1. 添加属性screenHeight 和 timer. screenHeight: window.innerHeight timer: '' //  window.onresize函数频繁调用时,页 ...

  5. 【彻底解决】django migrate (mysql.W002) 【专治强迫症】

    cmd中使用python3 manage.py migrate命令,报warn,很多人都遇到过 解决办法: settings.py文件夹加入DATABASES['OPTIONS']['init_com ...

  6. 《剑指offer》和为S的两个数字

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  7. 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践

    - 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践 - 实验任务 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主 ...

  8. 2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践 一.实验要求 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...

  9. .asmx支持post请求或者get请求调用(WebService "因 URL 意外地以 结束,请求格式无法识别" 的解决方法)

    使用Post调用以asmx形式提供的webservice时,在本机调试没有调用问题.一旦部署至服务器后会提示如下信息: <html> <head> <title>因 ...

  10. qqluxc

    因为现在noi/noip都是无限栈 noi-linux开栈指令 ulimit -s 102400 这个是100mb 平衡树*2 维护序列 翻转 平衡树+1 维护区间+* t了3个点.. 注意打完标记 ...