Question

我有一个jQuery函数如下：

(function ($) {
    $.fn.autoSuggest = function (data, options) {
        function add_selected_item(data, num) {
            (function ($) {
                $.fn.autoSuggest = function (data, options) {
                    alert(data);
                }
            })(jQuery);
        }
    }
})(jQuery);

如果我想从此函数外部调用本地add_selected_item()函数，我该怎么做？

我尝试过：

$.autoSuggest.add_selected_item(data, opt);

但是$.autoSuggest获得了undefined。

还在用jQuery学习绳索。如果有的话，我不确定如何实现这一目标。

谢谢！

Answer 1

试试这个：

$.extend({
  autoSuggest: function(){
    ...
  }
});

或

$.fn.autoSuggest = function(){
  ...
};

Answer 2

创建结构合理的jQuery插件的最佳资源是Plugins/Authoring documentation。与您的帖子相关的部分是Namespacing部分。

总而言之，您正在另一个函数中定义函数add_selected_item，该函数将其范围限定在autoSuggest函数内。这意味着add_selected_item只能从autoSuggest内部调用。这就是您尝试访问时之前尝试产生undefined的原因。

您的解决方案非常接近jQuery文档中提供的示例存根。看看下面的内容，特别是“方法调用逻辑”之后的行：

(function( $ ){

  var methods = {
    init : function( options ) { // THIS },
    show : function( ) { // IS   },
    hide : function( ) { // GOOD },
    update : function( content ) { // !!! }
  };

  $.fn.tooltip = function( method ) {

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

  };

})( jQuery );

此插件中“内部”功能的用法如下：

$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

您可以将相同的模式应用于您的插件，如下所示：

(function($) {
    var methods = {
        init: function(data, options) {
            //put your init logic here.
        },
        add_selected_item: function(data, num) {
            //here's your other method
        }
    };

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

注意：我没有测试过上面的代码，因为我不知道你的插件的意图。仅将此用作关于如何重构代码的建议。

使用Jquery调用本地函数

2 个答案: