387
jQuery插件的幾種寫法大總結
插件編寫的目的是給已經有的一係列方法或函數做一個封裝，以便在其他地方重複使用，方便後期維護
jQuery插件開發方式
通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建
三種jQuery插件開發方式說明
$.extend()相對簡單，一般很少能夠獨立開發複雜插件，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以
我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()），而不需要選中DOM元素($('#example').myfunction())
$.widget()是一種高級的開發模式，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關於插件的常用方法等
$.fn則是一般插件開發用到的方式，可以利用jQuery強大的選擇器帶來的便利，以及將插件更好地運用於所選擇的元素身上，使用的插件也大多是通過此種方式開發
$.extend()擴展jQuery的實例
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'aaa') + '!');
}
})
$.sayHello(); //Hello,aaa
$.sayHello('bbb'); //Hello,bbb
說明：上麵代碼中，通過$.extend()向jQuery添加了一個sayHello函數，然後通過$直接調用
$.fn方式插件開發
定義
$.fn.pluginName = function() {
//your code here
}
定義說明
基本上就是往$.fn上麵添加一個方法，名字是我們的插件名稱。然後我們的插件代碼在這個方法裏麵展開
簡單實例
將頁麵上所有鏈接顏色轉成紅色，則可以這樣寫這個插件
$.fn.myPlugin = function() {
//在這裏麵,this指的是用jQuery選中的元素 example :$('a'),則this=$('a')
this.css('color', 'red');
}
實例說明
1、在插件名字定義的這個函數內部，this指代的是我們在調用該插件時，用jQuery選擇器選中的元素，一般是一個jQuery類型的集合。在插件名字定義的這個函數內部，this指代的是我們在調用該插件時，用jQuery選擇器選中的元素，一般是一個jQuery類型的集合
2、如果通過調用jQuery的.each()方法處理集合中的每個元素時要注意的是，在each方法內部，this指帶的是普通的DOM元素了，如果需要調用jQuery的方法那就需要用$來重新包裝一下
$.fn.myPlugin = function() {
this.css('color', 'red'); //在這裏麵,this指的是用jQuery選中的元素
this.each(function() {
$(this).append(' ' + $(this).attr('href')); //對每個元素進行操作
}))
}
實例插件的使用
<ul>
<li> <a href="#">aaa</a> </li>
<li> <a href="#">bbb</a> </li>
<li> <a href="#">ccc</a> </li>
</ul>
<p>這是p標簽不是a標簽，我不會受影響</p>
<script type="text/javascript">
$(function(){
$('a').myPlugin();
})
</script>
讓插件支持鏈式調用
jQuery一個時常優雅的特性是支持鏈式調用，選擇好DOM元素後可以不斷地調用其他方法。要讓插件不打破這種鏈式調用，隻需return一下即可
$.fn.myPlugin = function() {
this.css('color', 'red'); //在這裏麵,this指的是用jQuery選中的元素
return this.each(function() {
$(this).append(' ' + $(this).attr('href')); //對每個元素進行操作
}))
}
讓插件接收參數
1、一個強勁的插件是可以讓使用者隨意定製的，這要求我們提供在編寫插件時就要考慮得全麵些，盡量提供合適的參數
2、比如現在我們不想讓鏈接隻變成紅色，我們讓插件的使用者自己定義顯示什麼顏色，要做到這一點很方便，隻需要使用者在調用的時候傳入一個參數即可。同時我們在插件的代碼裏麵接收
3、為了靈活，使用者可以不傳遞參數，插件裏麵會給出參數的默認值
4、在處理插件參數的接收上，通常使用jQuery的extend方法，當給extend方法傳遞一個以上的參數時，它會將所有參數對象合並到第一個裏。同時，如果對象中有同名屬性時，合並的時候後麵的會覆蓋前麵的。
5、可以在插件裏定義一個保存插件參數默認值的對象，同時將接收來的參數對象合並到默認對象上，最後就實現了用戶指定了值的參數使用指定的值，未指定的參數使用插件默認值
6、保護好默認參數：做法是將一個新的空對象做為$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其後，這樣做的好處是所有值被合並到這個空對象上，保護了插件裏麵的默認值
7.實例
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
插件開發中的命名空間
2、不僅僅是jQuery插件的開發，我們在寫任何js代碼時都應該注意的一點是不要汙染全局命名空間。因為隨著你代碼的增多，如果有意無意在全局範圍內定義一些變量的話，最後很難維護，也容易跟別人寫的代碼有衝突
2、比如你在代碼中向全局window對象添加了一個變量status用於存放狀態，同時頁麵中引用了另一個別人寫的庫，也向全局添加了這樣一個同名變量，最後的結果肯定不是你想要的。所以不到萬不得已，一般我們不會將變量定義成全局的
3、可以使用自調用匿名函數包裹插件代碼
(function() {
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);//將一個空對象做為第一個參數
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
})();
盡量在插件的最前麵加上分號
這樣可以避免我們將這段代碼放到頁麵後，前麵別人寫的代碼沒有用分號結尾，這樣，這個插件代碼就會報錯。
可以將係統變量以變量形式傳遞到插件內部
;(function($,window,document,undefined){
//我們的代碼。。
//...
})(jQuery,window,document);
將插件代碼混淆與壓縮的方法
1、我們下載的插件裏麵，一般都會提供一個壓縮的版本一般在文件名裏帶個'min'字樣。也就是minified的意思，壓縮濃縮後的版本。例如，並且平時我們使用的jQuery也是官網提供的壓縮版本，jquery.min.js
2、這裏的壓縮不是指代碼進行功能上的壓縮，而是通過將代碼裏麵的變量名，方法函數名等等用更短的名稱來替換，並且刪除注釋（如果有的話）刪除代碼間的空白及換行所得到的濃縮版本。同時由於代碼裏麵的各種名稱都已經被替代，別人無法閱讀和分清其邏輯，也起到了混淆代碼的作用
javascript變量規範
在javascript中，沒有真正意義的共有變量、私有變量、常量等概念，當javascript代碼達到一定數量級時，過段時間回頭看自己寫的代碼，會把自己也搞暈的
1、請在私有變量前加“_” 比如： var _pub = this.pub;
2、常量請大寫 比如： this.COLOR = "red";
3、jquery對象變量前加“$” 比如： this.$Obj = $("#layout");
4、object、array變量前加“o”、“a”很多人喜歡給數組變量加個”s”，這也是可以的，按個人習慣，如果你覺得有必要還可以給函數前加個“fn”。
jquery插件開發的一些建議
1、請多使用data()方法jquery中data()方法非常有用，尤其在jquery插件開發中，因為data()所創建的緩存，可以完整的保存各種數據類型的數據，這是其他緩存機製無法比擬的。
2、請使用bind來綁定事件 很多朋友喜歡以下的代碼：
$(".yitip").click(function(){ ........ })
但在jquery插件開發中更提倡使用bind：
$(".yitip").bind('click',function(){ ......... })
3、善用typeof typeof用於判斷數據類型，這個方法在參數判斷中非常有用處
4、插件名加個獨有前綴 jquery插件有太多太z了，插件撞車時很容易的事，比如搜索框插件：
$.fn.tips = function(options){ }
最後更新：2017-06-15 17:32:16