jQuery另类视角：动态扩展对象

大家都知道Javascript是动态语言，它对动态的支持是与身俱来的，jQuery作为Javascript最为流行的框架之一，同样有着这样的特性。文章将从个人的角度出发，研究jQuery的开发者是如何设计出access函数，并让它去支持动态扩展对象。

专注于为中小企业提供成都网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业献县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

推荐专题：  jQuery从入门到精通

例如：有一个employee对象：

 
 
 
 
    
  
  
  
  
  1. function employee(){ 
    2. 
  
  
  
  
  2.     this.e_id = 0; 
    3. 
  
  
  
  
  3.     this.e_name = ""; 
    4. 
  
  
  
  
  4. }
    5.

现在需要为它动态的新增"age"属性和"toString()"方法：

 
 
 
 
    
  
  
  
  
  1. var empObj = new employee(); 
    2. 
  
  
  
  
  2. empObj["age"] = 20; 
    3. 
  
  
  
  
  3. empObj["toString"] = function() { return this.e_id.toString() + this.e_name; };
    4.

一行简单的代码就承担了这项工作，这是Javascript内置支持的，不过往往我们需要在这基础上支持一定程度的扩展，所以会将这一行简单的代码抽成一个方法：

 
 
 
 
    
  
  
  
  
  1. function dym_setprop(obj, key, value) { 
    2. 
  
  
  
  
  2.     if (obj && key) { 
    3. 
  
  
  
  
  3.   obj[key] = value; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5. }
    6.

看到这里，我们先让思路做个跳转，跳到C#中的employee对象，如下：

在面向对象的编程中，对外使用的都是属性（Get/Set），那么想想如何将这种方式签入到Javascript中，现在让我们跳回dym_setprop函数内，既在dym_setprop方法中不能使用obj[key]=value的直接赋值方式，而要支持Set。

 
 
 
 
    
  
  
  
  
  1. function dym_setprop(obj, key, value, fn) { 
    2. 
  
  
  
  
  2.     if (obj && key) { 
    3. 
  
  
  
  
  3.   fn(obj, key, value); 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5. }
    6.

参数fn，在dym_setprop中不直接操作任何对象，使用函数fn来代替相应的操作代码，则在这里除了支持Set外，还有其他很大的自由空间。让我们继续深入dym_setprop方法，现在我们把关注点放在参数value上，大家都清楚value可以是值类型，也可以是函数，对于值类型来说，不用考虑其他东西直接赋值就可以了，对于函数来说就没有这么简单，它支持两种操作：

1、直接将函数赋给新扩展的属性；

2、将函数执行的返回值赋给新扩展的属性。

 
 
 
 
    
  
  
  
  
  1. function dym_setprop(obj, key, value, fn, exec, pass) { 
    2. 
  
  
  
  
  2.     if (obj && key) { 
    3. 
  
  
  
  
  3.   var temp = value; 
    4. 
  
  
  
  
  4.   if (exec) { 
    5. 
  
  
  
  
  5. temp = value.call(obj, key, fn(obj, key)); 
    6. 
  
  
  
  
  6.   } 
    7. 
  
  
  
  
  7.   fn(obj, key, temp, pass); 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9. }
    10.

在这段代码中参数exec充当了上面两种操作选择的角色，参数pass是一个额外的执行参数。除此之外，大家也许会对fn有些疑惑，因为上面有两个地方使用了，区别只有参数个数不同，fn到底代表什么？！再次想下C#中的属性，它是有Get/Set的，那么在这里fn(obj,key)就相当与Get，而fn(obj,key,temp,pass)就相当与Set。例如：看下面的代码，对于fn的定义与使用，

 
 
 
 
    
  
  
  
  
  1. employee.AccessProp = function(obj, key, value) { 
    2. 
  
  
  
  
  2.     if (value) { 
    3. 
  
  
  
  
  3.   obj[key] = value; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5.     else { 
    6. 
  
  
  
  
  6.   return obj[key]; 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true);
    10.

看了这么多，也许大家觉得郁闷，简单的动态扩展对象程序为什么要以这种方式来编写，有种没事找事的感觉，其实不然，如果你只想做动态扩展对象，那么我建议你别采用上述dym_setprop的思路，但是如果你想从更加抽象的角度上思考，将dym_setprop内的程序作为一个流程执行的模板，那么这是一个不错的方式，因为dym_setprop内部不承担任何具体代码(obj[key]=value或obj[key])的执行，它都通过函数fn来代替，这样对于具体执行来说有完全自由的空间。理解完上述的思路后，让我们进入本文的核心，jQuery是如何实现动态扩展对象的？access函数，

 
 
 
 
    
  
  
  
  
  1. function access( elems, key, value, exec, fn, pass ) { 
    2. 
  
  
  
  
  2.     var length = elems.length; 
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.     // Setting many attributes 
    5. 
  
  
  
  
  5.     if ( typeof key === "object" ) { 
    6. 
  
  
  
  
  6.   for ( var k in key ) { 
    7. 
  
  
  
  
  7. access( elems, k, key[k], exec, fn, value ); 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9.   return elems; 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.      
    12. 
  
  
  
  
  12.     // Setting one attribute 
    13. 
  
  
  
  
  13.     if ( value !== undefined ) { 
    14. 
  
  
  
  
  14.   // Optionally, function values get executed if exec is true 
    15. 
  
  
  
  
  15.   exec = !pass && exec && jQuery.isFunction(value); 
    16. 
  
  
  
  
  16.    
    17. 
  
  
  
  
  17.   for ( var i = 0; i < length; i++ ) { 
    18. 
  
  
  
  
  18. fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); 
    19. 
  
  
  
  
  19.   } 
    20. 
  
  
  
  
  20.    
    21. 
  
  
  
  
  21.   return elems; 
    22. 
  
  
  
  
  22.     } 
    23. 
  
  
  
  
  23.      
    24. 
  
  
  
  
  24.     // Getting an attribute 
    25. 
  
  
  
  
  25.     return length ? fn( elems[0], key ) : null; 
    26. 
  
  
  
  
  26. }
    27.

仔细看完access函数的代码，你一定发现它和dym_setprop的相试度很高，它只是多了一段代码：

 
 
 
 
    
  
  
  
  
  1. if ( typeof key === "object" ) { 
    2. 
  
  
  
  
  2.    for ( var k in key ) { 
    3. 
  
  
  
  
  3.     access( elems, k, key[k], exec, fn, value ); 
    4. 
  
  
  
  
  4.    } 
    5. 
  
  
  
  
  5.    return elems; 
    6. 
  
  
  
  
  6. }
    7.

很容易看出它其实就是用来支持object对象的动态扩展属性。具体的执行流程通过下图来展示：

到这里已经写完了，本文试着从自己的角度上去猜测jQuery的开发者是如何设计出access函数的，让它去支持动态扩展对象，并且说明了access的执行流程。其实对于我的这种猜测不一定正确，不过不妨碍我对于jQuery的研究。

文章转自Kevin-moon的博客，

原文地址：http://www.cnblogs.com/Kevin-moon/archive/2010/05/24/1742693.html

名称栏目：jQuery另类视角：动态扩展对象
文章转载：http://www.gawzjz.com/qtweb2/news18/26818.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

分类信息网站

四川成都seo网站优化　　 　成都网站制作　　 　主机托管　　 　艾瑞格衣柜　　 　网站建设公司　　 　微信开发　　 　网站建设方案　　 　网站托管运营　　 　成都托管服务器　　 　成都IDC机房托管　　 　免备案虚拟主机　　 　网络推广平台　　 　php主机　　 　传美奇电气　　 　重庆企业网站建设　　 　广安搬家公司　　 　h5页面制作　　 　蜜朵婚庆　　 　防护网厂　　 　微信服务号订阅号开发