Question

我的jQuery函数很长，我想将其作为插件分开。通常，大多数jquery插件都有一个选择器元素，如下所示。

  ;( function( $, window, document, undefined )
    {
    'use strict';
    $.fn.myPlugin = function( options )
    {
       // codes goes here
    }
    })( jQuery, window, document );

，用法是这样的。

 $('.element').myPlugin();

但是在我的情况下，javascript函数实际上并不需要选择器元素，它只需要一个值（参数）。

e.g 
function coolMethods(Str){
     return Str + doSomething;
}

那么，我如何将其用作插件？

我希望用法是这样

myPlugin.coolMethods(Str) // and this should return a value.

Answer 1

没有问题！您可以在这种情况下创建插件，并在每个元素上使用它而与它没有任何关系！通常，您的函数不必使用JQuery元素。

示例：

$.fn.NewFunc /*Your plugin function*/ = function(param1){
    console.log("Oh! It's ok!!");
    console.log(arguments);
};

用法：

$.fn.NewFunc("Hello!");

或

$("").NewFunc("I Am An Argument!");

甚至：

$("AnySelector").NewFunc("param1", "param2");

如果您不需要selector选择的元素，则可以使用类似以下的其他方式（这不是插件）：

$.NewFunc = function(p1, p2){/*do somethings*/};

并类似使用它：

$.NewFunc("param1", "param2");

Answer 2

如果您不需要任何jquery功能（$(selector).部分），并且想像这样

myPlugin.CoolMethod("abc")

然后您需要一个namespace而不是一个插件。

可以通过多种方法来生成名称空间和脚本来帮助实现此目的，但是实质上，名称空间是一个包含函数的对象，基本设置为：

var myPlugin = {};

myPlugin.CoolMethod = function(param1) {
  return param1 + param1;
};

// to use this:
console.log(myPlugin.CoolMethod("abc"))

一旦开始使用名称空间，则可以在该名称空间中包含私有方法/变量（如果需要），并且可以轻松添加其他方法/子命名空间。

设置名称空间的另一种常见方式是：

var myPlugin = myPlugin || {};

(function(myplugin, $) {

  // can also use $ within the namespace declaration
  myplugin.CoolMethod = function(param1) {
    return param1 + param1;
  };

})(myPlugin, jQuery);

// to use this:
console.log(myPlugin.CoolMethod("abc"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

这是我的版本

(function ($, window, document, undefined) {
    'use strict';

    var PLUGIN_NAME = 'myPlugin';

    function plugin(options) {    
         var opts = $.extend(true, {}, $[PLUGIN_NAME].defaults, options);
        _print(opts.name);
    }

    var _print = function (name) {
        console.log(name);
    };       

    $[PLUGIN_NAME] = function (options) {
        new plugin(options);
    };

    $[PLUGIN_NAME].defaults = {        
        name: 'John'        
    };
}(jQuery, window, document));

用法：

$.myPlugin({
    name: 'Suzy'
});

或

$.myPlugin();

Working example

创建基于参数的jQuery插件

3 个答案: