jQuery插件開發

1、 jQuery插件的基礎原理源自JavaScript的自定函數的概念。

1. JavaScript給對象添加自定義函數有幾種方式：

1）先建立對象直接給對象添加方法屬性：

var obj = new MyObject();
obj.myFunction = function(){};

2) 在構造函數中直接經過this添加方法屬性：

MyObject(){
this.myFunction = function(){};
}

咱們知道this指向當前的對象，因此其實this. 相似於obj. 第一種方法。只不過是在構造函數就提早準備好了，當用構造函數來new一個對象的時候，這個對象隨着this的指向，它就具有了myfunction的方法。而第1)種方法是先建立了對象以後纔給它自定義一個方法。

3）在原型上添加自定義方法：

咱們知道每個對象都有與之對應的原型，而且可以繼承引用原型中的屬性和方法，這樣一來咱們在原型上添加一個方法。全部繼承該原型的對象均可以引用該自定義方法，包括當前對象。

當前對象的原型是它的類（構造函數()名）.prototype的值。這是在定義這個類的時候所定義的原型。如：obj 的類是MyObject。因此他的原型爲：MyObject.prototype因此給當前對象添加自定義方法可以下

MyObject.prototype.myFunction=function(){};

4）那如今就能夠在obj對象上直接引用myFunction

obj.myFunction();

2. jQuery給對象添加自定義方法（插件）的方法

首先，1. JQ類庫定義了一個全局函數：jQuery()，該函數的返回值是一個DOM對象;jQuery()是一個工廠函數，不是構造函數（這也解釋了爲何它的原型不是jQuery.prototype而是jQuery.fn，從名稱上第一個字母不是大寫也能看出來了）看下jQuery的源碼便知道真相：

jQuery.fn = jQuery.prototype = {

 

。jQuery.fn是全部jQuery對象的原型對象。全部實例化的jQuery對象都是這個jQuery類，並繼承自jQuery.fn（它的值）。因此咱們能夠模仿JavaScript原生的添加方法之一是在原型上添加自定義方法。

jQuery.fn.myFunction = function(){};//建立插件
$('#btn').myFunction();//引用插件

3. 爲何一般你們開發插件的時候，會使用匿名函數而且自調用。

1） 自調用();：是由於在引入當前插件的時候，我這個插件就能直接初始化了：在你使用以前提早幫你把自定義方法（插件）插在jQuery.fn原型對象上，因此當你引入該插件js的時候，無需關心準備工做(先實例化運行)，直接在對象上.運算符引用便可。

2）匿名函數：的使用其實（你就當是一個普通函數便可）是爲了保護全局的命名空間，你的插件方法裏確定定義了不少的變量，你這些變量若是暴露在全局變量裏，可能會污染其餘同名的全局變量，那這樣一來你這個插件就是"有毒"的。因此把你的插件方法函數內容定義在一個函數(做用域)裏，就能避免這個問題。若是須要jQuery對象來定義，直接把全局jQuery對象當參數同樣傳入這個的函數便可。實參務必是"jQuery"字符不是"$"！

4. .extend（）方法的使用

將一個對象的的屬性和方法擴展到jQuery對象上

var person = {  
    sex      : 'male',  
    showName : function(name){  
            alert("Name: " + name);  
    }  
};  
jQuery.extend(person); // 將person對象擴展到jQuery（$）對象上  
jQuery.showName("admin"); // Name: admin  
$.showName("admin"); // Name: amdin  
alert("Sex: " + $.sex); // Sex: male