特定對象的jQuery插件名稱空間

Question

我正在嘗試創建一個jQuery插件，它將在保持完整鏈能力的同時將新名稱空間函數添加到上下文對象。我不知道這是否是可能的，但這裏有一個什麼我到目前爲止的例子：

(function ($) { 
    var loadScreen = $('<div />').text('sup lol'); 

    $.fn.someplugin = function (args) { 
     var args = args || {}, 
      $this = this; 

     $this.append(loadScreen); 

     return { 
      'caption' : function (text) { 
       loadScreen.text(text); 
       return $this; 
      } 
     }; 
    } 
})(jQuery); 

，如果我做$(document.body).someplugin().caption('hey how\'s it going?').css('background-color', '#000');

但是我也需要做$(document.body).someplugin().css('background-color', '#000').caption('hey how\'s it going?');

的能力也能正常工作

由於.someplugin()返回它自己的對象，而不是一個jQuery對象，它不會按預期工作。我還需要能夠通過$(document.body)訪問.caption()。因此，例如，如果初始$(document.body).someplugin()未設置變量。這意味着，不知何故.caption()將通過$.fn.caption = function() ...設置爲document.body對象。這是我不太確定的部分。如果不是的話，那麼我想我必須解決要求設置一個變量，以保持插件功能的連鎖能力。

這裏是我所期望的一個示例代碼：

$(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption(); // Error, jQuery doesn't know what caption is 
$(document.body).caption('done loading...'); 

這裏就是我願意接受，如果這是不可能的，或者只是非常低效：

var $body = $(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption(); // Error, jQuery doesn't know what caption is 
$body.caption('done loading...'); 

Answer 1

的是jQuery的可鏈接的，jQuery方法必須返回一個jQuery對象或支持所有jQuery方法的對象。您只需決定是否希望插件可以鏈接到其他jQuery方法，或者是否希望它返回自己的數據。你不能擁有兩個。選一個。

在你的代碼示例中，你可以定義多個插件方法，.someplugin()和.caption()。 jQuery沒有實現只適用於一個特定DOM對象的jQuery插件方法。但是，在所有jQuery對象上使用該方法並沒有什麼壞處，並且只能將它用於適用的jQuery對象。

我認爲你可以這樣做：

(function ($) { 
    var loadScreen = $('<div />').text('sup lol'); 

    $.fn.someplugin = function (args) { 
     var args = args || {}, 
      $this = this; 

     $this.append(loadScreen); 
     return(this); 
    } 

    $.fn.caption = function (text) { 
     loadScreen.text(text); 
     return this; 
    } 
})(jQuery); 

$(document.body).someplugin().css('background-color', '#000'); 
$('.non-initialized').caption('whatever'); 
$(document.body).caption('done loading...'); 

如果有應該是兩個.caption()通話之間有着某種聯繫，請解釋進一步，因爲我沒有遵循從你的問題。