jquery添加插件

时间 2019-11-07

标签 jquery 添加插件栏目 JQuery 繁體版

原文原文链接

转自：http://www.javashuo.com/article/p-ebjmnygd-hs.htmlcss

前言　　html

现在作web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就再也不赘述了，用过的都知道。今天咱们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时咱们写好了一个独立的功能，也想将其与jquery结合起来，能够用jquery链式调用，这就要扩展jquery，写成插件形式了，以下面就是一个简单扩展Jquery对象的demo：jquery

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

调用方式：

这是一个很是简单的扩展。接下来咱们一步步来解析上面的代码。web

1、jquery的插件机制ajax

为了方便用户建立插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。bootstrap

1. jQuery.extend() 方法有一个重载。闭包

　 jQuery.extend(object) ,一个参数的用于扩展jQuery类自己，也就是用来在jQuery类/命名空间上增长新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面咱们也来写个jQuery.extend(object)的例子：框架

//扩展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.extend([deep], target, object1, [objectN])dom

   用一个或多个其余对象来扩展一个对象，返回被扩展的对象。
   若是不指定target，则给jQuery命名空间自己进行扩展。这有助于插件做者为jQuery增长新方法。
   若是第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。不然的话，副本会与原对象共享结构。
   未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
参数
   deep:       可选。若是设为true，则递归合并。
   target:     待修改对象。
   object1:   待合并到第一个对象的对象。
   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)方法必定要区分开来。

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的匿名函数与自执行这篇文章。

3、一步一步封装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 出来，和上面的代码没啥区别）

  //闭包限定命名空间
  (function ($) {
      $.fn.extend({
          "highLight": function (options) {
              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 defaluts = {
         foreground: 'red',
         background: 'yellow'
     };
 })(window.jQuery);

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: 'orange', background: '#ccc' }); //调用自定义 高亮插件
        });