Pro javascript design pattern 读书笔记之 Building a chainable javascript library

Building a chainable javascript library

到目前为止你只是chained大多说常用函数的一小部分，但是你能进一步扩展这部分的内容。建一个库包含其他的常用函数是一个好的选择。他不需要成百上千的代码块。代码的长度取决于在库之外的需求。你们看到一些常用库的内容。从他们那里得到代码。以下是常用库的基本构成。

1.Event 添加和移除时间监听函数，normalizing 时间对象。

2.DOM   管理css类的名称和样式的管理。

3.ajax 对xmlhttprequest对象进行管理。

库的框架如下：

 

 1 Function.prototype.method=function(name,fn){
 2 
 3     this.prototype[name]=fn;
 4 
 5     return this;
 6 
 7     
 8 
 9 }
 
 (function(){
 
     function _$(els){
 
         //.
 
     }
 
     //event 
 
     _$.method('addEvent',function(type,fn){
 
         //.
 
     }).method('getEvent',function(e){
 
         //.
 
     }).
 
     //dom
 
     menthod('addClass',function(classname){
 
         //
 
     }).method('removeClass',function(classname){
 
         //
 
     }).method('getStyle',function(prop){
 
         //
 
     }).method('setStyle',function(prop,val){
 
         //.
 
     }).
 
     //ajax
 
     menthod('load',function(url,method){
 
         
 
     });
 
     window.$=function(){
 
         return new _$();
 
     }
 
     
 
 })()
 
 

 

现在这个API已经就绪，考虑谁用这个库还有用户在哪种文档中使用这个库很重要，如果有一个已经存在的API使用了这个dollar函数。这个库将被重写。一个简单的解决方式是改变$函数的函数名。然而这不是完美的解决方法。一个更好的解决方式是添加一个installer。下面是一个例子。

 

 1 (function(){
 2 
 3     function _$(els){
 4 
 5         //.
 6 
 7     }
 8 
 9     //event 
 
     _$.method('addEvent',function(type,fn){
 
         //.
 
     }).method('getEvent',function(e){
 
         //.
 
     }).
 
     //dom
 
     menthod('addClass',function(classname){
 
         //
 
     }).method('removeClass',function(classname){
 
         //
 
     }).method('getStyle',function(prop){
 
         //
 
     }).method('setStyle',function(prop,val){
 
         //.
 
     }).
 
     //ajax
 
     menthod('load',function(url,method){
 
         
 
     });
 
  
 
     window.installHelper= function(sco,interf){
 
         sco[interface]= function(){
 
             return new _$(arguments);
 
         };
 
     }
 
     
 
 })()
 

 

一种可能的实现如下

installHelper（window,’$’）;

$(‘aa’).show();

下面是一个更为复杂的例子，在这个例子中你能向预定义的命名空间对象中添加函数。

 

 1 window.com= window.com || {};
 2 
 3 com.example=com.example || {};
 4 
 5 com.example.util=com.example.util || {};
 6 
 7 installHelper(com.example.util,'get');
 8 
 9 (function(){
 
     var get=com.example.util.get();
 
     get('example').addEvent('click',function(e){
 
         get(this).addClass('hello');
 
     });
 
 })()