命名空間的jQuery插件

Question

讓我們假設，我們有以下的jQuery插件（他們每個人在不同的文件）：

• $.fn.foo
• $.fn.foo.bar
• $.fn.foo.baz

我使用標準的jQuery插件模式。第一個實際上是對其名稱空間的其餘插件的代理或「外觀」。 例如，當我打電話$('#el').foo()，引擎蓋下我也呼籲：

 
var context = this; // context is equal to $('#el') 
$(context).foo['bar'].apply(context); 
$(context).foo['baz'].apply(context); 

有兩個問題，當我想打電話給只（不含$.fn.foo）$('#el').foo.bar()。第一個問題是沒有$.fn.foo命名空間，但我可以創建它，所以這實際上沒有問題。第二個問題是內部$.fn.foo.bar中的this等於document對象，但我想等於$('#el')。我怎樣才能做到這一點？

所以，做一個長話短說，都應該工作：

 
$('#el').foo();  // This also calls foo.bar and foo.baz under the hood 
$('#el').foo.bar(); // I'm calling foo.bar explicitly 

Answer 1

我想你可能只需要按照不同的插件模式。這裏有一個不錯的repository of jQuery plugin patterns，但你可能想要看的一個是namespace pattern--你會看到如果命名空間如果尚不存在，它將如何被初始定義，這使得你可以更容易地從單個命名空間跨多個腳本。

---

更新：嗯，我還在學習，所以我不會說我在這方面的專家，而是試圖讓這個$('#el').aaa.bbb.ccc()到下班對我來說非常的混亂。也許這將是最好不要使用這種格式，而是做到這一點（demo）：

$.aaa.bbb.ccc($("#el")); 

因爲那是比較容易設置：

(function() { 
    if (!$.aaa) { 
     $.aaa = { 
      bbb : { 
       ccc: function(el, options){ 
        alert(el[0].id); 
       } 
      } 
     }; 
    }; 
})(jQuery); 

$(function() { 
    $.aaa.bbb.ccc($("#el")); // alerts "el" 
});