前端开发

 首页 > 前端开发 > javascript > javascript的jquery库插件教程详解

javascript的jquery库插件教程详解

分享到:
【字体:
导读:
          本教程讲解javascript的jquery库插件教程详解 jQuery 插件通常分两类。 基于选择器的插件(支持链式操作) 不基于选择器的插件(不支持链式操作) 前段时间简单学习了 jQuery 插件开发,...

本教程讲解javascript的jquery库插件教程详解

jQuery 插件通常分两类。

基于选择器的插件(支持链式操作)

不基于选择器的插件(不支持链式操作)

前段时间简单学习了 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分页特效实现方法 代码如下: 1)  {    var oA=document.createElement('a');    oA.href='#1';    oA.innerHTML='首页'    pageDIvBox.appendChild(oA);   }   if(curpageNum>1)  {    var oA=document.createElement('a');...
javascript中的call方法和apply方法详解
方法定义call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……