jQuery實用模板

Question

我正在嘗試從jQuery Boilerplate創建一個jQuery插件。 我還想與此插件分開創建另一個實用程序類型的插件。 我一直在Google上下搜索各種方法來創建這樣的方法。 我遇到了很多不同的類型，我不確定從哪里開始，所以我轉向StackOverflow，希望可以幫助我。

我的目標是調用我的插件（實用程序方法/函數）並向其傳遞一些選項和數據，並根據所調用的函數將其返回給我一些數據，無論是對象，字符串還是數組。

我想做這樣的事情：

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

但是，我想尊重插件名稱空間，適當的jQuery禮節等。

Answer 1

jQuery有兩種類型的實用程序“插件”（由於缺乏更好的用語）。 第一種是向實際的jQuery對象添加方法，也是最容易實現的方法；第二種是向jQuery對象實例添加期望發生特定事件（鏈接，迭代，上下文管理，事件等）的實例。

實用功能

這很容易，因為您無需操縱jQuery對象，而只是像對任何普通JavaScript對象一樣擴展jQuery。 只需將功能分配給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)
}