JavaScript设计模式-7.单例模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript高级语法7-单例模式</title>
</head>
<body>
<script>
/*单例模式在js中使用非常频繁：
* 1.普通单体
* 2.具有局部变量的强大单体
* 3.惰性单体
* 4.分支单体
*/
function demo1(){
//1.普通单体
(function(){
//通过确保单例对象只存在一个实例，就可以确信自己在所有的代码中使用的是全局资源
//例如用户登录后的信息可以用一个单体存储
var UserInfo = {
name:"zhangdan",
code:"0202022",
deptName:"PD",
deptCode:"PD001",
getName:function(){
return "十里河"
}
}
alert(UserInfo.getName());
//这就是一个最简单的单体，他用来划分命名空间，并且将一群相关的属性方法组织到一起。 可以用.来访问。
var comm = {}; //把两个单体组织到comm的命名空间下。
comm.UserInfo = {
name:"zhangdan",
code:"0202022",
}
comm.funcInfo = {
funcName:"",
funcCode:"",
}
//在大型项目下，存在着你写的代码还有你引用的外界的JS类库，还有其他同事写的代码和类库。
//我们通过单体模式就可以很好的区分，这点只能慢慢体会了。
})()
} function demo2(){
//2.具有局部变量的强大单体
(function(){
//模拟一个ajax操作
function Ajax(){}
Ajax.request = function(url,fn){
if(true){
fn("javascript","extjs");
}
}
//通过闭包的原理解决在上例中的问题 var UserInfo = (function(){
//利用闭包使单体拥有自己的私有局部变量
var name = '';
var code = '';
//利用ajax访问数据库来取得数据
Ajax.request("www.baidu.com",function(n,c){
name = n;
code = c;
})
return {
name:name,
code:code,
}
})();
alert(UserInfo.name+" "+UserInfo.code);
})()
} function demo3(){
//3.惰性单体
(function(){
//模拟一个ajax操作
function Ajax(){}
Ajax.request = function(url,fn){
if(true){
fn("demo3","extjs");
}
}
//通过闭包的原理解决在上例中的问题 var UserInfo = (function(){
var userInfo = "" //私有变量 function init(){
var name = '';
var code = '';
//利用ajax访问数据库来取得数据
Ajax.request("www.baidu.com",function(n,c){
name = n;
code = c;
})
return {
name:name,
code:code,
}
}
return {
getInstance:function(){
if(userInfo){
return userInfo;
}else{
userInfo = init();
return userInfo;
}
}
}
})();
alert(UserInfo.getInstance().name+" "+UserInfo.getInstance().code);
})()
} function demo4(){
//4.分支单体
/*
* 用处：在做ajax的时候根据不同的浏览器获得不同的xhr(XMLHttpRequest)
* 在不同分辨率的情况下初始化不一样的界面
*/
(function(){
//得到机器分辨率
var screenWidth = window.screen.width;
var screenHeight = window.screen.height; var portalInfo = (function(){
var $12801024 = {info:"1,2,3,5"}
var $1024768 = {info:"4,2,1,2"}
if(screenWidth ==1920){
return $12801024;
}else if(screenWidth ==1024){
return $1024768
}
})();
alert(portalInfo.info);
})()
/*
* 这些并非js的高深技术，是它的使用技巧。
*/
}
</script>
</body>
</html>
JavaScript设计模式-7.单例模式的更多相关文章
- 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 ...
随机推荐
- 在Ubuntu14.04上安装WordPress4搭建技术博客
1.安装LAMP环境 1.1 安装Apache2 1.2 安装MySQL5 1.3 安装PHP5 1.4 安装phpMyAdmin 2.初始化数据库 3.下载并配置WordPress 4.配置Apac ...
- [label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码
7 steps to better JavaScript 原文链接: http://www.creativebloq.com/netmag/7-steps-better-javascript-5141 ...
- HTML5 SSE 数据推送应用开发
javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- Luogu4551 最长异或路径
题目链接:戳我 emmmmmmmmmm异或一个数两次等于没有操作对吧...所以我们按照前缀的异或和,建一个01trie.....然后之后.....直接在树上贪心地找能和它每一位不一样的数....然后. ...
- MVC框架入门准备（二） - 语言包类与工厂模式
语言包类: 相关配置项 LANG_FOLDER : 语言包目录名,默认为Lang LANG_AUTO : 自动识别语言,默认为true DEFAULT_LANG : 默认语言,默认为zh-cn方法 取 ...
- js正则包含三位
var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\\d]+$)(?![A-Z_\\W]+$)(?![a-z\\d]+$)(?![a-z_\\W]+$) ...
- API接口文档范例
- AngularJS入门讲解4：多视图，事件绑定，$resource服务讲解
上一课,大家知道,手机详细模板我们没有写出来,使用的是一个占位模板. 这一课,我们先实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 为了实现手机详细信息视图,我们将会使用 ...
- 【bug】—— ios scroll 滚动穿透
BUG描述 在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp ...
- 使用unordered_map提升查找效率
在对网络数据包流(Flow)进行处理的时候,一开始为了简单使用了vector做为Flow信息的存储容器,当其中的元素达到几十万时,程序的执行速度让人无法忍受.已经对vector进行过合理的预先rese ...