js插件最小demo和開發規范

1. 使用閉包：
(function($) {
  // Code goes here
})(jQuery);

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

a) 避免全局依賴。

b) 避免第三方破壞。

c) 兼容jQuery操作符'$'和'jQuery '

我們知道這段代碼在被解析時會形同如下代碼：
var jq = function($) {
  // Code goes here
};
jq(jQuery);

這樣效果就一目了然了。

2. 擴展

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

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

3. 選擇器

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插件開發代碼如下：

jsCode

 

<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>

 

htmlCode：

<p> 
click here
</p>