Question

假设我已经创建了这个插件：

$.fn.my_namespace = function() {}

具有1级子功能：

$.fn.my_namespace.category_func = function() {}

和2级子功能（实际应用）：

$.fn.my_namespace.category_func.app_func() {
   alert(this);
   alert(this.selector);
}

执行：

$('div').my_namespace.category_func.app_func();

我现在如何在app_func中检索实际的选择器？在这种情况下，'this'似乎是父函数（category_func）而不是jQuery对象（selector）。

为什么？如何从app_func（）？

访问选择器

Answer 1

jQuerys .fn命名空间旨在保留functions，返回jQuery object / array of objects。

你不能只是在那里抛出一个新对象，并希望一切都能像那样工作。

Answer 2

我发誓以前我已经回答了这个问题，但我似乎无法找到它。 this始终引用您正在调用方法的对象。在这种情况下，您使用category_func作为该对象，并调用app_func()。

jQuery UI使用的模式是解决此问题的一种可能方法。它们允许您通过执行$elem.draggable('destroy');

之类的操作来调用UI对象上的方法

想象一下：

$.fn.my_namespace = function(submethod, method) {
  var args = [].slice.call(arguments, 1);
  var func = $.fn.my_namespace[submethod];
  if (func && method) {
    if ($.isFunction(func[method])) {
      args.shift(); // remove the method 
      func = func[method];
    }
  }
  if ($.isFunction(func)) { 
    // using .apply() allows us to pass `this` along to our "method functions"
    return func.apply(this, args);
  } else {
    // didn't find the method, return... or do something else...
    console.log('my_namespace', this, arguments);
    return this; // jQuery chaining default
  }
}

$.fn.my_namespace.category_func = function() {
   console.log('category_func', this, arguments);
   return this;
}
$.fn.my_namespace.category_func.method_func = function() {
   console.log('method_func', this, arguments);
   return this;
}

$("body").my_namespace('category_func', 'method_func', 10);
//method_func jQuery(body) [10]
$("body").my_namespace('category_func', 10);
//category_func jQuery(body) [10]
$("body").my_namespace(10, 'slow');
//my_namespace jQuery(body) [10, "slow"]

从子功能访问选择器？

2 个答案: