当前位置：首页 > 资讯 > 技术文档

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

时间：2022-01-05 14:43 编辑：来源：阅读：
扫一扫，手机访问

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

jQuery 插件通常分两类。 [list=1] [*] 基于选择器的插件（支持链式操作）[/*] [*] 不基于选择器的插件（不支持链式操作）[/*] [/list] 前段时间简单学习了 jQuery 插件开发，开发了两个简单的插件，在此对两种插件的开发模式做简要总结。 [b]基于选择器的插件[/b] 通常开发模式如下：

(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 [b]不基于选择器的插件[/b] 由于此类插件不依赖于选择器，所以也无链式操作一说。一般开发模式如下：

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

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

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

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

全部评论(0)

上一篇：php实现希尔排序算法的方法分析
下一篇：PHP4中session登录页面的应用

资讯排行榜
更多>>