来自:http://developer.51cto.com/art/201210/361810.htm
http://www.alloyteam.com/2012/10/common-javascript-design-patterns/
个人感觉JS设计模式类似于Java设计模式,关于模式的概念可参照java设计模式。
此处只是简单复制相应的js codes,便于理解。
一 单例模式
var mask; var createMask = function(){ if ( mask ) return mask; else{ mask = document,body.appendChild( document.createElement(div) ); return mask; } }
二 简单工厂模式
function A( name ){ this.name = name; } function ObjectFactory(){ var obj = {}, Constructor = Array.prototype.shift.call( arguments ); obj.__proto__ = typeof Constructor .prototype === 'number' ? Object.prototype : Constructor .prototype; var ret = Constructor.apply( obj, arguments ); return typeof ret === 'object' ? ret : obj; } var a = ObjectFactory( A, 'svenzeng' ); alert ( a.name ); //svenzeng
三 观察者模式
div.onclick = function click (){ alert ( ''click' ) }
四 适配器模式
适配器模式的作用很像一个转接口。
在程序里适配器模式也经常用来适配2个接口, 比如你现在正在用一个自定义的js库. 里面有个根据id获取节点的方法$id(). 有天你觉得jquery里的$实现得更酷, 但你又不想让你的工程师去学习新的库和语法. 那一个适配器就能让你完成这件事情$id = function( id ){
return jQuery( '#' + id )[0]; }
五 代理模式
代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作.
var request = Ajax.get( 'cgi.xx.com/xxx' ); request.send(); request.done(function(){ });
六 桥接模式
桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化。在实现api的时候, 桥接模式特别有用
var singleton = function( fn ){ var result; return function(){ return result || ( result = fn .apply( this, arguments ) ); } }<span id="more-3614"></span> var createMask = singleton( function(){ return document.body.appendChild( document.createElement('div') ); })
singleton是抽象部分, 而createMask是实现部分
七 外观模式
外观模式(门面模式),是一种相对简单而又无处不在的模式。外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用。
var stopEvent = function( e ){ //同时阻止事件默认行为和冒泡 e.stopPropagation(); e.preventDefault(); }
八 访问者模式
利用访问者,对访问的元素进行某些操作时,只需将此对象作为参数传递给当前访问者,然后,访问者会依据被访问 者的具体信息,进行相关的操作。
利用访问者,我们来做个有趣的事情. 给一个object对象增加push方法.
var Visitor = {} Visitor .push = function(){ return Array.prototype.push.apply( this, arguments ); } var obj = {}; obj.push = Visitor .push; obj.push( '"first" ); alert ( obj[0] ) //"first" alert ( obj.length ); //1
九 策略模式
策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换。
一个小例子就能让我们一目了然。
回忆下jquery里的animate方法.
$( div ).animate( {"left: 200px"}, 1000, 'linear' ); //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' ); //三次方的缓动
十 模版方法模式
模式方法是预先定义一组算法,先把算法的不变部分抽象到父类,再将另外一些可变的步骤延迟到子类去实现。听起来有点像工厂模式( 非前面说过的简单工厂模式 ).
最大的区别是,工厂模式的意图是根据子类的实现最终获得一种对象. 而模版方法模式着重于父类对子类的控制.
十一 中介者模式
中介者对象可以让各个对象之间不需要显示的相互引用,从而使其耦合松散,而且可以独立的改变它们之间的交互。
var mode1 = Mode.create(), mode2 = Mode.create(); var view1 = View.create(), view2 = View.create(); var controler1 = Controler.create( mode1, view1, function(){ view1.el.find( ''div' ).bind( ''click', function(){ this.innerHTML = mode1.find( 'data' ); } ) }) var controler2 = Controler.create( mode2 view2, function(){ view1.el.find( ''div' ).bind( ''click', function(){ this.innerHTML = mode2.find( 'data' ); } ) })
十二 迭代器模式
迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示。
forEach = function( ary, fn ){ for ( var i = 0, l = ary.length; i < l; i++ ){ var c = ary[ i ]; if ( fn.call( c, i , c ) === false ){ return false; } }} forEach( [ 1, 2, 3 ], function( i, n ){ alert ( i ); })
十三 组合模式
组合模式又叫部分-整体模式,它将所有对象组合成树形结构。使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作。
e.g. $( ‘body’ ).unbind( ‘*’ );
十四 备忘录模式
备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存。以后再翻回这一页的时候,可以直接使用缓存里的数据而无需再次请求服务器。
var Page = function(){ var page = 1, cache = {}, data; return function( page ){ if ( cache[ page ] ){ data = cache[ page ]; render( data ); }else{ Ajax.send( 'cgi.xx.com/xxx', function( data ){ cache[ page ] = data; render( data ); }) } } }()
十五 职责链模式
十六 享元模式
十七 状态模式
//todo
相关推荐
JavaScript设计模式.pdf
javascript高级-javascript设计模式。视频文件(无加密可在线观看)
在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScript DOM高级程序设计》(注意和《JavaScript 高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一...
《JavaScript设计模式》是JavaScript设计模式的学习指南。全书分为14章。首先介绍了什么是模式、模式的结构、类别、模式的分类、如何编写模式等等;然后,集中介绍了很多流行的设计模式在JavaScript中的应用,包括...
JavaScript设计模式与开发实践.pdf
JavaScript 设计模式(高清扫描版本)- 张容铭
常用的Javascript设计模式.pdf
本书在尊重《设计模式》原意的同时,针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式,讲解了JavaScript面向对象和函数式编程方面的基础知识,介绍了面向对象的设计原则及其在设计...
《JavaScript设计模式》中,Google和Yahoo公司的两位资深Web专家对此给出了掷地有声的肯定回答。作者针对常见的开发任务,从YUI等实战代码中取材,提供了专家级的解决方案,不仅透彻剖析了JavaScript扣的面向对象...
JavaScript设计模式+JavaScript模式+JavaScript异步编程,合计三本pdf文件,5分超值哦。
深入讲解Javascript开发原理以及Javascript客户端脚本开发的设计模式,看完该书可以拓展WEB开发人员的Javascript开发的思路。
外文翻译:学用JavaScript设计模式
外文翻译:学用JavaScript设计模式,pdf版本,中文版 设计模式是可重用的用于解决软件设计中一般问题的方案。设计模式如此让人着迷,以至在任何编程语言中都有对其进行的探索。 其中一个原因是它可以让我们站在巨人...
为了帮助大家快速和较好地理解JavaScript设计模式中的单例模式,本文对JavaScript的单例模式进行了分析并进行简易的代码演示,希望本文能够给有需要的人带来一点小小的帮助。
包括面向对象,面向对象编程思想,javascript面向对象,设计模式通俗版,快速进入模式学习与实践。
Javascript 设计模式 很经典 第一本 Javascript 设计模式 很经典 第一本 Javascript 设计模式 很经典 第一本
设计模式体现: 代理模式:由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用。 迭代器模式:在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素。 单例模式:...
JAVASCRIPT设计模式[收集].pdf