js中的单例模式
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.网上看到的对于遮罩层的封装
js中的单例模式的更多相关文章
- JS中的单例模式及单例模式原型类的实现
单例模式 单例模式的定义: 保证一个类只有一个实例,并提供一个访问它的全局访问点 通过一个简单的例子来了解单例模式的作用: class Div { constructor() { return doc ...
- js中State模式的解析及运用
状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...
- JS中定义类的方法<转>
转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...
- js中静态函数与变量
一 私有变量和函数 js中没有概念上的私有,公有也没有静态和非静态相关概念,有的只能是通过作用于来模仿 函数的块级作用域使得函数内部成员可以不被外部所访问,比如我们使用块级作用于定义一个类 //定义一 ...
- js中的面向对象入门
什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...
- [JS设计模式]:单例模式(1)
什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...
- [js]js中原型的继承
js继承01 思路: 单例/工厂/构造函数--演进到原型 搞清原型结构 原型继承 模拟系统原型继承 实现自己的继承 观察原型继承特点 演进到原型链这一步 //单例模式: 防止变量名冲突: // 思路: ...
- JS中的发布订阅模式
一. 你是如何理解发布订阅模式的 JS中的设计模式: 单例模式:处理业务逻辑 构造原型模式:封装类库,组件,框架,插件等 类库:jQuery 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业 ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
随机推荐
- GitLab实战操作指南
一.Git原理 1.Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 2.Git有什么特点? 简单来说就是:高端大气上档次! 3.GIt与SVN区别 SVN管理: 属于集中式 ...
- Go命令官方指南【原译】
启动错误报告 编译包和依赖项 删除目标文件和缓存的文件 显示包或符号的文档 打印Go环境信息 更新包以使用新API Gofmt(重新格式化)包源 通过处理源生成Go文件 下载并安装包和依赖项 编译并安 ...
- flex布局学习
教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...
- html如何实现圆角的百度搜索框?
<form action="http://www.baidu.com/baidu" target="_blank"> <input type= ...
- LoadRunner运行错误集
1.error-27796错误解决方法: 在负载生成器的注册表HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/Tcpip/Parameters ...
- Angular Taskmgr 登录
一.登录module 1.先创建domain文件夹,在里面建一个user.model.ts的user领域对象. export interface User{ id?:string; email:str ...
- Taro音频createVideoContext组件无法调用方法
用createVideoContext的时候,是在一个组件中 声明后这个实例的方法全部都不能使用了 Taro.createVideoContext('myVideo', this) 需要加上第二个参数 ...
- Java类的继承与方法调用的一个小问题
public class Father { protected void server(int i){ switch (i){ case 1: methodone(); break; case 2: ...
- vue v-if 和 v-show 的知识点
1.v-if 的特点: 实现方式:根据后面数据的真假判断是否重新删除或创建元素. 性能消耗:有较高的切换性能消耗. 编译过程:v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的 ...
- linux环境下安装tcping工具测试访问超时
wget https://sources.voidlinux.eu/tcping-1.3.5/tcping-1.3.5.tar.gz tar zxvf tcping-1.3.5.tar.gz cd t ...