javascript 设计模式1----单例模式
定义:保证一个类仅有一个实例,并提供一个访问的全局接口:
就是收:当我们 var a = new a(); var a1 = new a()是;a与a1是相等的。怎么实现呢,就是第一次实例化。第二不在实例,只是返回第一次的实例化:
附上通用的惰性单例思路:
Singleton.getInstance = (function () {
var instance = null;
return function (name) {
if( !instance){
instance = new Singleton(name);
}
return instance;
}
})()
一个书上的登录框的例子:
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('div1').onclick = function () {
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
}
通用的惰性单例:
var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply( this,arguments));
}
}
var createLoginLayer = function () {
var div = document.createElement('div');
div.innerHTML = 'WOSHI DENGLU';
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('div1').onclick = function () {
var loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';
}
//在创建一个唯一的iframe
var createSingleframe = getSingle(function () {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
return iframe;
})
document.getElementById('div1').onclick = function () {
var loginLayer = createSingleframe();
loginLayer.src = 'http://baidu.com'
}
javascript 设计模式1----单例模式的更多相关文章
- JavaScript设计模式之单例模式【惰性单例】
在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路.掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言.但实际上由于语言的特性不同,往往在实现的时候会有不少 ...
- JavaScript设计模式_01_单例模式
最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...
- 再起航,我的学习笔记之JavaScript设计模式10(单例模式)
单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...
- [JavaScript设计模式]惰性单例模式
惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...
- JavaScript设计模式,单例模式!
单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...
- 第一章 --- 关于Javascript 设计模式 之 单例模式
首先我们对单例模式先进行理论上的讲解,接下来,我们再通过具体的代码示例,来讲解,这个单例模式的使用场景和这种模式的优缺点 (这个系列的所有关于设计模式的都是面向Javascript) 一.理论定义: ...
- JavaScript设计模式之单例模式
一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...
- 「设计模式」JavaScript - 设计模式之单例模式与场景实践
单例介绍 上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手, 所以这次我打算换一种方式~~从简单的场景中来看单例模式, 因为Java ...
- JavaScript 设计模式之单例模式
一.单例模式概念解读 1.单例模式概念文字解读 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在Ja ...
- JavaScript设计模式-7.单例模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- C++中嵌入Lua脚本环境搭建
第一步(环境准备工作): 工具: ●LuaForWindows_v5.1.4-46.exe傻瓜式安装. 作用:此工具可以在windows环境下编译运行Lua脚本程序.安装完成后会有两个图标:Lua和S ...
- el 表达式 和 ognl表达式
el (expression language) el 基础操作符 el 能够隐含对象(就是可以直接访问的) el 的两种使用方式,第二种好像在jsp中没有什么用,主要用于jsf el能够访问的对象( ...
- LoadRunner11.00入门教程出现的问题
问题1.打不开浏览器 解决办法:打开浏览器工具--Internet 选项--高级--取消启用第三方浏览器扩展. 顺带解决了,有两个浏览器问题. 两个浏览器:一个是自带的IE,一个是其他软件插件. 解决 ...
- delete all untracked files
git clean -f git clean -fdx f file d directory x .gitignore
- 让ecshop用户名、手机号、email登陆方法
让ecshop用户名.手机号.email登陆方法, 仅适用于没有做过任何平台整合的ECSHOP网站 修改文件: 1.includes/modules/integrates/ecshop.php ...
- Extjs 中column的renderer使用方法
renderer: function(value, cellmeta, record, rowIndex, columnIndex, store) { if (record.get('productT ...
- Android 线程的正确使用姿势
进程优先级(Process Priority) 线程寄宿在进程当中,线程的生命周期直接被进程所影响,而进程的存活又和其优先级直接相关.在处理进程优先级的时候,大部分人靠直觉都能知道前台进程(Foreg ...
- Java jdbc 连接oracle
import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManager; import java.sql.S ...
- JSONP使用笔记
JSONP JSONP是实现跨域GET请求的一种方法, 原理上利用script标签可以动态加载JS文件, 将不同源站点的JSON数据加载到本网站来,如果给定回调函数,将回调函数名传递到服务器端, 在服 ...
- 移动web开发框架
纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族 ...