引子

現在網上關於js和jquery封裝的外掛很多，我剛剛接觸前端的時候，就很敬佩那些自己寫外掛的大牛們！因為是他們給網站開發更多的便利，很多網頁效果，網上很多現成的外掛！那麼這些外掛是如何寫的呢？首先是有紮實的js和jquery技術基礎，其次還有一些寫外掛的方法和技巧。關於js和jquery的技術基礎，那是一個慢慢積累的過程。但是關於寫外掛的一些注意和技巧，本文可以略微介紹一下，方便以後寫外掛的時候用得到。

jquery外掛開發模式

jquery外掛一般有三種開發方式：

通過$.extend()來擴充套件jQuery
通過$.fn 向jQuery新增新的方法通過$.widget()應用jQuery UI
 
的部件工廠方式建立

第一種$.extend()相對簡單，一般很少能夠獨立開發複雜外掛，第三種是一種高階的開發模式，本文也不做介紹。第二種則是一般外掛開發用到的方式，本文著重講講第二種。

外掛開發

第二種外掛開發方式一般是如下定義

$.fn.pluginName =function(){//your code here}

外掛開發，我們一般運用面向物件的思維方式

例如定義一個物件

varHaorooms=function(el, opt){this.$element = el,this.defaults ={'color':'red','fontSize':'12px','textDecoration'
 
:'none'},this.options = $.extend({},this.defaults, opt)}//定義haorooms的方法
haorooms.prototype ={
    changecss:function(){returnthis.$element.css({'color':this.options.color,'fontSize':this.options.fontSize,'textDecoration':this.options.textDecoration
        });}}

$.extend({}, this.defaults, opt)有{}主要是為了建立一個新物件，保留物件的預設值。

$.fn.myPlugin =function(options){//建立haorooms的實體var haorooms=newHaorooms(this, options);//呼叫其方法returnHaorooms.changecss();}

呼叫這個外掛直接如下就可以

$(function(){
    $('a').myPlugin({'color':'#2C9929','fontSize':'20px'});})

上述開發方法的問題

上面的開發方法存在一個嚴重的問題，就是定義了一個全域性的Haorooms，這樣對於外掛的相容等等各個方面都不好。萬一別的地方用到了Haorooms，那麼你的程式碼就悲催了！現在我們把上面的程式碼包裝起來，用一個自呼叫匿名函式(有時又叫塊級作用域或者私有作用域)包裹，就不會出現這個問題了！包括js外掛的開發，也是一樣的，我們用一個自呼叫匿名函式把自己寫的程式碼包裹起來，就可以了！包裹方法如下：

(function(){})()

用上面的這個包裹起來，就可以了。

但是還有一個問題，當我們研究大牛的程式碼的時候，前面經常看到有“；”，那是為了避免程式碼合併等不必要的錯誤。

例如，我們隨便定義一個函式：

var haoroomsblog=function(){}(function(){})()

由於haoroomsblog這個函式後面沒有加分號，導致程式碼出錯，為了避免這類情況的發生，通常這麼寫！

；(function(){})()

把你的外掛程式碼包裹在上面裡面，就是一個簡單的外掛了。（注js外掛和jquery外掛都是如此）

還有一個問題

把你的外掛包裹在

；(function(){})()

基本上可以說是完美了。但是為了讓你開發的外掛應用更加廣泛，相容性更加好，還要考慮到用外掛的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs衝突，將jquery的字首“$”,修改為“jQuery”，還有些朋友將預設的document等方法修改。為了讓你的外掛在這些東西修了了的情況下照常執行，那麼我們的做法是，把程式碼包裹在如下里面：

;(function($,window,document,undefined){//我們的程式碼。。})(jQuery,window,document);

就可以避免上面的一些情況了！

至此，你開發的外掛就算完美了！