Question

我试图从jQuery Boilerplate创建一个jQuery插件。我也想要创建另一个与此插件分开的实用程序类型插件。我一直在谷歌上下搜索不同的方法来创建一个等等。我遇到了很多不同的类型，我不确定从哪里开始，所以我转向StackOverflow，希望你能指导我。

我的目标是调用我的插件（实用程序方法/函数）并将一些选项和数据传递给它并让它返回一些数据，无论它是对象，字符串还是数组，具体取决于函数叫。

我想做这样的事情：

<script>
  var options = {option1: 'value1', option2: 'value2'};
  var output = $.myplugin('methodName', options);
</script>

但是，我想尊重插件命名空间，正确的jQuery礼仪等等。

Answer 1

jQuery有两种类型的实用程序“插件”（缺少一个更好的术语）。第一个是向实际的jQuery对象添加一个方法，也是最容易实现的方法，第二个是添加到jQuery对象实例，这些实例期望发生特定的事情（链接，迭代，上下文管理，事件等）。

效用函数

这很简单，因为你不操纵jQuery对象，而只是扩展jQuery，就像它是任何普通的JavaScript对象一样。简单地将一个函数分配给jQuery（或简称$）就可以了。

jQuery.myNewRadUtility = function myNewRadUtility(input, options) {
  // Do something with input and options
  return someValue; // return what you want
};

// Use it in your other code like so:
$.myNewRadUtility(input, options); // Or what ever you plan on doing

正如你所看到的，除了你将它分配给jQuery对象上的属性之外，它只是一个函数。

为了使事情更通用/混合方法，您可以将函数分开并将其写为通用，然后将其附加到jQuery特定文件中的jQuery或实用。

function myNewRadUtility() {
  // Do one and only one amazing thing here.
}

// If we have jQuery then lets use it.
if (jQuery) {
  jQuery.myNewRadUtility = myNewRadUtility;
}

// Or if you need to massage the input / output to conform to jQuery then
if (jQuery) {
  jQuery.myNewRadUtility = function() {
    // Massage the input here
    var result = myNewRadUtility();
    // Massage the output here
    return result;
  };
}

jQuery插件

这是一个更进步，因为你必须考虑如何使用jQuery对象。首先，使用jQuery的fn属性，如上所述附加到原型。然后，您必须管理实用程序需要使用的jQuery对象。这意味着迭代它们。最后，您需要返回相同或新实例，具体取决于您创建的实用程序的用途（通常不仅仅返回this）。

jQuery.fn.myNewRadUtility = function myNewRadUtility() {
  return $(this).each(function() {
    // Do something with $(this)
  });
};

// Use it in your other code like so:
$('p').myNewRadUtility();

显然还有很多东西，你可以做很多事情。但这是尝试尝试的最低要求。

Answer 2

你正在搜索这样的东西吗？

jQuery.myPlugin = function(method, args) {
    var myPlug = { 
         method1: function(y) {return y} 
         method2: function(a,b) {/*....*/}


    }; 
    return myPlug[method](arg)
}

jQuery实用程序Boilerplate

2 个答案:

效用函数

jQuery插件