javascript - 如何使用方法创建jQuery插件？(How to create a jQuery plugin with methods?)

Question

I'm trying to write a jQuery plugin that will provide additional functions/methods to the object that calls it.

(我正在尝试编写一个jQuery插件，它将为调用它的对象提供额外的函数/方法。)

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.

(我在线阅读的所有教程（过去2小时内一直在浏览）包括最多如何添加选项，但不包括其他功能。)

Here's what I am looking to do:

(这是我要做的事情：)

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

(//通过调用该div的插件将div格式化为消息容器)

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

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);
  }
};

How can I achieve something like that?

(我怎样才能实现这样的目标？)

Thank you!

(谢谢！)

---

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

(2013年11月18日更新：我已经改变了Hari的评论和赞成的正确答案。)

  ask by Yuval Karmi translate from so

Answer 1

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.

(根据jQuery插件创作页面（ http://docs.jquery.com/Plugins/Authoring ），最好不要混淆jQuery和jQuery.fn名称空间。)

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 );

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).

(基本上，您将函数存储在数组中（作用于包装函数），如果传递的参数是字符串，则检查条目，如果参数是对象（或null），则恢复为默认方法（此处为“init”）。)

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

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

(Javascripts“arguments”变量是传递的所有参数的数组，因此它适用于任意长度的函数参数。)