闭包

  利用闭包的特点,即能够幸免当中目前变量影响全局空间,又能够在插件内容继续接纳$作为jQuery的别称。常见的jQuery插件都是以下那种样式的:

(function(){
   /*这里放置代码*/ 
})();

  首先定义二个无名氏函数function(){/*此地放置代码*/},然后用括号括起来,变成(function(){/*此地放置代码*/})那种样式,最后通过()那几个运算符来实行。能够传递参数实行,以供内部函数使用

//为了更好的兼容性,开始前有个分号
;(function($){        //此处将$作为匿名函数的形参
    /*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery);            //这里就将jQuery作为实参传递给匿名函数了

  上面的代码是1种常见的jQuery插件的布局

 

编写插件

一、封装jQuery对象方法的插件

  编写设置和得到颜色的插件color(),该插件用于落到实处以下三个效益:

  (一)设置相配成分的颜料

  (二)获取相称的成分(成分集结中的首个)的颜料

  由于是对jQuery对象的主意进行,因此使用拓展第3类插件的法门jQuery.fn.extend()来编排,那里给那么些主意提供了三个参数value,要是调用方法的时候传递了value这些参数,那么就是用那些值来安装字体颜色,不然正是获得相配成分的字体颜色的值

;(function(){
    jQuery.fn.extend({
        "color":function(value){
            if(value == undefined){
                return this.css("color");
            }else{
                return this.css("color",value);
            }          
        }             
    }); 
})(jQuery);

  实际上,CSS()方法内容早已有咬定value是不是为undefined的编写制定,所以才足以凭借传递参数的不如而回到差别的值。由此,代码能够去除如下

;(function(){
    jQuery.fn.extend({
        "color":function(value){
            return this.css("color",value);      
        }             
    }); 
})(jQuery);

测试文字
<input type="color" id="color">
<script>
;(function($){
  $.fn.extend({
    "color":function(value){
      return this.css("color",value);      
    }             
  }); 
})(jQuery);
$('#color').on('change',function(){
  $('#test').color($(this).val());
})
</script> 

  其它,要是要定义一组插件,能够运用如下所示写法:

;(function(){
    jQuery.fn.extend({
        "color":function(value){
          //插件代码
        },
        "border":function(value){
          //插件代码
        },
        "background":function(value){
          //插件代码
        }              
    }); 
})(jQuery);

二、封装全局函数的插件

  这类插件是在jQuery命名空间内部增添2个函数

  举例新增加五个函数,用于去除右边和右侧空格。固然jQuery已经提供了jQuery.trim()方法来去除两端空格,但在少数情形下,会只盼望去除某旁边的空格

  去除左边、左边的空格的函数分别写成如下jQuery代码。(text||””)部分是用于幸免传递进入的text这些字符串变量处于未定义的相当景况,如若text是undeined,则赶回字符串””,不然再次来到字符串text。这些管理是为了保险接下去的字符串替换方法replace()方法不会出错

;(function($){
   $.extend({
      ltrim:function( text ){
            return (text || "").replace(/^\s+/g,"");
        },
        rtrim:function(     text ){
               return (text || "").replace(/\s+$/g,"");
        }
    }); 
})(jQuery);

var $str = "    test    ";
console.log($.trim($str));//'test'
console.log($.ltrim($str));//'test    '
console.log($.rtrim($str));//'    test'

3、自定义选择器

  jQuery以其庞大的选拔器著称,那么jQuery的采纳器的干活原理是如何吧?

  jQuery的精选解析器首先会使用1组正则表明式来分析选拔器,然后针对解析出的每叁个选取符实行八个函数,称为选拔函数。最终依照这么些选用函数的再次回到值为true如故false来决定是还是不是保留那些因素,那样就足以找到相配的因秋日点

  如$(“div:gl(1)”),该选取器首先会拿走具备的<div>成分,然后隐式地遍历这么些<div>元素,并各种将这一个<div>成分作为参数,连同括号里的“一”等一些参数一同传递给gt对应的挑选器函数举行判定。假如回去true则保留,不然不保留,那样获得的结果正是3个符合须求的<div>成分的集聚

  选取器的函数一共收受贰个参数,方式如下:

function (a,i,m){
         //...
}

  第三个参数为a,指的是方今遍历到的DOM成分

  第3个参数为i,指的是当下遍历到的DOM成分的索引值,从0开始

  第九个参数是m,它是由jQuery正则解析引擎进一步分析后的产物,是1个数组:当中最器重的叁个是m[3],在$(“div:gl(1)”)中即为括号里的数字“一”。

  在jQuery中一度有lt、gt和eq选用器,因而那里写一个在乎两者之间(between)的选用器

  思路:在上头的多个参数中,m[3]为”a,b”的形式,因此把m[3]用”,”分隔,然后跟索引值i举行对照,假设i在m[3]代表的界定之间就回到true,不然为false

;(function($){
    $.extend($.expr[":"],{
        between:function(a,i,m){
            var temp=m[3].split(",");
            return +temp[0]<i&&i<+temp[1];
        }
    });
})(jQuery);

  [注意]经测试,函数中第二个参数i的值始终为0,不可能获取索引值,那时就须要自造索引,代码如下

;(function($){
    var $index = -1;
    $.extend($.expr[":"],{
        between:function(a,i,m){
            var temp=m[3].split(",");   
            $index++;      
            return +temp[0]<$index&&$index<+temp[1];

        }
    });
})(jQuery);

<div>
  <i>0</i>
  <i>1</i>
  <i>2</i>
  <i>3</i>
  <i>4</i>
  <i>5</i>
</div>
<button id="btn">测试</button>
<script>
;(function($){
    var $index = -1;
    $.extend($.expr[":"],{
        between:function(a,i,m){
            var temp=m[3].split(",");   
            $index++;      
            return +temp[0]<$index&&$index<+temp[1];

        }
    });
})(jQuery);
$('#btn').click(function(){
  $('i:between(1,5)').css('background','lightblue');
});
</script>  

类型

  jQuery的插件重要分为3种等级次序

  一、封装对象方法

  那种插件是将目的方法封装起来,用于对经过采用器获取的jQuery对象开始展览操作,是最常见的1种插件。此类插件能够表明出jQuery选用器的精锐优势,有一定1部分的jQuery的点子,都以在jQuery脚本库内部通过那种样式“插”在基础上的,举例:parent()方法、appendTo()方法等。那个办法在近日来看都以jQuery本人自带的措施了。平日,大家是足以一向拿来就用的,只需引进jQuery库就行

  贰、封装全局函数

  能够将单身的函数加到jQuery命名空间下,如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等,都以jQuery内部作为全局函数的插件附加到基础上去的

  3、选拔器插件

  即使jQuery的选取器11分有力,然则在少数气象下,依然会要求用到选拔器插件来扩大华晨些协调喜欢的采纳器

 

日前的话

  编写插件的目的是给已经有的一文山会海措施或函数做叁个包装,以便在别的地点重复使用,进步费用功用和有利于中期维护。本文将详细介绍如何编写jQuery插件

 

要点

  1、jQuery插件的文件名推荐命名叫jQuery.[插件名].js,防止和其余JS库插件混淆

  2、全部的对象方法都应该附加到jQuery.fn对象上,而全数的大局函数都应当附加到jQuery对象本人上

  三、在插件内部的this指向的是眼前通过选择器获取的jQuery对象,而不像一般方法那样,如click,内部的this指向的是DOM成分

  四、能够经过this.each来遍历全数的因素

  伍、全数的主意或函数插件,都应当以分行结尾。不然压缩的时候也许出现难题。为了稳当些,乃至能够在插件底部先加上二个分店,以防旁人不正规的代码影响本人的插件代码

  6、插件应该回到3个jQuery对象,以管教插件的可链式操作

  7、制止在插件内部使用$作为jQuery对象的外号,而应使用完整的jQuery来表示,防止争持。当然,也得以行使闭包来躲避那种主题素材,使插件内部继续利用$作为jQuery的小名

 

插件机制

  jQuery提供了五个用于开始展览jQuery功用的艺术,即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于开始展览封装对象方法的插件,jQuery.extend()方法用于进行封装全局函数的插件和选用器插件。那五个方法都接受叁个参数,类型为Object。Object对象的”名/值对”分别表示”函数或措施名/函数主体”

【jQuery.fn.extend()】

  jQuery.fn.extend()方法用于将一个目的的剧情统壹到jQuery的原型,以提供新的jQuery实例方法

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<script>
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$('#btn1').click(function(){
  $( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
  $( "input[type='checkbox']" ).uncheck();
});
</script>  

【jQuery.extend()】

  jQuery.extend()方法用叁个或多个其余对象来扩张二个目的,然后再次回到被增添的对象

jQuery.extend( target [, object1 ] [, objectN ] )

  举个例子,合并settings对象和options对象,修改并赶回settings对象

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

  jQuery.extend()方法平时被用来安装插件方法的1密密麻麻默许参数

function foo(options){
    options=jQuery.extend({
        name:"bar",
        length:5,
        dataType:"xml"
    },options);
}

  假诺用户调用foo()方法的时候,在传递的参数options对象设置了对应的值,那么就选用安装的值,不然使用私下认可值

  通过应用jQuery.extend()方法,能够很便宜地用传入的参数来覆盖暗中认可值。此时,对艺术的调用照旧保持壹致,只可是要传播的是三个映射而不是2个参数列表。那种体制比守旧的各种参数都去检查评定的办法不但灵巧而且越加从简。别的使用命名参数意味着再加多新采取也不会潜移默化过去编写的代码,从而使开拓者使用起来更为直观明了

 

相关文章

网站地图xml地图