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不同页面传值的改进版
Sep 30 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP扩展开发入门教程
2015/02/26 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python3.5运算符操作实例详解
2019/04/25 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
电厂职工自我鉴定
2014/02/20 职场文书
2014年教师节寄语
2014/04/03 职场文书
教师节演讲稿
2014/05/06 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
小学数学教师研修日志
2015/11/13 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS