深入学习jQuery自定义插件

页面导航:首页 > 网络编程 > JavaScript > 深入学习jQuery自定义插件

深入学习jQuery自定义插件

来源: 作者: 时间:2016-01-23 10:23 【

1、定义插件的方法对象级别的插件扩展,即为jQuery类的实例增加方法,调用:(选择器) 函数名(参数);(lsquo; idrsquo;) myPlugin(options);定义的方式:$ fn extend({ 函数名:function(自定义参数){ 这里
1、定义插件的方法
 
对象级别的插件扩展,即为jQuery类的实例增加方法,
 
调用:(选择器).函数名(参数);(‘#id’).myPlugin(options);
 
定义的方式:
 
 
$.fn.extend({
 "函数名":function(自定义参数){
 //这里写插件代码
 }
});
  
//或者是
  
$.fn.函数名 = function(options){
  
//这里写插件代码
  

 

}
  
 
类级别的方法,就是扩展jQuery类本身的方法,为它增加新的方法,
 
调用:.函数名(arguments);.add(3,4);
 
 
$.extend({
  
"函数名":function(自定义参数){
  
//这里写插件代码
  
}
  
});
  
//或者是
  
$.函数名=function(自定义参数){
  
//这里写插件代码
  
}

 

  
 
你会发现他们的区别仅仅是少了一个fn而已,而jQuery.fn = jQuery.prototype,script中对象的prototype属性的解释是:返回对象类型原型的引用。
如果A.prototype = new B();就相当于A.prototype是B的实例,A可以使用B中的所有方法。
那么在我们这里,不就正是扩展了对象的方法么,使对象能够使用我们所定义的方法。
关于prototype,可以参考这篇文章:JS中的prototype
那么extend又是什么意思呢?在我们这里extend就只有一个参数,
 
"函数名:function(自定义参数){
  
//这里写插件代码
  
}
  
此时,我们的这个函数就被合并到jquery的全局对象中去,就相当于扩展了jQuery类的方法。
因为,extend是有多个参数的,extend的所用就是合并参数到一个新的参数中,例如
 
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
  
//结果就是
  
result={name:"Jerry",age:21,sex:"Boy"}
  
关于extend可以参考这篇文章:jQuery.extend 函数详解
以上还参考:jquery的extend和fn.extend
 
2、实例分析,定义一个带参数的插件。
 
一般我们都会在很多地方看到,不要js污染全局环境,其实也对,要不然你定义一个变量,在你引用别人的插件中也定义了,那就冲突了,这就涉及到了js作用域的问题,我们得“封装”作用域,于是我们知道一个函数的作用域仅仅在一个函数中,但函数执行完毕,变量也就会被注销。
 
于是这里我们得用到立即执行函数,用一个函数将我们定义的插件代码包裹起来,这样就形成了一个局部的作用域,从而不会影响到全局的环境,关于立即执行函数,可以参考这篇:js中(function(){…})()立即执行函数写法理解
 
那么,我们的写法将是:
 
(function($){
  
$.fn.extend({
  
函数 : function(options){
  
}
  
});
  
})(jQuery);
  

 

 
我想自定义一个弹出层插件,可以设置背景颜色,宽和高,不设置即为默认的。
 
首先,在元素中,我想设置按钮点击,
 
 
<a id="dialog">点击弹出层</a>
<div class="dialog"></div>
  
 
其实这里的div.dialog是可以动态创建的,在这里就没有。动态创建可参考:jQuery – 添加元素
 
 
$('body').append($('<div></div>').addClass('dialog'));//后面有疑问
  
 
css样式当然最初是隐藏的
 
.dialog{
width:300px;
height: 200px;
background:green;
position: absolute;
left:50%;top:30%;
margin-left: -150px;
display: none;
}

 

  
 
最后就是定义插件的js
 
 
(function($){
$.fn.extend({
dialog : function(options){
//$('body').append($('<div></div>').addClass('dialog'));
  
//此处有疑问,我如果在这里动态创建元素后,为什么要点击2次才能看到效果?不理解,求告知。
var setting = $.extend({}, {background:'green', width:300, height:200}, options);
return this.css({'width':setting.width, 'height':setting.height, 'background':setting.background}).show('slow');
}
});
})(jQuery);
  

 

 
这里的return this的作用是使我们定义的插件方法可以链式调用,也就是维护链接性。
 
插件内部的this指向的是jQuery对象,而非普通的DOM对象。因为DOM对象是没有css()方法的,这是jQuery对象的方法,那么,jQuery对象的写法不应该是(this)吗?在这里我们把this换成(this)一样可以用,关于$(this)和this的区别,可以参考:jQuery中this与$(this)的区别,但我还是不清楚这里用this和$(this)为什么是一样的?
 
最后调用初始化就可以了。
 
$('#dialog').click(function(){
$('.dialog').dialog({
background:'red',
width:500,
height:100
});
});

 

  
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<