javascript设计模式8
桥接模式(将抽象与其实现隔离开来,以便二者独立变化)
function sendInfo(element){
var id=element.id;
ajax("GET","info.json?id="+id,function(result){
//...
});
//...
};
上例的ajax请求与sendInfo函数可以拆分开
function sendInfo(element){
var id=element.id,
callback=function(result){
//...
};
sendInfoBridge(id,callback);
}
function sendInfoBridge(id,callback){
ajax("GET","info.json?id="+id,function(result){
callback(result);
});
}
组合模式(用一条命令在多个对象上激发复杂的或递归的行为),组合对象和叶对象
条件一:存在一批组织成某种层次体系的对象
条件二:希望对这批对象或其中一部分对象进行操作
组合对象
var Composite=new Interface('Composite',['add','remove','getChild']);
var GalleryItem=new Interface('GalleryItem',['hide','show']);
var DynamicGallery=function(id){
this.children=[];
this.element=document.createElement('div');
this.element.id=id;
this.element.className='dynamic-gallery';
}
DynamicGallery.prototype={
add:function(child){
Interface.ensureImplements(child,Composite,GalleryItem);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove:function(child){
for(var node,i=0;node=this.getChild(i);i++){
if(node==child){
this.children.splice(i,1);
break;
}
}
this.element.removeChild(child.getElement());
},
getChild:function(i){
return this.children[i];
},
hide:function(){
for(var node,i=0;node=this.getChild(i);i++){
node.hide();
}
this.element.style.display='none';
},
show:function(){
this.element.style.display='block';
for(var node,i=0;node=this.getChild(i);i++){
node.show();
}
},
getElement:function(){
return this.element;
}
};
叶对象
var GalleryImage=function(src){
this.element=dicument.createElement('img');
this.element.className='gallery-image';
this.element.src=src;
}
GalleryImage.prototype={
add:function(){},
remove:function(){},
getChild:function(){},
hide:function(){
this.element.style.display='none';
},
show:function(){
this.element.style.display='';
},
getElement:function(){
return this.element;
}
};
var topGallery=new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var vacationPhotos=new DynamicGallery('vacation-photos');
for(var i=0;i<30;i++){
vacationPhotos.add(new GalleryImage('/img/vac/image-'+i+'.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();
javascript设计模式8的更多相关文章
- 《JavaScript设计模式 张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- Javascript设计模式学习一
学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 常用的Javascript设计模式
<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...
- Javascript设计模式(摘译)
说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1) creational -- 主要关注对象创建 Creational des ...
- JavaScript设计模式学习笔记
1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...
- JavaScript设计模式:读书笔记(未完)
该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...
随机推荐
- MVC4多语言IHttpModule实现
最近项目需要多语言环境了. 由于项目页面较多,逐个Action去读取资源文件不大现实.就想到了使用 IHttpModule配合MVC的路由规则来实现. 首先创建以个mvc4的应用程序,添加资源文件夹( ...
- C++11的for循环,以及范围Range类的实现
C++11支持range-based for循环.这是一个很方便的特性,能省挺多代码.以下代码就能很方便的遍历vector中的元素,并打印出来: 1 2 3 4 5 6 7 8 std::vector ...
- zoj 3380 Patchouli's Spell Cards 概率DP
题意:1-n个位置中,每个位置填一个数,问至少有l个数是相同的概率. 可以转化求最多有l-1个数是相同的. dp[i][j]表示前i个位置填充j个位置的方案数,并且要满足上面的条件. 则: dp[i] ...
- linux ubuntu删除引导 grub出现错误解决方案
使用u盘启动PE系统 找到diskgenius软件,点击: 硬盘->重建主引导记录
- FF浏览器来帮助我们录制脚本
有时我们录制一个页面的脚本,我们需要知道这个页面哪些请求是耗时最大的?这个时候FF浏览器的网络分析功能就可以派上用场了,打开火狐浏览器按F12: 点击重新载入,可以看到下面的信息: 看到最耗时的操作了 ...
- MAC OS Nginx php-fpm相关
Nginx 命令 sudo nginx // 启动Nginx #重新加载|重启|停止|退出 sudo nginx -s reload|reopen|stop|quit #上传文件限制更改: 进入ngi ...
- hadoop2.2.0安装
64位编译和安装 http://blog.csdn.net/licongcong_0224/article/details/12972889 http://blog.csdn.net/w1377026 ...
- node.js模块之http模块
如果你想向远程服务器发起HTTP 连接,Node 也是很好的选择.Node 在许多情景下都很适合使用,如使用Web service,连接到文档数据库,或是抓取网页.你可以使用同样的http 模块来发起 ...
- xp宿主机和VMware下Ubuntu12.04共享文件夹
VMware下Windows与Linux共享文件的方法有很多,比如Samba等等,我这里介绍简单地通过设置VMware来达到共享的目的. 打开VMware的设置,在"options" ...
- Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation(贪心)
题目:http://codeforces.com/contest/389/problem/C 题意:给n个箱子,给n个箱子所能承受的重量,每个箱子的重量为1: 很简单的贪心,比赛的时候没想出来.... ...