深刻學習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自定義插件