如何在 Jquery 中创建插件？

引言

在 Jquery 中创建插件非常容易。在创建插件之前，我们需要了解插件中将使用的基本命名约定。常用的且最流行的命名约定是 Jquery.pluginName.js 或 Jquery.pluginName.versionNumber.js。在插件中使用版本号可以避免添加错误版本的插件。如果它是压缩文件，请尝试在 .js 扩展名之前添加 .min。 如果您想公开发布您的插件，请确保插件名称尚未被他人使用。

插件的基本结构非常简单。它看起来像下面的脚本

(function($){
$.fn.pluginName = function(){
return this;
};
})(jQuery);

在上面的代码中，我们使用了一个匿名函数，它将 jQuery 作为参数。只要 DOM 加载完成，这个函数就会被调用。任何插件可能需要一些参数，这些参数将在初始化时由用户传递。如果它需要两个或三个参数，那么我们可以直接在插件函数中定义。但是，如果插件需要多个参数或具有一些默认值，那么我们不能使用直接参数。在这里，我们需要使用 Json 对象作为参数。

(function($){
$.fn.pluginName = function(options){
var defaultOptions = {parameter1:'value 1', parameter2:'value2'};
var finalOptions=[];
$.extend(finalOptions, defaults, options);
return true;
};
})(jQuery);

在上面的代码中，我们为参数定义了一些默认值。这意味着如果用户没有传递任何参数，那么将使用默认参数。如果用户传递了任何参数，那么将采用这些参数并将其与 finalOptions 合并。为此，我们使用了 extend 函数。现在，我将使用一个简单的例子来更好地解释插件。您可以在 此处 查看演示，以更好地了解如何创建 jquery 插件。假设我想创建一个插件来更改背景颜色。那么，我的插件代码将如下所示

(function($){
$.fn.testPluin = function(options){
var defaultOptions = {backColor:'yellow' };
var finalOptions=[];
$.extend(finalOptions, defaults, options);
return this.css('background': finalOptions.backColor);
};
})(jQuery);

//Intitialize:
$("div").testPluin({backColor: 'red'});
//html
<div> This is simple plugin </div>

在这里，我们在初始化时传递了红色。因此，div 将获得红色背景颜色。如果我们没有传递任何参数，那么将使用默认颜色，即黄色。