分享jQuery插件的学习笔记


Posted in Javascript onJanuary 14, 2016

插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。

一. 插件概述

插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序。也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可。

插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。

引入插件是需要一定步骤的,基本如下:

  • 1、必须先引入 jquery.js 文件,而且在所有插件之前引入;
  • 2、引入插件;
  • 3、引入插件的周边,比如皮肤、中文包等。

比如最常用到的表单验证插件: validate ,除了最基本的插件文件 jquery.validate.min.js 之外,还有着 messages_zh.js 等等各国的语言包可以供你使用。

如何使用该插件在这里就不进行描述了,可以去看看慕课网上的视频 jQuery插件——Validation Plugin ,里面详细的描述了这个插件的各种配置项,以及扩展。

触类旁通,一个优秀的插件,详细的说明文档必不可少,详细的看说明文档能,并且在本地进行测试能让你快速的入门各种插件的使用。

还有各种各样的别人编写好的插件可以供你使用:比如管理cookie的插件?cookie等等。

插件可以去jQuery官网的插件模块进行查找 The jQuery Plugin Registry

二. 自定义插件

前面我们使用了别人提供好的插件,使用起来非常的方便。如果市面上找不到自己满意的插件,并且想自己封装一个插件提供给别人使用。那么就需要自己编写一个 jQuery 插件了。

1、插件种类

按照功能分类,插件的形式可以分为一下三类:

  • 封装对象方法的插件;(也就是基于某个 DOM 元素的 jQuery 对象,局部性,使用最多)
  • 封装全局函数的插件;(全局性的封装)
  • 选择器插件。(类似与.find(),例如: color(red) 来选择所有的红色元素之类)

2、插件的基本要点

主要用以以解决各种因为插件导致的冲突、错误等问题,包括如下:

  • 插件名推荐使用 jQuery.[插件名].js,以免和其他 js 文件或者其他库相冲突(可以使用alert( $.[插件名] )验证是否存在该全局方法);
  • 局部对象附加 jQuery.fn 对象上,全局函数附加在 jQuery对象本身上(可以使用alert( $(selector).[插件名] )验证是否存在该局部方法);
  • 插件内部,this 指向是当前的局部对象(通过选择器获取的jQuery对象);
  • 可以通过 this.each 来遍历所有元素;
  • 所有的方法或插件,必须用分号结尾,避免出现问题(为了更稳妥,可在插件头部先加上一个分号);
  • 插件应该返回的是 jQuery 对象,以保证可链式操作;
  • 避免插件内部使用$,如果要使用,使用闭包把传递 jQuery 进去,使插件内部继续使用$作为jQuery的别名。
;(function($){//这里将$符作为匿名函数的形参
/*在此处编写代码,可使用$作为jQuery的缩写别名*/
})(jQuery);//这里将jQuery作为实参传递给匿名函数了

3、编写一个插件

假设我们的插件需求是:实现一个下拉菜单,在移入该元素时,把对应的下拉列表展现出来,移出时收回。并且可以设置其展开时的文字颜色。

根据惯例,我们在编写插件时,可以对于html结构有所约束。现在假设我们的页面上有如下HTML结构:

<ul class="list">
 <li>导航列表1
  <ul class="nav">
   <li>导航列表1</li>
   <li>导航列表2</li>
   <li>导航列表3</li>
   <li>导航列表4</li>
   <li>导航列表5</li>
   <li>导航列表6</li>
  </ul>
 </li>
 <li>导航列表2
  <ul class="nav">
   <li>导航列表1</li>
   <li>导航列表2</li>
   <li>导航列表3</li>
   <li>导航列表4</li>
   <li>导航列表5</li>
   <li>导航列表6</li>
  </ul>
 </li>
</ul>
<!-- 默认已经引入jquery -->

在这里,我们就对我们的插件实现效果有了第一个要求,必须在 对于需要hover展现的元素 内部下面建立 ul 列表,且 className 必须为 nav 。(插件内部都是根据该条件来做文章)

下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ,(符合上面所说的要求,默认已经导入)

;(function($){
 $.extend({ //插件定义在全局方法上
  "nav" : function (color){//传参,这里只是抛砖引玉,在您编写的时候,参数选项可以更加丰富,例如传入json对象等等
   $('.nav').css({//对展开的下拉列表设置样式,此处在下面进行详细说明
    "list-style" : "none",
    "margin" : 0,
    "padding" : 0,
    "display" : "none",
    "color":color//由用户控制hover时,展现出来列表的文字颜色
   });
   $('.nav').parent().hover(//这里用到了.nav的父节点(就是hover到的元素)
    //因为我们只能在插件要求的范围内进行设定,若是使用了外部的选择器,就违背了这个原则
    function (){
     $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法
    },function (){
     $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用,不然会有类似手风琴效果的出现,但那并不是我们需要的
    });
  }
 });
})(jQuery);

注意:这里使用css方法只是为了方便,在真实插件编写过程中,若存在如此大量的css样式编写时,推荐在外部定义css样式,例如可改写为:

插件依赖的css,需和插件一起导入html中

.hover{/*插件必须样式*/
 list-style: none;
 margin:0;
 padding: 0;
 display: none;
}

在插件内部修改。

$('.nav').addClass("hover");//将CSS与jQuery分离开来
$('.nav').css("color",color);//存在用户设置时启用,不存在就不用了(进行判断)

刚刚说的都是插件的js文件,最后要起到效果,别忘了页面的js中加上那么一句话(当前插件定义在全局方法上)

$(function (){
 $.nav("#999");//调用插件实现的全局方法,并且设置其展现背景颜色为#999。
});

就这样,我们的全局插件就编写,而且调用完成了,在你的页面刷新看看,是不是已经有了效果呢?

但是,因为我们的方法定义在全局上,现在只要页面中出现了我们插件所规定的结构,就会存在hover展现效果,但是有时我们往往想要的不是这样,我们希望它在局部,在我指定的元素调用。所以我们需要对其进行一些改造,让其变成局部方法,其实也很简单:

;(function($){
 $.fn.extend({//定义为局部方法
  "nav" : function (color){
   $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素
   $(this).find('.nav').css("color",color);//在当前元素下,增加了一次find筛选,实现在对应的元素中执行。
   $(this).find('.nav').parent().hover(
    function (){
     $(this).find(".nav").stop().slideDown("normal");
    },function (){
     $(this).find(".nav").stop().slideUp("normal");
    });
   return this;//返回当前的对象
  }
 });
})(jQuery);

我们去刷新一下浏览器。你会发现,咦,怎么没效果? 当然因为原来的代码是直接在全局调用的,现在变成局部方法了,显然就不能这样做了,需要做一点改变:

我这里就不贴html代码了,但是希望您在实践时能把上面的html代码在其下复制几份,以达到思考其实现的效果

$(function (){//这里的eq(0)代表只对第一份起到效果,复制后的没有效果。
 //(你可以把上面的find筛选删除之后再试试,您会发现,他又对余下的几份起效果了)
 $(".list").eq(0).nav("red");//调用局部方法
});

现在回过头再把我们写的插件代码对应上面写的 插件编写的要点 ,思考一下,我们还有哪些没有做到?就会发现,基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。

其实编写插件并不难,最主要的是在我们编写插件的时候,一定要时刻注意这样的要点,每一个细节都遵循在大家实践过程中总结出来的最佳实现,才能自定义实现一个良好的插件。

代码首先是写个人看的,再然后才是给机器看的。

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
原生js二级联动效果
Jun 20 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 #Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 #Javascript
JavaScript基本语法学习教程
Jan 14 #Javascript
JavaScript对象参数的引用传递
Jan 14 #Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 #Javascript
AngularJS初始化静态模板详解
Jan 14 #Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
You might like
php中smarty模板条件判断用法实例
2015/06/11 PHP
JavaScript中的事件处理
2008/01/16 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
薪资那么高的Web前端必看书单
2017/10/13 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Python中的字典遍历备忘
2015/01/17 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
银行求职推荐信范文
2013/11/30 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android