分享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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
PHP4.04简明安装
2006/10/09 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
python -v 报错问题的解决方法
2020/09/15 Python
如何利用python发送邮件
2020/09/26 Python
pycharm永久激活超详细教程
2020/10/29 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
精细化工应届生求职信
2013/11/17 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Golang并发工具Singleflight
2022/05/06 Golang