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 相关文章推荐
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
javascript屏蔽右键代码
May 15 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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开发GUI
2006/10/09 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python实现的栈(Stack)
2018/01/26 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
应聘教师推荐信
2013/10/31 职场文书
新任教师自我鉴定
2014/02/24 职场文书
社会实践评语
2014/04/28 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers