javascript中常见的三种开发模式
一、单例模式：
所谓单例模式，即保证一个类只有一个实例,并提供一个访问它的全局访问点。
<script type="text/javascript">
//一个类有某个实例，就用这个实例，没有的话，就新生成一个实例 var singleTon = (function(){
var _instance = null; function Foo(){
this.a = "**";
this.b = "**";
}
Foo.prototype.fn = function(){ } return {
getInstance:function(){
if(!_instance){
_instance = new Foo();
}
return _instance;
}
}
})();
console.log(singleTon.getInstance()==singleTon.getInstance()); </script>
单例模式实现弹出层：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="弹出层" /> <script type="text/javascript">
(function(){
var oBtn = document.getElementById("btn");
var _instance = null;
//创建弹窗类
function PopBox(){
this.node = document.createElement("div");
document.body.appendChild(this.node);
}
oBtn.onclick = function(){
if(!_instance){
_instance = new PopBox;
}
} })();
</script>
</body>
</html>
二、观察者模式：
所谓观察者模式，即（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
<script type="text/javascript">
var observer = {
regist:function(eventName,callback){
if(!this.obj){
this.obj = {};
}
if(!this.obj[eventName]){
this.obj[eventName] = [callback];
}else{
this.obj[eventName].push(callback);
} },
emit:function(eventName){
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i]();
}
}
},
remove:function(eventName,callback){
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length;i++){
if(this.obj[eventName][i]==callback){
this.obj[eventName].splice(i,1);
}
}
}
}
}; //购物车模块注册的事件
observer.regist("loginSucess",function(){
console.log("购物车模块发生改变");
});
//个人信息模块注册的事件
observer.regist("loginSucess",function(){
console.log("个人信息模块发生改变");
}); observer.emit("loginSucess");//
</script>
观察者模式常见面试题：
<script type="text/javascript">
var Event = {
// 通过on接口监听事件eventName
// 如果事件eventName被触发，则执行callback回调函数
on: function(eventName, callback) {
//你的代码 注册事件
if(!this.obj){
Object.defineProperty(this,"obj",{
value:{},
enumerabel:false
})
}
if(!this.obj[eventName]){
this.obj[eventName] = [callback];
}else{
this.obj[eventName].push(callback);
}
},
// 触发事件 eventName
emit: function(eventName) {
//你的代码 发布事件
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i](arguments[1]);
}
}
}
}; // 测试1
Event.on('test', function(result) {
console.log(result);
});
Event.on('test', function() {
console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test' // 测试2
var person1 = {};
var person2 = {}; Object.assign(person1, Event);
Object.assign(person2, Event); person1.on('call1', function() {
console.log('person1');
}); person2.on('call2', function() {
console.log('person2');
}); person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2' </script>
三、组合模式：
组合模式又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。
<script type="text/javascript">
//订单系统 票务系统 酒店系统 function Ticket(){ }
Ticket.prototype.create = function(){
console.log("创建了机票订单");
} function Hotel(){ }
Hotel.prototype.create = function(){
console.log("创建了酒店订单");
} function Order(){
this.orders = [];
}
Order.prototype.addOrder = function(order){
this.orders.push(order);
return this;
}
Order.prototype.create = function(){
for(var i = 0; i < this.orders.length; i++){
this.orders[i].create();
}
} var order = new Order();
order.addOrder(new Ticket()).addOrder(new Ticket())
.addOrder(new Hotel()); order.create();
</script>
javascript中常见的三种开发模式的更多相关文章
- APP的三种开发模式
转载于http://pleasureswx123.github.io/2014/09/15/APP%E7%9A%84%E4%B8%89%E7%A7%8D%E5%BC%80%E5%8F%91%E6%A8 ...
- ASP.NET的三种开发模式
前言 ASP.NET 是一个免费的Web开发框架,是由微软在.NET Framework框架中所提供的,或者说ASP.NET是开发Web应用程序的类库,封装在System.Web.dll 文件中.AS ...
- 《ASP.NET MVC4 WEB编程》学习笔记------Entity Framework的Database First、Model First和Code Only三种开发模式
作者:张博出处:http://yilin.cnblogs.com Entity Framework支持Database First.Model First和Code Only三种开发模式,各模式的开发 ...
- EF3:Entity Framework三种开发模式实现数据访问
前言 Entity Framework支持Database First.Model First和Code Only三种开发模式,各模式的开发流程大相径庭,开发体验完全不一样.三种开发模式各有优缺点,对 ...
- Entity Framework：三种开发模式实现数据访问
原文地址 http://blog.csdn.net/syaguang2006/article/details/19606715 前言 Entity Framework支持Database First. ...
- 请写出JavaScript中常用的三种事件。
请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- 实现JavaScript中继承的三种方式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承. 一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...
- .NET EF框架的安装、及三种开发模式
一.EF框架的安装: 要在VS(如Visual Studio 2012)中使用EF框架,就需要先进行安装. 我们需要给这个应用安装EntityFramework包,引入EF框架相关的内容,我们需要引入 ...
随机推荐
- oracle基础之游标的理解与使用
关于游标,首先要知道游标的定义. 游标,是内存中的一款区域,用来存放select的结果集 游标用来处理从数据库中检索的多行记录(使用select语句).利用游标,程序可以逐个的处理和遍历一次索引返回的 ...
- 个人总结4-dbutils总结
昨天学习了dbutils的使用方法,简化了使用的步骤,可以使用三四步就可以写出来,queryRunner的使用方法有了简单的了解,目前可以使用dbutils实现最简单的增删改查. 今天准备学习准备写登 ...
- SpringBoot 中解决跨域请求
CORS 理解 同源策略是web浏览器实现的一个重要的安全概念,它防止JavaScript代码对不同的来源(例如,不同的域)发出请求,而不是它所服务的来源.虽然同源策略有效地防止来自不同来源的资源,但 ...
- Java.lang 包 （包装类、String类、Math类、Class类、Object类）
Java 的核心 API(Application Programming Interface)是非常庞大的,这给开发者带来了很大的方便. java.lang 包是 Java 的核心类库,它包含了运行 ...
- nfs 安装配置
系统环境:centos 6.4 x86_64 minimal,记得是199个安装包. 两台机器(可以是虚拟机): 192.168.1.150--->a机器 192.168.1.11-----&g ...
- Python中替换的三种方法
strip() replace() re.sub() 1.replace()是python的内置函数,字符类型.replace(old,new) s1="你好2017&quo ...
- python连接数据库并插入数据
1.Python创建数据库 import MySQLdb try: conn = MySQLdb.connect( host="127.0.0.1", port=3306, use ...
- BZOJ1058:[ZJOI2007]报表统计(Splay,堆)
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...
- [CQOI2017]小Q的表格
题目 神仙题,神仙题 这是一道很适合盯着发呆的题目 看到这个规律 \[ f(a,b)=f(b,a) \] \[ b\times f(a,a+b)=(a+b)\times f(a,b) \] 这也没什么 ...
- Kali-linux绘制网络结构图
CaseFile工具用来绘制网络结构图.使用该工具能快速添加和连接,并能以图形界面形式灵活的构建网络结构图.本节将介绍Maltego CaseFile的使用. 在使用CaseFile工具之前,需要修改 ...