Question

我有一个自定义插件，其构造函数如下：

 (function($){

    $.fn.extend({ 

        myplugin: function(options) {
  [..]

在插件中，我有许多其他功能。现在我将我的插件附加到dom元素：

$('myelement').myplugin()

之后我想从包装文档向插件发送消息。基本上，我想从外部使用自定义参数调用内部函数。我怎样才能做到这一点？

非常感谢。

Answer 1

在开发jQuery插件时，我遵循以下模式。它非常有用：

(function($)   {
   $.fn.myWidget = function(options)  {
      var defaults = {
         // default options
      };
      // these are our final options
      var opts = $.extend(defaults, options);

      // private functions
      var myFunc = function(param) {
      };

      // our widget object
      var widget = {
         functionA: function(strMsg)  {
            // do something important or call internal function myFunc
         },


         functionB: function(idx)   {
            // do something important
         }
      };
      // return the widget object 
      return widget; // THIS WILL HELP YOU CALL FUNCTIONS ON YOUR WIDGET
   };
})(jQuery);

var w = $("#myDiv").myWidget();
w.functionA("Hell(o)");

另一种方法：

(function($)   {
   $.fn.myWidget = function(options)  {
      var defaults = {
         // default options
      };
      // these are our final options
      var opts = $.extend(defaults, options);

      // private functions
      var myFunc = function(param) {
      };

      this.functionA = function(strMsg) {
      };

      this.functionB = function(param) {
      };

      return this;

   };
})(jQuery);

var w = $("#myDiv").myWidget();
w.functionA("Hell(o)");

Answer 2

按照教程并通过公开辅助功能保留I部分。

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

例如，我们的插件的实现可能会定义一个名为“format”的函数来格式化hilight文本。

如果您使用该辅助功能（此处为“格式”）来调用您的插件，那么您应该很高兴。

Answer 3

插件和其他脚本之间最常见的通信方式是通过options对象。例如：

$.fn.extend({ 
    myplugin: function(options) {
        $.extend({
            hello: function(){
                return 'yo'; // default message
            }
        },options);
        alert(options.hello());
    }
});

$('#elem').myplugin({
    hello: function() {
        return 'hi';
    }
});

您还可以在同一名称空间中创建静态方法：

$.fn.extend({ 
    myplugin: function() {
        var hello = function(msg) {
            msg = msg || 'yo'; // default message
            alert(msg);
        };
        $.myplugin = {
            hello: hello
        };
    };
});

$('#elem').myplugin();
$.myplugin.hello('hi')

jQuery向插件发送消息

3 个答案: