jQuery插件命名空間函數

Question

我正在創建一個相當大範圍的jQuery插件。事實上，插件在技術上由幾個插件組成，這些插件都可以一起工作。

(function($){ 
    $.fn.foo = function(){ 
     //plugin part A 
    } 
    $.fn.bar = function(){ 
     //plugin part B 
    } 
    $.fn.baz = function(){ 
     //plugin part C 
    } 
}(jQuery)) 

是否有可能命名空間的jQuery插件，使得未成年人的插件可能是更大的插件功能

$.fn.foo.bar = function(){} 
$.fn.foo.baz = funciton(){} 

這將繼續從污染jQuery函數的命名空間。 你可以再調用像

$('#example').foo() 
$('#other_example').foo.bar() 

問題的插件我遇到了當試圖這一點我自己是聲明，把foo（）插件功能的性能的功能沒有他們引用「這個」正確設置。 'this'最終引用父對象而不是jQuery對象。

任何想法或意見，將不勝感激。

-Matt

Answer 1

- this點$.fn.foo，這是你所期望的在JavaScript（this作爲對象，函數被調用什麼：jQuery的UI庫使用這樣的模式。你可以擴展的J -

$(...).sortable("serialize"); 
$(...).sortable({options}); 

如果你正在做這樣的事情：）

我從jQuery用戶界面（如排序），您撥打的功能類似於插件已經注意到查詢本身：

$.foo_plugin = { 
    bar: function() {}, 
    baz: function() {} 
} 

$.fn.foo = function(opts) { 
    if (opts == 'bar') return $.foo_plugin.bar.call(this); 
    if (opts == 'baz') return $.foo_plugin.baz.call(this); 
} 

Answer 2

嗯，我敢肯定有很多方法來剝皮這隻貓。只要你使用$.fn.foo.bar()

// initialize a dialog window from an element: 
$('#selector').dialog({}); 

// call the show method of a dialog: 
$('#selector').dialog('show'); 

Answer 3

我知道這已經回答了，但我已經創建了一個插件，不正是你想要什麼：

http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

以下附上一個小例子，但檢查這項jQuery的開發組後進行了較深入的例子：http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c/72cf730045d4333a?hl=en&q=structure+plugin+authoring#72cf730045d4333a

它可以讓你只要你想創造儘可能多的方法的對象：

var _myPlugin = function() { 
    // return the plugin namespace 
    return this; 
} 

_myPlugin.prototype.alertHtml = function() { 
    // use this the same way you would with jQuery 
    alert($(this).html()); 
} 

$.fn.plugin.add('myPlugin', _myPlugin); 

，現在你可以走：

$(someElement).myPlugin().alertHtml(); 

有，當然，這與其他許多可能性，在開發組後解釋。

Answer 4

我是我在埃裏克馬丁的SimpleModal上看到的模式的粉絲。這適用於我不使用DOM元素時 - 在這種情況下，使用localStorage的包裝。

這樣我可以很容易地引用構造函數：

$.totalStorage('robo', 'cop'); 

...或者一個公共方法：

$.totalStorage.getItem('robo'); //returns 'cop' 

這裏的內部：

;(function($){ 

/* Variables I'll need throghout */ 

var ls; 
var supported = true; 
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') { 
    supported = false; 
} else { 
    ls = localStorage; 
} 

/* Make the methods public */ 

$.totalStorage = function(key, value, options){ 
    return $.totalStorage.impl.init(key, value); 
} 

$.totalStorage.setItem = function(key, value){ 
    return $.totalStorage.impl.setItem(key, value); 
} 

$.totalStorage.getItem = function(key){ 
    return $.totalStorage.impl.getItem(key); 
} 

/* Object to hold all methods: public and private */ 

$.totalStorage.impl = { 

    init: function(key, value){ 
     if (typeof value != 'undefined') { 
      return this.setItem(name, value); 
     } else { 
      return this.getItem(name); 
     } 
    }, 

    setItem: function(key, value){ 
     if (!supported){ 
      $.cookie(key, value); 
      return true; 
     } 
     ls.setItem(key, JSON.stringify(value)); 
     return true; 
    }, 

    getItem: function(key){ 
     if (!supported){ 
      return this.parseResult($.cookie(key)); 
     } 
     return this.parseResult(ls.getItem(key)); 
    }, 

    parseResult: function(res){ 
     var ret; 
     try { 
      ret = JSON.parse(res); 
      if (ret == 'true'){ 
       ret = true; 
      } 
      if (ret == 'false'){ 
       ret = false; 
      } 
      if (parseFloat(ret) == ret){ 
       ret = parseFloat(ret); 
      } 
     } catch(e){} 
     return ret; 
    } 
}})(jQuery);