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: 模式是一种可复用的解决方案,可用于解决 ...
随机推荐
- bzoj 2744: [HEOI2012]朋友圈 二分图匹配
2744: [HEOI2012]朋友圈 Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 612 Solved: 174[Submit][Status] ...
- c#做动态(gif)中文验证码
无意中在国外论坛发现一个gif动画类,我使用它来制作了一个动态验证码 : 一:首先新建一个类库 1:新建AnimatedGifEncoder类 using System; using System.C ...
- [模拟]ZOJ3480 Duck Typing
题意:给了一坨...按题目意思输出就好了... 给一组案例 begin class d class c:d class b:c class a:b def d.m def d.n call a.m e ...
- aop aspect
所以“<aop:aspect>”实际上是定义横切逻辑,就是在连接点上做什么,“<aop:advisor>”则定义了在哪些连接点应用什么<aop:aspect>.Sp ...
- Bridging signals ZOJ 3627 POJ1631 HDU1950
题意:给出一个从1-n的数字排列,求最长上升子序列长度. 直接说解法吧.新开一个数组d,d[i]表示的是能构成长度为i的上升子序列的在原序列中最后的那个数值.程序的主要过程:当循环到第i个的时候,如果 ...
- python 包管理工具pip安装与使用
pip是python的一个包管理工具,与之类似的工具还有easy_install.根据官网的说法 如果你的python版本在Python 2 >=2.7.9 or Python 3 >=3 ...
- CentOS7.1 安装关键步骤 记录下来
SecureCRT下载地址 https://yunpan.cn/cS9W94kuvhXPb 访问密码 08cd[这里GNOME桌面 下的 要全选,截屏有误]
- JADE提升篇
以下如果未特殊声明,都在JADE管理器中运行,然后再Eclipse控制台中查看! JADE行为类 在前面的例子中,Agent所作的工作都定义在了setup方法中,实际上它具有的行为和执行的动作都应该定 ...
- poj 2253 Frogger(最短路 floyd)
题目:http://poj.org/problem?id=2253 题意:给出两只青蛙的坐标A.B,和其他的n-2个坐标,任一两个坐标点间都是双向连通的.显然从A到B存在至少一条的通路,每一条通路的元 ...
- knockout 绑定 jquery ui datepicker (转)
ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //in ...