現在網上關於js和jquery封裝的插件很多，我剛剛接觸前端的時候，就很敬佩那些自己寫插件的大牛們！因為是他們給網站開發更多的便利，很多網頁效果，網上很多現成的插件！那麼這些插件是如何寫的呢？首先是有扎實的js和jquery技術基礎，其次還有一些寫插件的方法和技巧。關於js和jquery的技術基礎，那是一個慢慢積累的過程。但是關於寫插件的一些注意和技巧，本文可以略微介紹一下，方便以後寫插件的時候用得到。
要說jQuery 最成功的地方，我認為是它的可擴展性吸引了眾多開發者為其開發插件，從而建立起了一個生態系統。這好比大公司們爭相做平台一樣，得平台者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平台及生態圈。
學會使用jQuery並不難，因為它簡單易學，並且相信你接觸jQuery後肯定也使用或熟悉了不少其插件。如果要將能力上升一個台階，編寫一個屬於自己的插件是個不錯的選擇。
軟件開發過程中是需要一定的設計模式來指導開發的，有了模式，我們就能更好地組織我們的代碼，並且從這些前人總結出來的模式中學到很多好的實踐。
根據《jQuery高級編程》的描述，jquery插件一般有三種開發方式：
通過$.extend()來擴展jQuery 通過$.fn 向jQuery添加新的方法 通過$.widget()應用jQuery UI的部件工廠方式創建
通常我們使用第二種方法來進行簡單插件開發，說簡單是相對於第三種方式。第三種方式是用來開發更高級jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關於插件的常用方法等，非常貼心，這裡不細說。
而第一種方式又太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())。
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //調用
$.sayHello('test'); //帶參調用
但這種方式無法利用jQuery強大的選擇器帶來的便利，要處理DOM元素以及將插件更好地運用於所選擇的元素身上，還是需要使用第二種開發方式。你所見到或使用的插件也大多是通過此種方式開發。
第二種插件開發方式一般是如下定義
$.fn.pluginName = function() {
//your code here
}
插件開發，我們一般運用面向對象的思維方式
例如定義一個對象
var testObj= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定義testObj的方法
testObj.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是為了創建一個新對象，保留對象的默認值。
$.fn.myPlugin = function(options) {
//創建haorooms的實體
var testIndividual= new testObj(this, options);
//調用其方法
return testIndividual.changecss();
}
調用這個插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
上面的開發方法存在一個嚴重的問題，就是定義了一個全局的testObj，這樣對於插件的兼容等等各個方面都不好。萬一別的地方用到了testObj，那麼你的代碼就悲催了！現在我們把上面的代碼包裝起來，用一個自調用匿名函數(有時又叫塊級作用域或者私有作用域)包裹，就不會出現這個問題了！包括js插件的開發，也是一樣的，我們用一個自調用匿名函數把自己寫的代碼包裹起來，就可以了！包裹方法如下：
(function(){
})()
用上面的這個包裹起來，就可以了。
但是還有一個問題，當我們研究大牛的代碼的時候，前面經常看到有“；”，那是為了避免代碼合並等不必要的錯誤。
例如，我們隨便定義一個函數：
var testFunction=function(){
}
(function(){
})()
由於testFunction()這個函數後面沒有加分號，導致代碼出錯，為了避免這類情況的發生，通常這麼寫！
;(function(){
})()
基本上可以說是完美了。但是為了讓你開發的插件應用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運行，那麼我們的做法是，把代碼包裹在如下裡面：
;(function($,window,document,undefined){
//我們的代碼。。
})(jQuery,window,document);
就可以避免上面的一些情況了！
至此，你開發的插件就算完美了！
JQ插件標准的封裝---閉包
<script type="text/javascript">
(function ($) {
//這裡放入插件代碼 何問起
})(jQuery);
</script>
這是jQuery官方的插件開發規范，這樣寫是作用是：
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’
這段代碼在被解析時會形同如下代碼：
var jq = function($) {
// Code goes here
};
jq(jQuery);
================更新於2016年2月4日=============
編寫插件
$(function () {
$.fn.插件名稱 = function (options) {
var defaults = {
Event : "click", //觸發響應事件
msg : "Holle word!" //顯示內容
};
var options = $.extend(defaults, options);
var $this = $(this); //當然響應事件對象
//功能代碼部分
//綁定事件
$this.live(options.Event, function (e) {
alert(options.msg);
});
}
});
調用插件
$(function () {
//綁定元素事件
$("#test").插件名稱({
Event : "click", //觸發響應事件
msg : "插件原來就是這麼簡單!" //顯示內容
});
});
布局
<input type = "button" id = "test" value = "這是一個簡單的插件調用" / >