0 Comments

JavaScript设计模式深入分析(5)

发布于:2013-12-21  |   作者:广州网站建设  |   已聚集:人围观

代理(Proxy)模式:此模式最基本的形式是对访问进行控制。代理对象和另一个对象(本体)实现的是同样的接口,可是实际上工作还是本体在做,它才是负责执行所分派的任务的那个对象或类,代理对象不会在另以对象的基础上修改任何方法,也不会简化那个对象的接口。

举一个具体的情况:如果那个对象在某个远端服务器上,直接操作这个对象因为网络速度原因可能比较慢,那我们可以先用Proxy来代替那个对象。

总之对于开销较大的对象,只有在使用它时才创建,这个原则可以为我们节省很多内存。《JS设计模式》上的图书馆示例:
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. var Publication = new Interface('Publication', ['getIsbn''setIsbn''getTitle''setTitle''getAuthor''setAuthor''display']);  
  2.  var Book = function(isbn, title, author) {  
  3.      //...  
  4.  }   
  5.  // implements Publication  
  6.  implements(Book,Publication);  
  7.    
  8.  /* Library interface. */ 
  9.  var Library = new Interface('Library', ['findBooks''checkoutBook''returnBook']);  
  10.    
  11.  /* PublicLibrary class. */ 
  12.  var PublicLibrary = function(books) {  
  13.      //...  
  14.  };  
  15.  // implements Library  
  16.  implements(PublicLibrary,Library);   
  17.    
  18.  PublicLibrary.prototype = {  
  19.      findBooks: function(searchString) {  
  20.         //...  
  21.      },  
  22.      checkoutBook: function(book) {  
  23.          //...  
  24.      },  
  25.      returnBook: function(book) {  
  26.          //...  
  27.      }  
  28.  };  
  29.    
  30.  /* PublicLibraryProxy class, a useless proxy. */ 
  31.  var PublicLibraryProxy = function(catalog) {   
  32.      this.library = new PublicLibrary(catalog);  
  33.  };  
  34.  // implements Library  
  35.  implements(PublicLibraryProxy,Library);  
  36.    
  37.  PublicLibraryProxy.prototype = {  
  38.      findBooks: function(searchString) {  
  39.          return this.library.findBooks(searchString);  
  40.      },  
  41.      checkoutBook: function(book) {  
  42.          return this.library.checkoutBook(book);  
  43.      },  
  44.      returnBook: function(book) {  
  45.          return this.library.returnBook(book);  
  46.      }  
  47.  }; 

观察者(Observer)模式:定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新。

观察者模式中存在两个角色,观察者和被观察者。在DOM的编程环境中的高级事件模式中,事件监听器说到底就是一种内置的观察者。事件处理器(handler)和时间监听器(listener)并不是一回事,前者就是一种把事件传给与其关联的函数的手段,而在后者中,一个时间可以与几个监听器关联,每个监听器都能独立于其他监听器而改变。
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. //使用时间监听器可以让多个函数相应一个事件  
  2.  var fn1 = function(){  
  3.     //code  
  4. }  
  5.  var fn2 = function(){  
  6.     //code  
  7.  }  
  8.   addEvent(element,'click',fn1);  
  9.  addEvent(element,'click',fn2)  
  10.  //而时间处理函数就办不到  
  11.  element.onclick = fn1;  
  12.  element.onclick = fn2; 

观察者模式是开发基于行为的应用程序的有力手段,前端程序员可做的就是借助一个事件监听器替你处理各种行为,从而降低内存消耗和提高互动性能。

命令(Command)模式:将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或记录请求日志,以及支持可取消的操作。

命令对象是一个操作和用来调用这个操作的对象的结合体,所有的命名对象都有一个执行操作,其用途就是调用命令对象所绑定的操作。示例:


  1. car Calculator={  
  2.     add:function(x,y){  
  3.        return x+y;  
  4.     },  
  5.     substract:function(x,y){  
  6.        return x-y;  
  7.     },  
  8.     multiply:function(x,y){  
  9.        return x*y;  
  10.     },  
  11.     divide:function(x,y){  
  12.        return x/y;  
  13.     }  
  14.  }  
  15.  Calculator.calc = function(command){  
  16.     return Calculator[command.type](command.op1,command.opd2)  
  17.  };  
  18.  Calculator.calc({type:'add',op1:1,op2:1});  
  19.  Calculator.calc({type:'substract',op1:5,op2:2});  
  20.  Calculator.calc({type:'multiply',op1:5,op2:2});  
  21.  Calculator.calc({type:'divide',op1:8,op2:4}); 

命名模式的主要用途是把调用对象(用户界面,API和代理等)与实现操作的对象隔离开,也就是说使对象间的互动方式需要更高的模块化时都可以用到这种模式。

职责链(Chain Of Responsibility)模式:为解除请求的发送者和接收者之间耦合,而使多个对象都有机会处理这个请求。将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它。

职责链由多个不同类型的对象组成:发送者是发出请求的对象,而接收者则是接收请求并且对其进行处理或传递的对象,请求本身有时也是一个对象,它封装着与操作有关的所有数据。

典型的流程大致是:

1.发送者知道链中第一个接收者,它向这个接收者发出请求。

2.每一个接收者都对请求进行分析,然后要么处理它,要么将其往下传。

3.每一个接收者知道的其他对象只有一个,即它在链中的下家。

4.如果没有任何接收者处理请求,那么请求将从链上离开,不同的实现对此也有不同的反应,一般会抛出一个错误。

职责链模式的适用范围:1.有多个的对象可以处理一个请求,哪个对象处理该请求运行时刻自动确定;2.想在不明确指定接收者的情况下,向多个对象中的一个提交一个请求;3.可处理一个请求的对象集合需要被动态指定。

确实对这种模式不了解,相关资料也较少,所以代码先不上了。看看大家对这个模式有木有什么好的理解或者能较好表达这种模式的代码,谢谢了。

结束语:

1.每种模式都有自己的优缺点,所以每种模式的正确使用还得看开发人员本身的功力;

2.就算不使用JavaScript设计模式一样可以写出 复杂的可使用 的代码,可是如果你想真正了解JavaScript面向对象能力,学习提高代码的模块化程度﹑可维护性﹑可靠性和效率,那么合理的运用JavaScript设计模式将会是一个优秀 前端开发攻城湿 必备的能力。

原文:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html

飞机