javascript设计模式7
链式调用
(function(){
function _$(els){
//...
}
_$.prototype={
each:function(fn){
for(var i=0,len=this.elements.length;i<len;++i){
fn.call(this,this.elements[i]);
}
return this;
},
setStyle:function(prop,val){
this.each(function(el){
el.style[prop]=val;
});
return this;
},
show:function(){
var that=this;
this.each(function(el){
that.setStyle('display','block');
});
return this;
},
addEvent:function(type,fn){
var add=function(el){
if(window.addEventListener){
el.addEventListener(type,fn,false);
}
else if(window.attachEvent){
el.attachEvent('on'+type,fn);
}
};
this.each(function(el){
add(el);
});
return this;
}
};
window.$=function(){
return new _$(arguments);
};
})();
从支持链式调用的方法获取数据
window.API=window.API||function(){
var name='Hello World';
this.setName=function(newName){
name=newName;
return this;
};
this.getName=function(callback){
callback.call(this,name);
return this;
};
};
var o2=new API;
o2.getName(console.log).setName('Meow').getName(console.log);
简单工厂
var BicycleShop=function(){};
BicycleShop.prototype={
sellBicycle:function(model){
var bicycle;
switch(model){
case'The Speedster':
bicycle=new Speedster();
break;
case'The Lowrider':
bicycle=new Lowrider();
break;
case'The Comfort Cruiser':
default:
bicycle=new ComfortCruiser();
}
interface.ensureImplements(bicycle,Bicycle);
bicycle.assemble();
bicycle.wash();
return bicycle;
}
};
把成员对象的创建工作交给外部对象
var BicycleFactory={
createBicycle:function(model){
var bicycle;
switch(model){
case'The Speedster':
bicycle=new Speedster();
break;
case'The Lowrider':
bicycle=new Lowrider();
break;
case'The Flatlander':
bicycle=new Flatlander();
break;
case'The Comfort Cruiser':
default:
bicycle=new ComfortCruiser();
}
Interface.ensureImplements(bicycle,Bicycle);
}
};
工厂模式(不是使用另外一个类或对象创建,而是使用子类创建)
var BicycleShop=function(){};
BicycleShop.prototype={
sellBicycle:function(model){
var bicycle=this.createBicycle(model);
bicycle.assemble();
bicycle.wash();
return bicycle;
},
createBicycle:function(model){
throw new Error('...')//抽象类,声明这个方法,但不实现这个方法,直接调用会报错
}
};
var AcmeBicycleShop=function(){};
extend(AcmeBicycleShop,BicycleShop);
AcmeBicycleShop.prototype.createBicycle=function(model){
var bicycle;
switch(model){
case'The Speedster':
bicycle=new AcmeSpeedster();
break;
case'The Lowrider':
bicycle=new AcmeLowrider();
break;
case'The Comfort Cruiser':
default:
bicycle=new AcmeComfortCruiser();
}
Interface.ensureImplements(bicycle,Bicycle);
return bicycle;
};
var GeneralProductsBicycleShop=function(){};
extend(GeneralProductsBicycleShop,BicycleShop);
GeneralProductsBicycleShop.prototype.createBicycle=function(model){
var bicycle;
switch(model){
case'The Speedster':
bicycle=new GeneralProductsSpeedster();
break;
case'The Lowrider':
bicycle=new GeneralProductsLowrider();
break;
case'The Comfort Cruiser':
default:
bicycle=new GeneralProductsComfortCruiser();
}
Interface.ensureImplements(bicycle,Bicycle);
return bicycle;
};
//需要时任意调用即可
//var bobCruisers=new GeneralProductsBicycleShop();
//var yourSecondNewBike=bobCruisers.sellBicycle('The Lowrider');
javascript设计模式7的更多相关文章
- 《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: 模式是一种可复用的解决方案,可用于解决 ...
随机推荐
- spring的配置模式与注解模式基础
“依赖注入”是spring的核心特征,在Web服务器(如Tomcat)加载时,它会根据Spring的配置文件中配置的bean或者是通过注解模式而扫描并装载的bean实例自动注入到Application ...
- klayge 4.2.0 编译vc9
CMake Error at CMakeLists.txt:442 (ADD_PRECOMPILED_HEADER): Unknown CMake command "ADD_PRECOMPI ...
- HDU 1004 ballons(map)
题意:输出颜色最多的那个颜色. 思路:水题一道. #include <iostream> #include <string> #include <map> #inc ...
- 【BZOJ 1038】 1038: [ZJOI2008]瞭望塔
1038: [ZJOI2008]瞭望塔 Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 ...
- 【POJ 3335】 Rotating Scoreboard (多边形的核- - 半平面交应用)
Rotating Scoreboard Description This year, ACM/ICPC World finals will be held in a hall in form of a ...
- 文件结束符和C\C++读取文件方式
http://www.cnblogs.com/cvbnm/articles/2003056.html 约定编译器为 gcc2/x86: 所以 char, unsigned char 为 8 位, in ...
- java:I/O 根据用户输入反馈信息
import java.io.*; class userInputIO{ //Java中成员变量有默认初始化,也就是如果不显式设置初始值的话就会被初始化为其类型的默认值(0.false.null等). ...
- Linux信号列表
我们运行如下命令,可看到Linux支持的信号列表: ~$ kill -l1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL5) SIGTRAP 6) SIGABRT 7) ...
- WinAPI——钩子函数大全3
函数原形:LRESULT CALLBACK JournalPlaybackProc(int code, WPARAM wParam, LPARAM lParam); 参数: code:指示一个代码,被 ...
- sizeof(结构体)的计算
摘要: 经常被计算结构体的sizeof给搞晕,于是找了个时间,静下心来,搞定它. 一.为什么结构体计算这么乱? 答案是字节对齐,计算机存储系统中以Byte为单位存储数据,不同数据类型所占的空间不同,如 ...