深刻学习jQuery自定义插件 JS中的prototype jQuery.extend 函数详解 jquery的extend和fn.extend

原文地址：jQuery自定义插件学习

一、定义插件的方法

对象级别的插件扩展，即为jQuery类的实例增长方法，

调用：$(选择器).函数名(参数);      $(‘#id’).myPlugin(options);

定义的方式：

$.fn.extend({
 "函数名":function(自定义参数){
 //这里写插件代码
 }
});
 
//或者是
 
$.fn.函数名 = function(options){
 
//这里写插件代码
 
}

　　

类级别的方法，就是扩展jQuery类自己的方法，为它增长新的方法，

调用：$.函数名(arguments);      $.add(3,4);

$.extend({
 
"函数名":function(自定义参数){
 
//这里写插件代码
 
}
 
});
 
//或者是
 
$.函数名=function(自定义参数){
 
//这里写插件代码
 
}

　　

你会发现他们的区别仅仅是少了一个fn而已，而jQuery.fn = jQuery.prototype，Javascript中对象的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

二、实例分析，定义一个带参数的插件。

通常咱们都会在不少地方看到，不要js污染全局环境，其实也对，要否则你定义一个变量，在你引用别人的插件中也定义了，那就冲突了，这就涉及到了js做用域的问题，咱们得“封装”做用域，因而咱们知道一个函数的做用域仅仅在一个函数中，但函数执行完毕，变量也就会被注销。

因而这里咱们得用到当即执行函数，用一个函数将咱们定义的插件代码包裹起来，这样就造成了一个局部的做用域，从而不会影响到全局的环境，关于当即执行函数，能够参考这篇：js中(function(){…})()当即执行函数写法理解

那么，咱们的写法将是：

(function($){
 
$.fn.extend({
 
函数 : function(options){
 
}
 
});
 
})(jQuery);

　　

我想自定义一个弹出层插件，能够设置背景颜色，宽和高，不设置即为默认的。

首先，在html元素中，我想设置按钮点击，

<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
});
});

　　

效果能够查看代码演示，上面的疑问但愿给出解释。

以上还参考：建立一个自定义 jQuery 插件

jQuery自定义插件