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数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript jquery及AJAX小结
2016/01/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python绑定方法与非绑定方法详解
2017/08/18 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
司马光教学反思
2014/02/01 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
《恐龙》教学反思
2014/04/27 职场文书
学习心理学的体会
2014/11/07 职场文书
毕业生见习报告总结
2014/11/08 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python