如何编写jquery插件


Posted in jQuery onMarch 29, 2017

前面的话

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件

类型

jQuery的插件主要分为3种类型

1、封装对象方法

这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如:parent()方法、appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时,我们是可以直接拿来就用的,只需引入jQuery库就行

2、封装全局函数

可以将独立的函数加到jQuery命名空间下,如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等,都是jQuery内部作为全局函数的插件附加到内核上去的

3、选择器插件

虽然jQuery的选择器十分强大,但是在少数情况下,还是会需要用到选择器插件来扩充一些自己喜欢的选择器

要点

1、jQuery插件的文件名推荐命名为jQuery.[插件名].js,以免和其他JS库插件混淆

2、所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

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

4、可以通过this.each来遍历所有的元素

5、所有的方法或函数插件,都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些,甚至可以在插件头部先加上一个分号,以免他人不规范的代码影响自身的插件代码

6、插件应该返回一个jQuery对象,以保证插件的可链式操作

7、避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,避免冲突。当然,也可以利用闭包来回避这种问题,使插件内部继续使用$作为jQuery的别名

闭包

利用闭包的特性,即可以避免内部临时变量影响全局空间,又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:

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

首先定义一个匿名函数function(){/*这里放置代码*/},然后用括号括起来,变成(function(){/*这里放置代码*/})这种形式,最后通过()这个运算符来执行。可以传递参数进行,以供内部函数使用

//为了更好的兼容性,开始前有个分号
;(function($){    //此处将$作为匿名函数的形参
  /*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(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()方法经常被用于设置插件方法的一系列默认参数
function foo(options){
  options=jQuery.extend({
    name:"bar",
    length:5,
    dataType:"xml"
  },options);
}

如果用户调用foo()方法的时候,在传递的参数options对象设置了相应的值,那么就使用设置的值,否则使用默认值

通过使用jQuery.extend()方法,可以很方便地用传入的参数来覆盖默认值。此时,对方法的调用依旧保持一致,只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码,从而使开发者使用起来更加直观明了

编写插件

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

编写设置和获取颜色的插件color(),该插件用于实现以下两个功能:

(1)设置匹配元素的颜色

(2)获取匹配的元素(元素集合中的第一个)的颜色

由于是对jQuery对象的方法拓展,因此采用拓展第一类插件的方法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);
<span id="test">测试文字</span>
<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);

2、封装全局函数的插件

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

例如新增两个函数,用于去除左侧和右侧空格。虽然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的选择解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每一个选择符执行一个函数,称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素,这样就可以找到匹配的元素节点

如$("div:gl(1)"),该选择器首先会获取所有的<div>元素,然后隐式地遍历这些<div>元素,并逐个将这些<div>元素作为参数,连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留,否则不保留,这样得到的结果就是一个符合要求的<div>元素的集合

选择器的函数一共接受3个参数,形式如下:

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

第一个参数为a,指的是当前遍历到的DOM元素

第二个参数为i,指的是当前遍历到的DOM元素的索引值,从0开始

第三个参数是m,它是由jQuery正则解析引擎进一步解析后的产物,是一个数组:其中最重要的一个是m[3],在$("div:gl(1)")中即为括号里的数字“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 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
You might like
php字符串函数学习之strstr()
2015/03/27 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python访问MySQL封装的常用类实例
2014/11/11 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python使用KNN算法手写体识别
2018/02/01 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python检测IP地址变化并触发事件
2018/12/26 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python实现图片插入文字
2019/11/26 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
计算s=f(f(-1.4))的值
2014/05/06 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
特岗教师个人总结
2015/02/10 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js