jQueryプラグイン開発の標準的な書き方

前書き

現在、Web 開発には jquery がほぼ不可欠となっており、VS アーティファクトでも 2010 バージョンから Web プロジェクトに Jquery と ui が組み込まれ始めました。 jquery を使用する利点については、ここでは詳しく説明しません。jquery を使用したことのある人なら誰でも知っているでしょう。今日は、jquery のプラグイン メカニズムについて説明します。jquery には何千ものサードパーティ プラグインがあり、それを jquery と組み合わせることができます。これには jquery の拡張が必要です。たとえば、以下は Jquery オブジェクトを単純に拡張するデモです。

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

メソッドの呼び出し:

これは非常に単純な拡張です。次に、上記のコードを段階的に分析します。

1. jquery のプラグインの仕組み

ユーザーがプラグインを簡単に作成できるように、jquery は jQuery.extend() メソッドと jQuery.fn.extend() メソッドを提供します。

1. jQuery.extend() メソッドにはオーバーロードがあります。

jQuery.extend(object)、1 つのパラメーターは jQuery クラス自体を拡張するために使用され、jQuery クラス/名前空間または静的メソッドに新しい関数を追加するために使用されます。たとえば、jQuery の組み込み ajax メソッドは jQuery を使用します。 .ajax() はこのように呼び出されます。これは、「クラス名.メソッド名」の静的メソッド呼び出しメソッドに似ています。 jQuery.extend(object) の例も書いてみましょう:

        //扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {                ///<summary>
                /// 比较两个值，返回最小值
                ///</summary>
                return a 
                /// 比较两个值，返回最大值
                ///
                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

オーバーロードされたバージョン: jQuery.extend([deep], target, object1, [objectN])

オブジェクトを 1 つ以上の他のオブジェクトで拡張し、拡張されたオブジェクトを返します。
ターゲットが指定されていない場合は、jQuery 名前空間自体が展開されます。これは、プラグイン作成者が jQuery に新しいメソッドを追加するのに役立ちます。
最初のパラメータが true に設定されている場合、jQuery はディープ コピーを返し、見つかったオブジェクトを再帰的にコピーします。それ以外の場合、コピーは元のオブジェクトと構造を共有します。
未定義のプロパティはコピーされませんが、オブジェクトのプロトタイプから継承されたプロパティはコピーされます。
パラメータ
deep: オプション。 true に設定すると、再帰的にマージされます。
target: 変更されるオブジェクト。
object1: 最初のオブジェクトにマージされるオブジェクト。
objectN: オプション。最初のオブジェクトにマージされるオブジェクト。
例 1:
設定とオプションを結合し、設定を変更して返します。

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

結果: <code>结果：<br>

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

示例2：
合并 defaults 和 options, 不修改 defaults。

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" }

<br>这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

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

例 2:

デフォルトを変更せずにデフォルトとオプションを結合します。

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

このオーバーロードされたメソッドは、通常、プラグインを作成するときに、プラグインのデフォルト パラメーターをカスタム プラグイン パラメーターでオーバーライドするために使用されます。

jQuery.fn.extend(object) は、新しいメソッド (通常はプラグインの作成に使用されます) を提供するために jQuery 要素セットを拡張します。

まず、fnとは何かを見てみましょう。 jQuery コードを見ると、見つけるのは難しくありません。

jQuery.fn = jQuery.prototype = {🎜🎜 init: function( selector, context ) {.....};🎜};🎜🎜jQueryのプロトタイプであるオリジナルのjQuery.fn = jQuery.prototype物体。 jQuery.fn.extend() メソッドは、jQuery オブジェクトを拡張するプロトタイプ メソッドです。プロトタイプのメソッドを拡張することは、オブジェクトに「メンバー メソッド」を追加することと同じであることがわかっています。クラスの「メンバー メソッド」は、クラスのオブジェクトによってのみ呼び出すことができるため、 jQuery.fn.extend(オブジェクト）の拡張メソッド、jQueryクラスのインスタンスであるこの「メンバー関数」を利用することができます。 jQuery.fn.extend(object) メソッドと jQuery.extend(object) メソッドは区別する必要があります。 🎜🎜2. 🎜自己実行匿名関数/クロージャ🎜🎜

     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 获取浏览器发送的参数

以上がjQueryプラグイン開発の標準的な書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。