JavaScript的jQuery库插件的简要开发指南


Posted in Javascript onAugust 12, 2015

jQuery 插件通常分两类。

  1.     基于选择器的插件(支持链式操作)
  2.     不基于选择器的插件(不支持链式操作)

前段时间简单学习了 jQuery 插件开发,开发了两个简单的插件,在此对两种插件的开发模式做简要总结。
基于选择器的插件

通常开发模式如下:

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

首先,创建一个匿名的自执行函数,形参为 $ 、 window 和 undefined,实参为 jQuery 和 window。

嗯?为什么没有为 undefined 对应地传入一个实参呢?这是一个小技巧,考虑到 undefined 这个变量名可能在其它地方的 JavaScript 代码赋过值,失去了它真正的意义,所以这里干脆不传入这个参数,以确保它在那个匿名自执行函数中是真正的 undefined。

jQuery 传入后对应为 $,这样可以保证插件内调用的 $ 一定是 jQuery 而非 Prototype 之类的库。

此类插件的调用方式一般为 $(selector).PluginName(); 这种形式。

此类具体示例可参考 https://github.com/libuchao/KTwitter
不基于选择器的插件

由于此类插件不依赖于选择器,所以也无链式操作一说。一般开发模式如下:

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

此类插件的调用形式一般为 $(selector).PluginName(); 这种形式。

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
js实现录音上传功能
Nov 22 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
js实现滑动进度条效果
Aug 21 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 #Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 #Javascript
基于jQuery实现动态数字展示效果
Aug 12 #Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 #Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 #Javascript
javascript表单验证大全
Aug 12 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP链表操作简单示例
2016/10/15 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
js尾调用优化的实现
2019/05/23 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python requests指定出口ip的例子
2019/07/25 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
比赛口号大全
2014/06/10 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年科普工作总结
2014/12/06 职场文书