js插件開發規範

當我們畫出了UI之後就可以正式編寫jQuery插件代碼了，不過在着之前我們還需要對jQuery插件開發的一些規範性有一些瞭解。

一. 使用閉包：

(function($) {
  // Code goes here
})(jQuery);

這是來自jQuery官方的插件開發規範要求，使用這種編寫方式有什麼好處呢？

a) 避免全局依賴。

b) 避免第三方破壞。

c) 兼容jQuery操作符’$’和’jQuery ‘

我們知道這段代碼在被解析時會形同如下代碼：

var jq = function($) {
  // Code goes here
};
jq(jQuery);

這樣效果就一目瞭然了。

二. 擴展

jQuery提供了2個供用戶擴展的‘基類’ - $.extend和$.fn.extend.

.extend用於擴展自身方法，如 .ajax, .getJSON等， .fn.extend則是用於擴展jQuery類，包括方法和對jQuery對象的操作。爲了保持jQuery的完整性，我比較 趨向於使用.fn.extend進行插件開發而盡量少使用 .extend.

三. 選擇器

jQuery提供了功能強大，併兼容多種css版本的選擇器，不過發現很多同學在使用選擇器時並未注重效率的問題。

a) 儘量使用Id選擇器，jQuery的選擇器使用的API都是基於getElementById或getElementsByTagName，因此可以知道 效率最高的是Id選擇器，因爲jQuery會直接調用getElementById去獲取dom，而通過樣式選擇器獲取jQuery對象時往往會使用 getElementsByTagName去獲取然後篩選。

b) 樣式選擇器應該儘量明確指定tagName, 如果開發人員使用樣式選擇器來獲取dom，且這些dom屬於同一類型，例如獲取所有className爲jquery的div，那麼我們應該使用的寫法 是(′div.jquery′)而不是 (‘.jquery’)，這樣寫的好處非常明顯，在獲取dom時jQuery會獲取div然後進行篩選，而不是 獲取所有dom再篩選。

c) 避免迭代，很多同學在使用jQuery獲取指定上下文中的dom時喜歡使用迭代方式，如$(‘.jquery .child’)，獲取className爲jquery的dom下的所有className爲child的節點，其實這樣編寫代碼付出

的代價是非常大 的，jQuery會不斷的進行深層遍歷來獲取需要的元素，即使確實需要，我們也應該使用諸如(selector,context), (‘selector1>selector2’), (selector1).children(selector2), (selctor1).find(selector2)之類的方式。

js插件開發的一種方法：

js代碼：

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function ($) { 
//默認參數 (放在插件外面，避免每次調用插件都調用一次，節省內存)
var defaults = { 
color: '紅色' 
}; 
//擴展 
$.fn.extend({ 
//插件名稱 
height: function (options) { 
//覆蓋默認參數 
var opts = $.extend(defaults, options); 
//主函數 
return this.each(function () { 
//激活事件 
var obj = $(this); 
obj.click(function () { 
alert(opts.color); 
}); 
}); 
} 
}) 
})(jQuery); 
$(function () { 
$("p").height({ color: 'black' }); 
}); 
</script>