jQuery OOP技術混淆

Question

我在查看Jamie Talbot's technique for OOP in jQuery。我試圖理解這種邏輯時非常明白這一點在大多數情況下，但我越來越略輸：

result = $(result); 

     var template = result[0]; 
     if (template) 
     { 
      for (var i in template) 
      { 
       if (typeof (template[i]) == 'function') 
       { 
        result[i] = function() 
        { 
         this.each(function() 
         { 
          this[i](); 
         }); 
        }; 
       } 
      } 
     } 

我明白到if (typeof (template[i]) == 'function')塊，該代碼是看每個公共方法這是在插件中聲明的，但在此之後，它讓我感到厭煩。

有沒有什麼機會有人可以一步一步通過這個？

這是Jamie的原始代碼。

(function($) { 
    $.fn.encapsulatedPlugin = function(plugin, definition, objects, options) { 
    var result = []; 
    objects.each(function() { 
     var element = $(this); 

     if (!element.data(plugin)) { 
     // Initialise 
     var instance = new definition(this, options); 

     // Store the new functions in a validation data object. 
     element.data(plugin, instance); 
     } 
     result.push(element.data(plugin)); 
    }); 

    // We now have a set of plugin instances. 
    result = $(result); 

    // Take the public functions from the definition and make them available across the set. 
    var template = result[0]; 
    if (template) { 
     for (var i in template) { 
     if (typeof (template[i]) == 'function') { 
      result[i] = function() { 
      this.each(function() { 
       this[i](); 
      }); 
      }; 
     } 
     } 
    } 

    // Finally mix-in a convenient reference back to the objects, to allow for chaining. 
    result.$ = objects; 

    return result; 
    }; 

})(jQuery); 

Answer 1

你實際上正在使用舊代碼。正如已經指出的那樣，在早期的草稿中有一些古怪的行爲，（我只用一個封裝函數測試了第一個版本，這就是爲什麼直到一兩天後才注意到重新綁定問題 - http://jamietalbot.com/2010/08/26/object-oriented-jquery-plugins-mk-2/）。特別是，傳遞參數是不可能的。無論如何，自那以後有過幾次迭代。

最新的代碼可以發現on Github，它已應用了一些修復和優化。

操作對於你感興趣，雖然代碼位的基本原理是這樣的：

對於插件對象上的每個公共職能，創建在每個元素上執行公共職能的包裝功能組。當循環完成迭代時，將會有一個結果對象，由函數名稱進行鍵控，每個成員都是一個函數，該函數對集合中的每個元素執行類似命名的基礎函數。

這段代碼特別是已經在GitHub版本中清理過了，所以看看那裏，看看你如何去。

最佳，

傑米。

Answer 2

這看起來很糟糕。同一個i被綁定多次（只有一個新的函數定義可以引入一個新的作用域[read：free variable]）。 result[i]（其中i是當前值在循環中）包含當被評估時將在調用時「看到」的最後一個值（來自循環）的功能。

（甚至沒有嘗試它）我聲稱它不工作廣告。

A「修正」版本將是：

result[i] = (function (_i) { 
    return function() { 
    this.each(function() { 
     this[_i](); 
    }); 
    }; 
}(i)); 

編碼愉快:)

---

我試圖解釋休息，但實現了myplugin方法還貼出後，我的大腦融化包含另一個重要的錯誤，並偏離評論。不要試圖分析更多。不會推薦使用。