JavaScript设模式---单例模式
单例模式也称为单体模式,其中:
1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。
逻辑单元中的代码通过单一的变量进行访问。
2,三个特点:
① 该类只有一个实例;
② 该类自行创建该实例,即在该类内部创建自身的实例对象;
③ 向整个系统公开这个实例接口
3,单体模式有四种基本形式:
第一种,最简单的单体,只被实例化一次 我简记为json对象
(1)基本结构
var userInfo={//已经自行被实例化 其实是一json对象
name:"测试名称",
dept:"测试PD",
code:"测试PD001",
getName:function () {
return "测试"
}
};
(2)使用方法与json的使用方法一致:使用点 " . "的方式访问
alert(userInfo.getName())
单体模式用来划分命名空间,并将一群相关的属性和方法组织到一起的简单介绍:
var comm={};//一个空对象
comm.userInfo={//空对象下的第一个命名空间
name:"命名空间1下的",
code:""
}
comm.funcInfo={//空对象下的第二个命名空间
funcName:"命名空间2下的",
code:""
}
总结:该种方式可以看出对象的变量值不是动态加载的,而且对象没有显示初始化,由此有了第二种单体模式。
第二种,具有局部变量的单体
要求:模拟一个使用ajax从数据库加载数据的过程
(1)简单模拟一下ajax过程
//模拟一个Ajax操作
function Ajax() {};//空对象
//静态函数 模拟作为从数据库取值 此处值写死的
Ajax.request=function (url,fn) {
//默认永远回调成功
if(true){
fn("测试值1","测试值2")
}
}
(2)在最简单的单体中出现了数据不是动态从数据库加载的,而且没有显示实例化对象,此处使用闭包原理解决上述问题
//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
var userInfo=(function () {
//(1)利用闭包使单体有自己的私有局部变量
var name="";
var code="";
//(2)利用ajax访问数据库取到数据
Ajax.request("url",function (n,c) {//由于模拟的ajax中只是简单传递参数,所以第一个参数可以任意
name=n;
code=c;
})
//(3)单体实现私有变量的赋值
return {
name:name,
code:code
}
})()
(3)使用该种方式的单体,不用实例化 可以直接返回一个单体 【因为使用userInfo时,直接return一个单体回来】
alert(userInfo.name);
总结:
(1)优点,灵活
(2)弊端:return 单体数据量比较大时,都需要从数据库取数据,每次加载都要执行,会影响程序性能。由于该种方式每次加载都要直接执行,return单体数据量大时会影响呈现的性能,于是有了第三种单体模式。
第三种,惰性单体 提供的解决方案为:调方法时才实例化单体,而不是加载时就执行。
于是在第二种的基础上进行修改为,
(1)模拟ajax从数据库加载数据不变
//模拟一个Ajax操作
function Ajax() {}
//静态函数 模拟作为从数据库取值
Ajax.request=function (url,fn) {
//默认永远回调成功
if(true){
fn("测试值1","测试值2")
}
}
(2)动态从数据库加载数据 ,显示实例化,使用一个函数(Init())封装产生单体的函数,通过一个私有变量来返回函数(Init())
//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
var UserInfo=(function () {
var userInfo="";//私有变量 function Init() {//在产生单体方式为包裹一层初始化函数
//利用闭包使单体有自己的私有局部变量
var name="";
var code="";
//利用ajax访问数据库取到数据
Ajax.request("url",function (n,c) {
name=n;
code=c;
})
//单体
return {
name:name,
code:code,
}
} return {//此时开始调用初始化函数实现单体的产生
getInstance:function () {
if(userInfo){//userInfo=""为false
return userInfo;
}else {
userInfo=Init();
return userInfo;
}
}
} })()
(3)使用 访问UserInfo对象里面的获取初始化获取对象的函数(getInstance())
alert(UserInfo.getInstance().name);
总结:使用惰性单体实质上是通过对产生单体的函数进行再一次封装(使用函数封装),再在通过该类提供的唯一接口(getInstance()方法)访问初始化单体 的函数。
第四种,分支单体
简单的用处:做Ajax的时候根据不同的浏览器获得不同的XHR。(将浏览器之间的差异封装到动态方法,适用于解决浏览器之间的差异。)
比如下面一个简单的例子:在电脑不同分辨率的情况下初始化不一样的界面。(这里只是弹窗显示而已)
(1)获取电脑的分辨率
//得到机器的分辨率
var screenWidth=window.screen.width;//width
var screenHeight=window.screen.height;//height
(2)进行分支判断处理 ,将差异封装到动态方法中
var portalInfo=(function () {
//单体
var $1280_1024={info:'1,2,3,5'}//单体1
var $1366_768={info:'4,2,1,2'}//单体2
//动态图选择浏览器的差异结果(这里是分辨率)
if(screenWidth==){
return $1280_1024;//返回单体进行初始化
}else if(screenWidth==){
return $1366_768;//返回单体进行初始化
}else {
throw new Error("请检查你当前的电脑分辨率")
}
})();
(3)使用 ,获取最终的结果
alert(portalInfo.info)//我的结果为4,2,1,2 这是由于我的电脑的分辨率为1366*768
总结一下,对于分支单体有一个缺点:分支中,单体1和单体2都被创建了,并保存在内存中了,但只用到一个。需要在 计算时间 和 占用内存 两者中取舍。
JavaScript设模式---单例模式的更多相关文章
- JavaScript严谨模式(Strict Mode)
下面的内容翻译自It’s time to start using JavaScript strict mode,作者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在 ...
- Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)
JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...
- JavaScript中的单例模式
单例模式 在JavaScript中,单例(Singleton)模式是最基本又最有用的模式之一.这种模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一的变量进行访问.确保单例 ...
- Javascript 严格模式 strict mode(转)
一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...
- JavaScript组合模式---引入
首先:使用一个例子来引入组合模式,需求为(1)有一个学校有2个班(一班,二班)(2)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)(3)学校计算机教室有限,每一个小组分着来上课 然后:根 ...
- JavaScript设计模式,单例模式!
单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...
- javascript运行模式:并发模型 与Event Loop
看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...
- Javascript原型模式总结梳理
在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
随机推荐
- 教你管理SQL备份与恢复系列(1-20)
原链接:https://bbs.51cto.com/thread-1147908-1.html 教你备份与恢复数据库,直接下面下文档吧. 教你备份与恢复数据库(1)事务 http://bbs.51ct ...
- lzugis—搭建属于自己的小型的版本号控制SVN
版权声明:本文为LZUGIS原创文章,未经同意不得转载. https://blog.csdn.net/GISShiXiSheng/article/details/28643575 对于不了解SVN的同 ...
- 自定义ionic弹出框
<img width="64" height="64" src="img/timg.jpg" style="border-r ...
- 海信电视 LED55K370 升级固件总结【含固件下载地址】
最早电视买回来,感觉垃圾软件太多,root后,删软件不小心删除了桌面,导致没桌面. 用ADB装了点软件,凑合可以用. 后来装了悟空遥控,然后装了沙发桌面,不影响使用了. 最近海信不停推送更新系统,改手 ...
- 【三】MongoDB文档的CURD操作
一.插入文档 使用insert方法插入文档到一个集合中,如果集合不存在创建集合,有以下几种方法: db.collection.insertOne({}):(v3.2 new) #插入一个文档到集合中 ...
- Redis高级进阶(二)
一.消息通知 在一些网站上,经常会有一些发布/订阅或者邮件订阅的功能,尤其一些博客上.其实这种问题很常见,当页面需要进行如发送邮件.复杂的计算时会阻塞页面的渲染.为了避免用户等待太久,应该使用其他进程 ...
- 20145229吴姗珊 《Java程序设计》第5周学习总结
20145229吴姗珊 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 1.设计错误对象都继承自java.lang.Throwable类 2.Java中所有错误都会 ...
- <linux是怎么跑的?>傻瓜视角看linux引导启动过程
每天开机关机,除了“等”之外,你得了解你的操作系统开机的时候真正做了什么? 一. 书上都是这么讲的 CPU自身初始化:硬件初始工作,以PC/IP寄存器跳转到BIOS首地址为结束标志. ->加电自 ...
- 图文了解 Kafka 的副本复制机制
让分布式系统的操作变得简单,在某种程度上是一种艺术,通常这种实现都是从大量的实践中总结得到的.Apache Kafka 的受欢迎程度在很大程度上归功于其设计和操作简单性.随着社区添加更多功能,开发者们 ...
- python第八篇:十分钟学会Flask
什么是Flask Flask是一个基于Python并且依赖于Jinja2模板引擎和Werkzeug WSGI服务的一个微型框架 Flask中包含一个轻量级的web 服务器主要用于在开发阶段测试使用 F ...