《JavaScript设计模式与开发》笔记 7.单例模式
废话一箩筐就这个原来
var instance;
return function asdf(name){
if(!this.instance){
this.instance = new asdf(name);
}
};
- 1.实现单例模式
- 1.第一种单例模式
- 2.第二种单例模式
- 2.透明单例模式
- 3.用代理模式实现单例模式
- 4.JavaScript中的代理模式
- 5.惰性单例
- 6.通用的惰性单例
1.实现单例模式
1.第一种单例模式
var Singleton = function(name){
this.name = name;
this.instance = null;
}
Singleton.prototype.getName = function(){
console.log(this.name);
}
Singleton.getInstance = function(name){
if(!this.instance){
this.instance = new Singleton(name);
}
return this.instance;
}
var a = Singleton.getInstance('slash');
var b = Singleton.getInstance('Axxxxl');
console.log(a===b);
2.简单变形
var Singleton = function(name){
this.name = name;
}
Singleton.prototype.getName = function(){
console.log(this.name);
}
Singleton.getInstance = (function(){
var instance = null;
return function(name){
if(!instance){
instance = new Singleton(name);
}
}
})()
var a = Singleton.getInstance('slash');
var b = Singleton.getInstance('roXXXse');
console.log(a===b);
2.透明单例模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var createDiv = (function(){
var instance;
var createDiv = function(html){
if(instance){
return instance;
}
this.html = html;
this.init();
return instance = this;
}
createDiv.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
return createDiv;
})();
var a = new createDiv("Slash");
var b = new createDiv("Axxxxxl");
console.log(a===b);
alert(a===b);
</script>
</html>
观察现在的Singleton构造函数
var createDiv = function(html){
if(instance){
return instance;
}
this.html = html;
this.init();
return instance = this;
}
在这段代码中,CreateDiv的构造函数实际上负责了两件事情。第一个是创建对象和执行初始化init方法;第二个保证只有一个对象,虽然我们目前还没有接触过“单一职责元原则”的概念 但可以明确的是,这是一种不好的做法,但至少看起来很奇怪。
假如我们某天需要利用这个类,在页面中创建千千万的div,既要让这个类从单例类编程一个普通的可产生多个实例的类,那么我们必须改写CreateDiv这个类
3.用代理实现单例模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var CreateDiv = function(html){
this.html = html;
this.init();
}
CreateDiv.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
};
var ProxySingletonCreateDiv = (function(){
var instance;
return function(html){
if(!instance){
instance = new CreateDiv(html);
}
return instance;
}
})();
var b = new ProxySingletonCreateDiv("Axxxl");
var a = new ProxySingletonCreateDiv('Slash');
alert(a===b);
</script>
</html>
4.javascript中的单例模式
1.命名空间
上面的几种单例模式会造成全局变量,但可以适当地使用命名空间,并不会杜绝全局变量,但可以减少全局变量。 最简单的命名空间
var namespace1 = {
a:function(){
console.log(1);
},
b:function(){
console.log(2);
}
}
把a和b都定义为namespace的属性,这样可以减少变量和全局作用域打交道的机会,但是我们还可以动态地创建命名空间,代码如下:
var myApp = {};
myApp.namespace = function(name){
var parts = name.split('.');
var current = myApp;
for(var i in parts){
if(!current[parts[i]]){
current[parts[i]] ={};
}
current = current[parts[i]];
}
}
myApp.namespace('event');
myApp.namespace('dom.style');
console.log(myApp);
var myApp ={
event:{},
dom:{
style:{}
}
}
2.使用闭包封装私有变量
这种方法把一些变量封装在闭包的内部,值暴漏一些借口跟外界通信
var user = (function(){
var _name = 'sven',
_age = 30;
return {
getUserInfo:function(){
return _name+'-'+_age;
}
}
})();
我们用下划线来约定私有变量_name 和_age 他们被封装在闭包生产的作用域中,外部是访问不到这两个变量的(废话!),这就避免了全局的命令污染
5.惰性单例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="loginBtn">登录</button>
</body>
<script>
var loginlayer = (function(){
var div = document.createElement(div);
div.innerHTML="我是登录悬浮窗";
div.style.display='none';
document.body.appendChild(div);
return div;
})(); //开始执行
document.getElementById("loginBtn").onclick = function(){
loginlayer.style='block';
}
</script>
</html>
这种方式有一个种问题,也许我们根本不需要登录悬浮窗,因为登录悬浮窗总是一开始就创建好了,那么很有可能将浪费一些DOM节点。 现在改写代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="loginBtn">登录</button>
</body>
<script>
var loginlayer = function(){
var div = document.createElement(div);
div.innerHTML="我是登录悬浮窗";
div.style.display='none';
document.body.appendChild(div);
return div;
};
document.getElementById("loginBtn").onclick = function(){
loginlayer = createloginlayer(); //创建节点
loginlayer.style='block';
}
</script>
</html>
虽然简单的改写了一下闭包,但是去了单例的特性,当我们每次点击登录按钮的时候,都会创建一个新的登录悬浮窗DIV,虽然我们可以再点击悬浮窗上的关闭按钮式把这个悬浮窗从页面中删除掉,但这样频繁地创建和删除节点是不合理的 简单判断是否有DIV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="loginBtn">登录</button>
</body>
<script>
var createloginlayer = function(){
var div;
return function(){
if(!div){
div = document.createElement(div);
div.innerHTML="我是登录悬浮窗";
div.style.display='none';
document.body.appendChild(div);
}
return div;
}
}();
document.getElementById("loginBtn").onclick = function(){
loginlayer = createloginlayer(); //创建节点
loginlayer.style='block';
}
</script>
</html>
6.通用的惰性单例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="loginBtn">登录</button>
<button id="div1">叫我退出页面好了</button>
</body>
<script>
var getSingle = function(fn){
var result;
return function(){
return result || fn.apply(this,arguments);
}
}
var createLoginLayer = function(){
var div = document.createElement(div);
div.innerHTML="我是登录悬浮窗";
div.style.display='none';
document.body.appendChild(div);
return div;
};
var createLoginiframe = function(){
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
}
// var createSingleLoginlayer = getSingle(createLoginLayer);
var createSingleLoginlayer = getSingle(createLoginiframe);
document.getElementById("loginBtn").onclick = function(){
loginlayer = createSingleLoginlayer(); //创建节点
loginlayer.src="http://www.baidu.com";
}
</script>
</html>
《JavaScript设计模式与开发》笔记 7.单例模式的更多相关文章
- 《JavaScript设计模式与开发实践》-- 单例模式
详情个人博客:https://shengchangwei.github.io/js-shejimoshi-danli/ 原来只是听过设计模式,却不晓得其真面目,今天,终于步入了设计模式学习的殿堂,想想 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- 《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...
- 《Javascript设计模式与开发实践》--读书笔记
第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
- 《javascript设计模式与开发实践》--- (单一职责原则)
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- JavaScript设计模式与开发实践 - 策略模式
引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
- 《JavaScript设计模式》读书笔记——灵活的语言
最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...
随机推荐
- 广播多路访问链路上的OSPF
实验要求:配置OSPF 拓扑如下: 配置如下: R1 enableconfigure terminal interface l0ip address 192.168.10.1 255.255.255. ...
- npm http-server ubuntu
Node.js中http-server的使用 使用阿里的npm镜像 国外的npm太慢了.查看一下自己使用的源: npm config get registry 1 应该显示https://regist ...
- Android全局可调试(ro.debuggable = 1)的一种另类改法
网上流传比较多的,是重打包boot.img.读aosp的init进程源码,发现通过patch init进程也可以实现相同目的. 首先看一下init进程对ro只读属性的检查: /* property_s ...
- HttpClient(4.5.x)正确的使用姿势
前言: httpclient(4.5.x)默认是启动连接池的, 其降低时耗(避免连接初3次握手, 以及关闭4次握手的消耗), 显著提升高并发处理能力(大量减少time_wait), 确实扮演了重要的角 ...
- tarfile — Read and write tar archive files
参考: https://docs.python.org/2/library/tarfile.html http://www.jianshu.com/p/bbad16822eab #解压文件tarfil ...
- OpenCV2类批量处理文件夹及文件图像 及批量处理后保存到txt文件
//采用windows控制台实现计算文件夹中对象总数以及批量读取对象 //#include <afx.h> //和windows.h是一样的作用 #include <opencv2/ ...
- ODOO v10.0 自动生成财务凭证的科目设置
ODOO v10.0 自动生成财务凭证的科目设置 可以在产品类别及产品档案里设置,建议在产品类别下设置,方便维护. 项目 设置为(具体科目以公司科目表为主) 对应作用业务 Income Account ...
- php基础-3
php的数据类型 字符串 字符串的声明:$str = "aaa"; 字符串的方法 strpos(str, find_str):该方法在一个字符串中查找需要查找的字符串,并回来该字符 ...
- 20165313Java实验四 Android程序设计
实验报告封面 课程:Java程序设计 班级:1653班 姓名:张晨晖 学号:20165313 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 15:25 实验序号:实验四 ...
- 《DSP using MATLAB》Problem 6.5
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...