一份菜单

开发jQuery插件的5个简单步骤

如果您是开发人员,则在开发交互式Web应用程序时,可能会发现自己一遍又一遍地编写类似(或相同)的代码。在这些情况下,出现了对可重用性的需求。同时,您可能还会遇到范围和命名空间问题。

同样,在许多其他情况下,您需要可移植的代码,以便可以在其他项目中实现相同的功能。

解决这类问题的方法之一就是编写jQuery插件。

简而言之,使用jQuery开发功能或交互或任何实现;特别是当使用jQuery插件时,它在避免范围问题,可移植性,抽象性方面将是一个优势,并且还可以节省大量时间。

开发jQuery插件时如何思考?:简而言之,开发jQuery插件时,您只是将自己编写的函数添加到jQuery名称空间。我们也可以说您将要向jQuery名称空间的$ .fn对象或fn对象添加任何方法,因为我们知道$是jQuery名称空间的别名。

以下是开发jQuery插件所涉及的一些标准步骤。另外,请确保已将jquery库包含在文件中。

1.使用自定义名称创建插件

Let say we are creating a plugin call 吨. The following is the sample script for this 吨 function.

$.fn.tgs = function() {
 
  // Our plugin implementation goes here
 
};

添加后“tgsbegin” function to “$.fn”对象,此功能现在在jQuery名称空间中可用,现在您可以如下所示初始化此功能:

$("#someId").tgs( ) ;

2.针对多个dom元素

在此类需求期间,您可以使用jQuery“each”功能如下图所示:

$.fn.tgs = function() {
 
  this.each(function() {
    // You will get 每 targeted element here
  });
};

现在,如果您正在使用插件使用类来定位dom元素的多次出现,则可以按以下步骤完成:

$(".someClass").tgs();

3.使插件与其他jQuery函数可链接

在这种要求期间,只需返回以下结果即可“tgs”可以链接其他jQuery函数的函数,如下所示:

$.fn.tgs = function() {
  return this.each(function() {
    // You will get 每 targeted element here
    // and it will be returned back
  });
};

现在,您可以将其与其他jQuery函数链接起来,如以下示例所示:

$("#someId").tgs().removeClass("someClass");

4.通过传递选项使插件可配置

使用jQuery.extend可以合并两个对象。

在这里,我们使用此方法将传递的选项与声明的默认选项合并。请参考以下示例:

$.fn.tgs = function(options) {
  var settings = $.extend({

    // Below are the default settings.
    fontStyle: "bold",
    backgroundColor: "yellow"
  }, options );
      
};

在上面的脚本中,将按如下所示传递选项:

$( "#someId" ).tgs({
    fontStyle: "italic",
    backgroundColor: "white"
});

上面的脚本将合并传递的选项和默认选项,并且更改将生效。

您还可以通过创建对象文字并将其作为选项传递,如下所示传递此选项:

var options = {
  fontStyle: "italic",
  backgroundColor: "White"
};

$("#someId").tgs(options);

您可能还希望将插件实现内的方法和变量设为私有,并在范围内添加整个插件以提供抽象。

5.自调用功能或关闭

最后,您可以通过在自调用函数或Closure中编写插件,使其具有上述所有功能,如下所示。

另外,我们讨论了 javascript关闭 在前一篇文章中。

(function($){

  $ .fn.tgs = function(options) {
    var settings = $.extend({

      // Below are the default settings.
      fontStyle: "bold",
      backgroundColor: "yellow"

    }, options );

    //Plugin implementation goes here as required

    //Return something from here as required
        
  };

}(jQuery));

如果您喜欢这篇文章,您可能还会喜欢..

  1. 50个3d捕鱼达人 Sysadmin教程
  2. 50个最常用的3d捕鱼达人命令(包括示例)
  3. 排名前25位的最佳3d捕鱼达人性能监视和调试工具
  4. 妈妈,我找到了! 15个实用的3d捕鱼达人 Find命令示例
  5. 3d捕鱼达人 101 Hacks第二版电子书 3d捕鱼达人 101黑客手册

Bash 101 Hacks书 Sed和Awk 101黑客手册 Nagios Core 3书 Vim 101黑客手册

{ 2 评论… 加一 }

  • 哈尼夫 2015年11月23日,晚上11:59

    做得好 !!您能解释原生javascript对象,继承吗?

  • 克里斯 2016年2月22日,上午1:15

    你好先生,

    您可能需要修改示例3,以更加清楚。
    `//,它将返回“

    请注意,`it`是jQuery对象,`$ .fn`

    ðŸ™,

发表评论