問題描述

我正在嘗試編寫一個(gè) jQuery 插件，該插件將為調(diào)用它的對(duì)象提供額外的功能/方法.我在網(wǎng)上閱讀的所有教程(過去2小時(shí)一直在瀏覽)最多包括如何添加選項(xiàng)，而不是附加功能.

I'm trying to write a jQuery plugin that will provide additional functions/methods to the object that calls it. All the tutorials I read online (have been browsing for the past 2 hours) include, at the most, how to add options, but not additional functions.

這是我想做的事情:

//通過調(diào)用該div的插件將div格式化為消息容器

//format div to be a message container by calling the plugin for that div

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

或類似的東西.歸結(jié)為:我調(diào)用插件，然后調(diào)用與該插件關(guān)聯(lián)的函數(shù).我似乎無法找到一種方法來做到這一點(diǎn)，而且我之前已經(jīng)看到很多插件都這樣做了.

or something along those lines. Here's what it boils down to: I call the plugin, then I call a function associated with that plugin. I can't seem to find a way to do this, and I've seen many plugins do it before.

這是我目前所擁有的插件:

Here's what I have so far for the plugin:

jQuery.fn.messagePlugin = function() {
  return this.each(function(){
    alert(this);
  });

  //i tried to do this, but it does not seem to work
  jQuery.fn.messagePlugin.saySomething = function(message){
    $(this).html(message);
  }
};

我怎樣才能實(shí)現(xiàn)這樣的目標(biāo)?

How can I achieve something like that?

謝謝！

2013 年 11 月 18 日更新:我已將正確答案更改為 Hari 以下評(píng)論和點(diǎn)贊的答案.

Update Nov 18, 2013: I've changed the correct answer to that of Hari's following comments and upvotes.

推薦答案

根據(jù) jQuery Plugin Authoring 頁面 (http://docs.jquery.com/Plugins/Authoring)，最好不要混淆 jQuery 和 jQuery.fn 命名空間.他們建議采用這種方法:

According to the jQuery Plugin Authoring page (http://docs.jquery.com/Plugins/Authoring), it's best not to muddy up the jQuery and jQuery.fn namespaces. They suggest this method:

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.tooltip = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );

基本上，您將函數(shù)存儲(chǔ)在數(shù)組中(范圍為包裝函數(shù))，如果傳遞的參數(shù)是字符串，則檢查條目，如果參數(shù)是對(duì)象(或空).

Basically you store your functions in an array (scoped to the wrapping function) and check for an entry if the parameter passed is a string, reverting to a default method ("init" here) if the parameter is an object (or null).

然后你可以像這樣調(diào)用方法......

Then you can call the methods like so...

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

Javascript 的參數(shù)"變量是一個(gè)包含所有傳遞參數(shù)的數(shù)組，因此它適用于任意長度的函數(shù)參數(shù).

Javascripts "arguments" variable is an array of all the arguments passed so it works with arbitrary lengths of function parameters.

這篇關(guān)于如何使用方法創(chuàng)建 jQuery 插件?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！