jQuery另類視角：動(dòng)態(tài)擴(kuò)展對(duì)象
大家都知道Javascript是動(dòng)態(tài)語言，它對(duì)動(dòng)態(tài)的支持是與身俱來的，jQuery作為Javascript最為流行的框架之一，同樣有著這樣的特性。文章將從個(gè)人的角度出發(fā)，研究jQuery的開發(fā)者是如何設(shè)計(jì)出access函數(shù)，并讓它去支持動(dòng)態(tài)擴(kuò)展對(duì)象。
51CTO推薦專題： jQuery從入門到精通
例如：有一個(gè)employee對(duì)象：
- function employee(){
- this.e_id = 0;
- this.e_name = "";
- }
現(xiàn)在需要為它動(dòng)態(tài)的新增"age"屬性和"toString()"方法：
- var empObj = new employee();
- empObj["age"] = 20;
- empObj["toString"] = function() { return this.e_id.toString() + this.e_name; };
一行簡(jiǎn)單的代碼就承擔(dān)了這項(xiàng)工作，這是Javascript內(nèi)置支持的，不過往往我們需要在這基礎(chǔ)上支持一定程度的擴(kuò)展，所以會(huì)將這一行簡(jiǎn)單的代碼抽成一個(gè)方法：
- function dym_setprop(obj, key, value) {
- if (obj && key) {
- obj[key] = value;
- }
- }
看到這里，我們先讓思路做個(gè)跳轉(zhuǎn)，跳到C#中的employee對(duì)象，如下：
在面向?qū)ο蟮木幊讨?，?duì)外使用的都是屬性（Get/Set），那么想想如何將這種方式簽入到Javascript中，現(xiàn)在讓我們跳回dym_setprop函數(shù)內(nèi)，既在dym_setprop方法中不能使用obj[key]=value的直接賦值方式，而要支持Set。
- function dym_setprop(obj, key, value, fn) {
- if (obj && key) {
- fn(obj, key, value);
- }
- }
參數(shù)fn，在dym_setprop中不直接操作任何對(duì)象，使用函數(shù)fn來代替相應(yīng)的操作代碼，則在這里除了支持Set外，還有其他很大的自由空間。讓我們繼續(xù)深入dym_setprop方法，現(xiàn)在我們把關(guān)注點(diǎn)放在參數(shù)value上，大家都清楚value可以是值類型，也可以是函數(shù)，對(duì)于值類型來說，不用考慮其他東西直接賦值就可以了，對(duì)于函數(shù)來說就沒有這么簡(jiǎn)單，它支持兩種操作：
1、直接將函數(shù)賦給新擴(kuò)展的屬性；
2、將函數(shù)執(zhí)行的返回值賦給新擴(kuò)展的屬性。
- function dym_setprop(obj, key, value, fn, exec, pass) {
- if (obj && key) {
- var temp = value;
- if (exec) {
- temp = value.call(obj, key, fn(obj, key));
- }
- fn(obj, key, temp, pass);
- }
- }
在這段代碼中參數(shù)exec充當(dāng)了上面兩種操作選擇的角色，參數(shù)pass是一個(gè)額外的執(zhí)行參數(shù)。除此之外，大家也許會(huì)對(duì)fn有些疑惑，因?yàn)樯厦嬗袃蓚€(gè)地方使用了，區(qū)別只有參數(shù)個(gè)數(shù)不同，fn到底代表什么？！再次想下C#中的屬性，它是有Get/Set的，那么在這里fn(obj,key)就相當(dāng)與Get，而fn(obj,key,temp,pass)就相當(dāng)與Set。例如：看下面的代碼，對(duì)于fn的定義與使用，
- employee.AccessProp = function(obj, key, value) {
- if (value) {
- obj[key] = value;
- }
- else {
- return obj[key];
- }
- }
- dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true);
看了這么多，也許大家覺得郁悶，簡(jiǎn)單的動(dòng)態(tài)擴(kuò)展對(duì)象程序?yàn)槭裁匆赃@種方式來編寫，有種沒事找事的感覺，其實(shí)不然，如果你只想做動(dòng)態(tài)擴(kuò)展對(duì)象，那么我建議你別采用上述dym_setprop的思路，但是如果你想從更加抽象的角度上思考，將dym_setprop內(nèi)的程序作為一個(gè)流程執(zhí)行的模板，那么這是一個(gè)不錯(cuò)的方式，因?yàn)閐ym_setprop內(nèi)部不承擔(dān)任何具體代碼(obj[key]=value或obj[key])的執(zhí)行，它都通過函數(shù)fn來代替，這樣對(duì)于具體執(zhí)行來說有完全自由的空間。理解完上述的思路后，讓我們進(jìn)入本文的核心，jQuery是如何實(shí)現(xiàn)動(dòng)態(tài)擴(kuò)展對(duì)象的？access函數(shù)，
- function access( elems, key, value, exec, fn, pass ) {
- var length = elems.length;
- // Setting many attributes
- if ( typeof key === "object" ) {
- for ( var k in key ) {
- access( elems, k, key[k], exec, fn, value );
- }
- return elems;
- }
- // Setting one attribute
- if ( value !== undefined ) {
- // Optionally, function values get executed if exec is true
- exec = !pass && exec && jQuery.isFunction(value);
- for ( var i = 0; i < length; i++ ) {
- fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
- }
- return elems;
- }
- // Getting an attribute
- return length ? fn( elems[0], key ) : null;
- }
仔細(xì)看完access函數(shù)的代碼，你一定發(fā)現(xiàn)它和dym_setprop的相試度很高，它只是多了一段代碼：
- if ( typeof key === "object" ) {
- for ( var k in key ) {
- access( elems, k, key[k], exec, fn, value );
- }
- return elems;
- }
很容易看出它其實(shí)就是用來支持object對(duì)象的動(dòng)態(tài)擴(kuò)展屬性。具體的執(zhí)行流程通過下圖來展示：
到這里已經(jīng)寫完了，本文試著從自己的角度上去猜測(cè)jQuery的開發(fā)者是如何設(shè)計(jì)出access函數(shù)的，讓它去支持動(dòng)態(tài)擴(kuò)展對(duì)象，并且說明了access的執(zhí)行流程。其實(shí)對(duì)于我的這種猜測(cè)不一定正確，不過不妨礙我對(duì)于jQuery的研究。
文章轉(zhuǎn)自Kevin-moon的博客，
原文地址：http://www.cnblogs.com/Kevin-moon/archive/2010/05/24/1742693.html
【編輯推薦】
