本文转自:http://www.cnblogs.com/joey0210/p/3408349.html

前言  

今昔做web开发,jquery 差不离是必不可少的,就连vs神器在二零一零版本开首将Jquery
及ui
内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都精晓。明天大家来研讨下jquery的插件机制,jquery有着广大的第①方插件,有时大家写好了一个独自的机能,也想将其与jquery结合起来,能够用jquery链式调用,这即将扩展jquery,写成插件情势了,如下边正是1个简易扩张Jquery对象的demo:

jQuery 1😉

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

jQuery 2😉

调用情势: jQuery 3
那是一个卓殊简单的扩展。接下来大家一步步来分析上面包车型客车代码。

一 、jquery的插件机制

为了方便用户创设插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有七个重载。

  jQuery.extend(object)
,三个参数的用于扩张jQuery类自己,也等于用来在jQuery类/命名空间上扩充新函数,恐怕叫静态方法,例如jQuery内置的
ajax方法都以用jQuery.ajax()这样调用的,有点像 “类名.方法名”
静态方法的调用格局。上边我们也来写个jQuery.extend(object)的例子:

jQuery 4😉

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

重载版本:jQuery.extend([deep], target, object1, [objectN])

   用一个或多少个别的对象来扩大3个对象,重临被扩张的靶子。   
借使不钦点target,则给jQuery命名空间自身进行扩充。那促进插件小编为jQuery扩充新点子。
  
假使第③个参数设置为true,则jQuery重回3个深层次的副本,递归地复制找到的别样对象。不然的话,副本会与原对象共享结构。
   未定义的品质将不会被复制,可是从目的的原型继承的习性将会被复制。 参数
   deep:       可选。如若设为true,则递归合并。   
target
:     待修改对象。    object1:   待合并到第3个目的的对象。
   objectN:   可选。待合并到第②个目的的对象。 示例1: 合并 settings 和 options,修改并回到
settings。
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果: ``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" } 这个重载的方法,我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩张 jQuery
成分集来提供新的法子(平日用来创设插件)。

首先大家来看fn 是如何东西呢。查看jQuery代码,就一举成功发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {…..}; };

原先 jQuery.fn =
jQuery.prototype,也正是jQuery对象的原型。那jQuery.fn.extend()方法正是增添jQuery对象的原型方法。大家知晓扩展原型上的点子,就也就是为目标添加”成员方法“,类的”成员方法“要类的靶子才能调用,所以使用jQuery.fn.extend(object)扩充的章程, jQuery类的实例能够行使那一个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法肯定要有别于开来。

二、自实施的匿名函数/闭包

     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); 是2回事。
匿名函数最大的用处是创设闭包(那是JavaScript语言的特色之一),并且还足以塑造命名空间,以压缩全局变量的利用。
例如:      var a=1;      (function()(){     var a=100;   })();
      alert(a); //弹出 1 越多 闭包和匿名函数 可查看
Javascript的匿名函数与自实施
那篇小说。

③ 、一步一步封装JQuery插件

接下去大家联合来写个高亮的jqury插件 1.定一个闭包区域,防止插件”污染”

//闭包限定命名空间
(function ($) {

})(window.jQuery);

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

jQuery 6😉

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

jQuery 7😉

3.给插件暗中认可参数,达成 插件的职能

jQuery 8😉

//闭包限定命名空间
(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);

jQuery 9😉

到这一步,高亮插件基本成效已经怀有了。调用代码如下:

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

此地不得不
直接调用,无法链式调用。大家领会jQuey是能够链式调用的,正是足以在三个jQuery对象上调用四个办法,如:
$(‘#id’).css({marginTop:’100px’}).addAttr(“title”,”测试“);
可是大家地点的插件,就不能够那样链式调用了。比如:$(“p”).highLight().css({marginTop:’100px’});
//将会报找不到css方法,原因在与自身的自定义插件在成就功用后,没有将
jQuery对象给重返出来。接下来,return
jQuery对象,让大家的插件也辅助链式调用。(其实不会细小略,正是执行完大家插件代码的时候将jQuery对像return
出来,和上边的代码没啥不相同)

jQuery 10jQuery 11

jQuery 12😉

 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.foreground
13                 });
14             });
15 
16         }
17     });
18     //默认参数
19     var defaluts = {
20         foreground: 'red',
21         background: 'yellow'
22     };
23 })(window.jQuery);

jQuery 13😉

View Code

4.爆出公共艺术 给外人来增加你的插件(假设有须求的话)
比如的高亮插件有二个format方法来格式话高亮文本,则大家可将它写成国有的,揭破给插件使用者,差异的应用着依据自身的要求来重写该format方法,从而是高亮文本能够呈现不一致的格式。

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

5.插件私有方法
 有个别时候,大家的插件须求有个别私房方法,不能被外面访问。例如
大家插件里面必要有个主意 来检查和测试用户调用插件时传出的参数是还是不是符合规范。
6.其余的片段安装,如:为您的插件参与元数据插件的支撑将使其变得更强有力。

完全的高亮插件代码如下:

jQuery 14😉

//闭包限定命名空间
(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);

jQuery 15😉

调用

jQuery 16😉

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

jQuery 17😉

 如发现文中内容有误欢迎交换提议!

 

作者:邹毅
要是认为本文让您全体收获,本文版权归作者和和讯共有,欢迎转载,但不可能不保留原来的书文连接。

 

相关文章

网站地图xml地图