链式调用

(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的更多相关文章

  1. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  2. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  3. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. 常用的Javascript设计模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  8. Javascript设计模式(摘译)

    说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1)  creational  --  主要关注对象创建 Creational des ...

  9. JavaScript设计模式学习笔记

    1 JavaScript设计模式深入分析 私有属性和方法:函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量. 特权属性和方法:创建属 ...

  10. JavaScript设计模式:读书笔记(未完)

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

随机推荐

  1. NOIP2014 行记

    不知道OI是啥或者信息学竞赛是啥的可以按`Ctrl+W`. <del>很早开始写的..准备出分之后再发布.</del> 谨以此文纪念我信息学竞赛的第一次正式考试. 背景音乐底部 ...

  2. uva 10369

    数组开小了  还RE了一遍.......  最小生成树    按费用从小到大排... #include <iostream> #include <algorithm> #inc ...

  3. Unique Binary Search Trees II

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  4. Android 文字链接 文字点击时的背景颜色

    案例:实现“忘记密码?”这个链接,并且在按下的时候改变颜色. 方法一:这个可以用TextView实现: 主界面main.xml: <?xml version="1.0" en ...

  5. UINavigationController使用详解

    UINavigationController使用详解 有一阵子没有写随笔,感觉有点儿手生.一个多月以后终于又一次坐下来静下心写随笔,记录自己的学习笔记,也希望能够帮到大家. 废话少说回到正题,UINa ...

  6. P94、面试题12:打印1到最大的n位数

    题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1,2,3一直到最大的3位数999. 思路:先把字符串中的每一个数字都初始化为‘0’,然后每一次为字符串表示的数字加1,再打印 ...

  7. (从终端看linux-2)浅析terminal创建时ptmx和pts关系

    我们打开一个terminal,那么将会在devpts文件系统/dev/pts下创建一个对应的pts字符文件,该pts字符文件节点直接由/dev/ptmx节点的驱动函数ptmx_open()调用devp ...

  8. visio2010去除直线交叉处的跨线

    设计(最上方)->连接线(最右侧)->显示跨线(取消打钩)

  9. ASP.NET多次点击提交按钮以及Session超时和丢失过期问题

    1.ASP.NET防止多次点击提交按钮 对于一个按钮,要让变成恢色的,只要this.disabled=true就可以了,可是在.NET里,添加了OnClick事件后,就无法提交信息了.所以要加上以下代 ...

  10. requirejs 小结

    1,“生搬硬套”-----js依赖的写法,依赖关系如这里的嵌套关系: /** * 模块化加载,注意各个js文件的依赖关系(嵌套) */ require(["jquery"], fu ...