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

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(); 这种形式。

赞 (0)

相关推荐

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

    jQuery 插件通常分两类. 基于选择器的插件(支持链式操作) 不基于选择器的插件(不支持链式操作) 前段时间简单学习了 jQuery 插件开发,开发了两个简单的插件,在此对两种插件的开发模式做简要总结. 基于选择器的插件 通常开发模式如下: (function($, window, undefined) { $.fn.PluginName = function(opts) { var defaults = { // 插件自定义选项的默认值 }; // 以用户的自定义选项覆盖默认选项 var

  • JavaScript的jQuery库中function的存在和参数问题

    jQuery function 参数传递 jQuery的function函数中使用外部变量: //如何取得i的变量 for(i=0;i<3;i++) { $.get("/test.html", function(data){ alert(i) }); } //使用闭包: for(i=0;i<3;i++) { (function(index){ $.get("/test.html", function(data){ alert(index) }); })(

  • 在JavaScript的jQuery库中操作AJAX的方法讲解

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码.   前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进

  • JavaScript的jQuery库中ready方法的学习教程

    学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? onload 事件 最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为

  • 将JavaScript的jQuery库中表单转化为JSON对象的方法

    大家知道Jquery中有serialize方法,可以将表单序列化为一个"&"连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现.   我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成":"."'": /** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#&qu

  • 再JavaScript的jQuery库中编写动画效果的指南

    再JavaScript的jQuery库中编写动画效果的指南

    jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","none") 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现.可以修改元素的多个样式,高度,宽度,不透明度. 另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会.

  • 推荐10个2014年最佳的jQuery视频插件

    推荐10个2014年最佳的jQuery视频插件

    在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插件能够,让你很方便将视频作为网站的背景. 它可以默默地播放一个视频,或用一个列表让用户选择他们喜欢的进行播放. 这个插件基于Video.js构建.此外如果有些设备不支持自动播放支持显示成图片. 2. jPlayer jPlayer是一个可定制和更换皮肤的开源JQuery的播放器,允许在网页中播放音频

  • javascript原生和jquery库实现iframe自适应高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh

  • 通用javascript脚本函数库 方便开发

    将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2.XMLEncode(str)--对字符串进行XML编码 3.ShowLabel(str,str)--鼠标提示功能(显示字符,提示字符) 可以设置显示的提示的文字的字体.颜色.大小以及提示的背景颜色.边框等 4.IsEmpty(obj)--验证输入框是否为空 5.IsInt(objStr,sign,zero)--验证是否为整数,正整数,负整数,以及是否包括零 6.IsFloat(objStr,sig

  • 十大热门的JavaScript框架和库

    十大热门的JavaScript框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们.因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考. 1.ReactJS(Star: 59989,Fork: 10992) 主页:https://facebook.github.io/reac

随机推荐