专栏首页技术翻译如何编写自己的jQuery插件?

如何编写自己的jQuery插件?

对于那些不知道的人来说,jQuery是一个JavaScript库,它包含了许多特性,非常小而且速度很快。它还包括一个易于使用的API,在所有浏览器上都是兼容的,并且可以很容易的进行HTML遍历、动画、DOM操作和事件处理。它不仅可扩展,而且经久耐用。因此,客户端脚本自开发以来变得容易得多。

什么是jQuery插件?

jQuery由原型对象组成,在某些时候可能需要一些操作和扩展。出于同样的目的,jQuery插件被设计为对象继承添加的任何其他方法的一种方式。不仅如此,在创建jQuery对象时,这些附加方法并不是孤立的,而是在创建jQuery对象时使用其余的方法(已经继承的)调用。jQuery插件可以jQuery库中存在的各种方法的形式单独使用。每个方法都是一个插件。但是,在新的情况下,插件也可以自定义创建,这并不是一项非常困难的任务。

jQuery是如何工作的?

要理解jQuery是如何工作的,你需要遵循以下步骤:

· 创建一个带有所有基本标记的HTML文档,并调用jQuery.js文件。

· 开发人员预先考虑并将代码的可执行命令封装到onload()函数中,以确保在将文档加载到浏览器后立即执行命令。

· 有时,由于图像加载的延迟,文档不会完整加载。为了确保加载后可以处理完整的文档,开发人员在其代码中提供了一个ready事件。

· ready事件的完整脚本(封装在其中的函数)放在前面创建的HTML文档中。保存和运行文档将确保你的代码使用输出执行。

· 此函数可以包含执行特定任务的任何事件(子事件)或命令。

什么是基本插件签名?

$.fn.pluginName = function() {
this.css( "color", "yellow" );
 }; 
$( "a" ).pluginName();

如上面所示,插件开始其身份创建。pluginName替换为正在创建的插件的名称,后跟一个函数以及括号中的所有必需参数。接下来,函数中的下一个语句(this.css确保将CSS应用于某些文本,使其颜色变为黄色。最后一行调用插件函数将所有带有a“标签的链接变为黄色。

保护$Alias并添加作用域

编写jQuery插件时总是假定$使用jQuery函数的别名。$在JavaScript库中非常有名。因此,当需要多个jQuery库时,使用$可能会产生冲突。因此,为了使我们能够将jQuery与其他插件一起使用。必须将代码放在立即调用函数的表达式中。这之后是jQuery的传递,然后命名它的参数$.

添加私有方法和变量

在JavaScript中,函数包含多个变量和其他函数,这些变量和函数主要可以在函数内部访问,从而使元素成为私有。立即调用的函数表达式提供了访问私有变量和方法的最佳方法。

在解析了别名($)之后,可以在此处理解添加私有方法或变量:

(function($) {
  $.fn.pluginName = function() {
   // private variables
   var privatevar1 = '';
   var privatevar2 = '';
   // private methods
   var myPrivateMethod = function() {
    // do something ...
   }
})(jQuery);

只能通过立即调用函数才能添加私有变量并启用其使用:

(function($){
  var col = “yellow”;$.fn.pluginName = function() {
  this.css("color", col);
  return this;
  };
}(jQuery)); 

只能在函数的范围内调用私有方法。只有其他私有方法或公共方法有权调用这些私有方法。这也适用于访问私有变量。

添加公共方法

向jQuery插件添加方法是在私有方法中完成的。唯一的区别是方法的执行。当该方法提供“this”运算符时,该方法变为公共方法。这样,它也可以在函数范围之外访问。添加此类公共方法的目的可以是在范围外执行函数,也可以从范围外访问公共变量和方法。

(function($) {
  $.fn.pluginName = function() {
   // public methods
   this.initialize = function() {
    // do something ...
    return this;
   };
   this.myPublicMethod = function() {
    // do something ...
   };
})(jQuery);

接受插件自定义选项

在某些情况下,当你继续添加插件时,插件会变得越来越复杂。因此,最好让你的插件开始接受一些选项并使其可自定义。

(function($) {
    $.fn.pluginName = function(options) {
        var defaults = {
            color: "white",
            'background-color': "#556b2f"
        };
        var settings = $.extend({}, defaults, options);
        return this.css({
            color: settings.color,
            'background-color': settings.background - color
        });
    };
}(jQuery));

结合所有技术,编译了以下示例插件:

(function($) {
    $.fn.pluginName = function(options) {
        var defaults = {
            color: "white",
            'background-color': "#556b2f"
        };
        var settings = $.extend({}, defaults, options);
        if (this.length > 1) {
            this.each(function() { $(this).pluginName(options) });
            return this;
        }
        // private variables
        var privatevar1 = '';
        var privatevar2 = '';
        // private methods
        var myPrivateMethod = function() {
            // do something ...
        }
        // public methods 
        this.initialize = function() {
            // do something ...
            return this;
        };
        this.myPublicMethod = function() {
            // do something ...
        };
        return this.initialize();
    }
})(jQuery);

这里,方法'each()'用于循环遍历元素集合。此外,此方法的返回值是this.append()方法,该方法接受回调,返回时我们将能够看到集合中要追加的元素。

原文标题《How to Write Your Own jQuery Plugin 》

作者:Rajesh Kumar

译者:lemon

不代表云加社区观点,更多详情请查看原文链接

原文链接:https://dzone.com/articles/how-to-write-your-own-jquery-plugin

原文作者:Rajesh Kumar

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 机器学习如何改变软件开发

    让我们把几件事弄清楚。虽然神经网络、深度学习、机器学习和人工智能似乎都是一样的,但它们都有各自的历史、起源和等级制度。

    liuxuewen
  • 机器学习和深度学习有什么区别?

    在本文中,我们将研究深度学习和机器学习之间的差异。我们将逐一了解它们,然后讨论他们在各个方面的不同之处。除了深度学习和机器学习的比较外,我们还将研究他们未来的趋...

    liuxuewen
  • 揭开人工智能、机器学习和深度学习的神秘面纱

    深入学习,机器学习,人工智能——所有代表分析的未来的流行词。在这篇文章中,我们将通过一些现实世界的例子来解释什么是机器学习和深度学习。在以后的文章中,我们将探讨...

    liuxuewen
  • C++反汇编第一讲,认识构造函数,析构函数,以及成员函数

              C++反汇编第一讲,认识构造函数,析构函数,以及成员函数 以前说过在C系列下的汇编,怎么认识函数.那么现在是C++了,隐含有构造和析构函数 ...

    IBinary
  • js原型入门

    本文主要是根据《head first javascript程序设计》摘抄学习而成,学习采用这本书主要是一位阿里大佬的建议,经过近期的学习阅读,发现确实比其他的j...

    RobinsonZhang
  • Laravel源码笔记(一)程序结构与生命周期

    说起PHP框架,就不得不提大名鼎鼎的Lavarel。作为一个“专为Web艺术家而创造”的框架,其优雅、简洁的开发体验吸引了一大批Web开发者,并成为PHP社区中...

    asterDY
  • 一段探索React自建内部构造的旅程

    在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性,特别是生命周期。

    一个会写诗的程序员
  • 开发自己的Data Access Application Block[下篇]

    上接:[原创] 我的ORM: 开发自己的Data Access Application Block - Part I 4. Database 下面来介绍重中之重...

    蒋金楠
  • JavaScript实现简单的双向数据绑定

    双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变。反之,当UI视图改变之后相应的数据也同步...

    laixiangran
  • JS面向对象二:this/原型链/new原理

    也可以看看这篇文章周大侠啊 进击的 JavaScript(六) 之 this先了解一下`this的四种绑定规则和箭头函数的this绑定

    代码之风

扫码关注云+社区

领取腾讯云代金券