Méthode d'écriture standard pour le développement de plug-ins jQuery

Avant-propos

Pour faire du développement Web de nos jours, jquery est presque indispensable Même l'artefact VS a commencé à intégrer Jquery et ui dans des projets Web dans la version 2010. Quant aux avantages de l’utilisation de jquery, je n’entrerai pas dans les détails ici, tous ceux qui l’ont utilisé le savent. Aujourd'hui, nous allons discuter du mécanisme de plug-in de jquery. Jquery possède des milliers de plug-ins tiers. Parfois, nous avons écrit une fonction indépendante et souhaitons la combiner avec jquery. Nous pouvons utiliser l'appel de chaîne jquery. écrivez-le sous la forme d'un plug-in. Par exemple, ce qui suit est une démo qui étend simplement l'objet Jquery :

        //sample:扩展jquery对象的方法，bold()用于加粗字体。
        (function ($) {
            $.fn.extend({
                "bold": function () {                    ///631fb227578dfffda61e1fa4d04b7d25
                    /// 加粗字体
                    ///039f3e95db2a684c7b74365531eb6044
                    return this.css({ fontWeight: "bold" });
                }
            });
        })(jQuery);

Méthode d'appel :

Il s'agit d'une extension très simple. Ensuite, nous analysons le code ci-dessus étape par étape.

1. Le mécanisme de plug-in de jquery

Afin de faciliter la création de plug-ins par les utilisateurs, jquery fournit les méthodes jQuery.extend() et jQuery.fn.extend().

1. La méthode jQuery.extend() a une surcharge.

jQuery.extend(object), un paramètre est utilisé pour étendre la classe jQuery elle-même, qui est utilisée pour ajouter de nouvelles fonctions à la classe/espace de noms jQuery, ou des méthodes statiques, telles que les fonctions intégrées de jQuery. dans Ajax, les méthodes sont toutes appelées à l'aide de jQuery.ajax(), qui ressemble un peu à la méthode d'appel de méthode statique "nom de classe. nom de méthode". Écrivons également un exemple de jQuery.extend(object) :

        //扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {                ///631fb227578dfffda61e1fa4d04b7d25
                /// 比较两个值，返回最小值
                ///039f3e95db2a684c7b74365531eb6044
                return a < b ? a : b;
            },
            "maxValue": function (a, b) {                ///631fb227578dfffda61e1fa4d04b7d25
                /// 比较两个值，返回最大值
                ///039f3e95db2a684c7b74365531eb6044
                return a > b ? a : b;
            }
        });        //调用
        var i = 100; j = 101;        var min_v = $.minValue(i, j); // min_v 等于 100
        var max_v = $.maxValue(i, j); // max_v 等于 101

surcharge Version : jQuery .extend([deep], target, object1, [objectN])

Étendre un objet avec un ou plusieurs autres objets, renvoie l'objet développé .
Si aucune cible n'est spécifiée, l'espace de noms jQuery lui-même sera développé. Cela aide les auteurs de plugins à ajouter de nouvelles méthodes à jQuery.
Si le premier paramètre est défini sur true, jQuery renvoie une copie complète, copiant de manière récursive tous les objets trouvés. Sinon, la copie partagera la structure avec l'objet d'origine.
Les propriétés non définies ne seront pas copiées, cependant les propriétés héritées du prototype de l'objet seront copiées.
Paramètres
profonds : Facultatif. Si la valeur est true, fusionnez de manière récursive.
target : L'objet à modifier.
object1 : L'objet à fusionner dans le premier objet.
objectN : Facultatif. Objet à fusionner dans le premier objet.
Exemple 1 :
Fusionner les paramètres et les options, modifier et renvoyer les paramètres.

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);

Résultat : <code>结果：<br>

settings == { validate: true, limit: 5, name: "bar" }

Exemple 2 :
Fusionner les valeurs par défaut et les options sans modifier les valeurs par défaut.

var empty = {}; 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);
结果：
settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }

<code><br>这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。Cette méthode surchargée est généralement utilisée pour remplacer les paramètres par défaut du plug-in par des paramètres de plug-in personnalisés lors de l'écriture de plug-ins.

jQuery.fn.extend(object) étend l'ensemble d'éléments jQuery pour fournir de nouvelles méthodes (généralement utilisées pour créer des plug-ins).

Tout d’abord, jetons un coup d’œil à ce qu’est fn. En regardant le code jQuery, ce n'est pas difficile à trouver.

jQuery.fn = jQuery.prototype = {

　 init: function( sélecteur, contexte ) {.....};
};

JQuery original .fn = jQuery.prototype, qui est le prototype de l'objet jQuery. La méthode jQuery.fn.extend() est la méthode prototype d'extension de l'objet jQuery. Nous savons qu'étendre la méthode sur le prototype équivaut à ajouter une "méthode membre" à l'objet. La "méthode membre" de la classe ne peut être appelée que par l'objet de la classe, utilisez donc le jQuery.fn.extend(. object) méthode étendue, une instance de la classe jQuery Vous pouvez utiliser cette "fonction membre". Les méthodes jQuery.fn.extend(object) et jQuery.extend(object) doivent être distinguées.

2. Fonctions/fermetures anonymes auto-exécutables

     1. 什么是自执行的匿名函数?    
　　   它是指形如这样的函数: (function {// code})();
    2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
    3. 分析     
       (1). 首先, 要清楚两者的区别:     (function {// code})是表达式, function {// code}是函数声明.    
       (2). 其次, js"预编译"的特点:     js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.    
       (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;    
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

   另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……

  例如：
   bootstrap 框架中的插件写法：
   !function($){
　　//do something;
   }(jQuery);

   和 
   (function($){
　　//do something;
   })(jQuery); 是一回事。

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
     var a=1;
     (function()(){
　　　　var a=100;
　　})();
      alert(a); //弹出 1
更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域，防止插件"污染"

//闭包限定命名空间(function ($) {
    
})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法，制作插件

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight":function(options){            //do something
        }
    });
})(window.jQuery);

3.给插件默认参数，实现 插件的功能

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            this.each(function () {  //这里的this 就是 jQuery对象
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
            });

        }
    });    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
})(window.jQuery);

到这一步，高亮插件基本功能已经具备了。调用代码如下：

$(function () {
    $("p").highLight(); //调用自定义 高亮插件});

这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

 1 //闭包限定命名空间 2 (function ($) { 3     $.fn.extend({ 4         "highLight": function (options) { 5             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 6             return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用 7                 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 8                 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom 9                 //根据参数来设置 dom的样式10                 $this.css({11                     backgroundColor: opts.background,12                     color: opts.foreground13                 });14             });15 16         }17     });18     //默认参数19     var defaluts = {20         foreground: 'red',21         background: 'yellow'22     };23 })(window.jQuery);

View Code

4.暴露公共方法 给别人来扩展你的插件（如果有需求的话）
比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。

    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>"; 
    }

5.插件私有方法
 有些时候，我们的插件需要一些私有方法，不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置，如：为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下：

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight": function (options) {            //检测用户传进来的参数是否合法
            if (!isValid(options))                return this;            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });                //格式化高亮文本
                var markup = $this.html();
                markup = $.fn.highLight.format(markup);
                $this.html(markup);
            });

        }
    });    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>";
    }    //私有方法，检测参数是否合法
    function isValid(options) {        return !options || (options && typeof options === "object") ? true : false;
    }
})(window.jQuery);

调用

        //调用
        //调用者覆盖 插件暴露的共公方法
        $.fn.highLight.format = function (txt) {            return "<em>" + txt + "</em>"
        }
        $(function () {
            $("p").highLight({ foreground: &#39;orange&#39;, background: &#39;#ccc&#39; }); //调用自定义 高亮插件
        });

本文讲解了jQuery插件开发标准写法 ，更多相关内容请关注php中文网。

相关推荐：
JQuery中DOM操作——wrap

React this绑定的几点思考

django 使用 request 获取浏览器发送的参数

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!