第一期：JQ插件編寫入門（1）

JQ插件編寫入門（1）

什麼是JQ插件

jq插件的由來很簡單，當開發人員在製做一個頁面的時候，比方遇到製做一個日曆，或者一個彈出框，這些組件都須要經過js去控制，同時不少頁面均可以公用這些組件。那麼咱們就想要抽象出來，讓一個項目中的每個小夥伴均可以拿來直接使用，同時也能夠精簡每一個js文件的代碼量，更加直觀。

爲你的插件新建一個文件夾

傳統的項目文件夾組織目錄大概以下：

如今讓咱們爲咱們的插件新建一個文件夾，方便咱們管理：

插件該如何命名

一個很差的示範就是，雖然插件js的名字的確表示了業務功能：

從上圖能夠看出，這個文件夾裏面，被不一樣人添加着插件，可是看命名就知道有些是新手，有些是懂命名，但沒有徹底遵循規範。像以時間／版本號命名的，咱們徹底無法以名字去了解這個插件是拿來幹什麼的，咱們就必須點進這個文件，看了一大段代碼後，纔可能知道這個插件能讓咱們幹什麼。

而規範的開發下的命名方式是：

|jquery.plugin_calendar.js
|jquery.plugin_dialog.js
|jquery.plugin_upload.js

當咱們用gulp或者webpack去build到生產時候，它的命名應該是：

|jquery.plugin_calendar.min.js
|jquery.plugin_dialog.min.js
|jquery.plugin_upload.min.js

插件形式大概

插件函數該如何寫

• 大概形式如：
  

1.function（$）{...}的形式的意思是將$這個變量做爲參數傳入函數以內。可是咱們知道，當咱們開發一個項目的時候，引用的js庫可不只僅是jq，可能會引用一些其餘的js庫，而在別的js庫中，恰巧$被全局定義了，那麼當咱們把打包壓縮的時候，就可能出現難以debug的錯誤。這個時候咱們就用當即執行函數來寫。

2.function（$）{...}（jQuery）；的形式就是當即執行函數，簡化一下的意思就是定義了一個函數，而後（），就至關於執行了這個函數，因此（）裏能夠傳入參數，這個函數就像咱們普通函數同樣，只不過換了一個樣子，一眼難以看盡。由於這個函數是當即執行的，因此將jQuery做爲參數傳入了函數中，老是能夠保證$能夠綁定jQuery。

在大多數狀況下，上面的形式就是通常開發人員經常使用的，可是有比這種寫法更好的

• 增進形式
  

在這裏咱們傳入了window和document兩個參數，目的很明顯，那就是增長window和document的局部引用，達到精簡函數體的做用，同時查詢這兩個域的時候，有更加快的性能！性能能夠成倍數的增長。

而在jq的其餘地方，也有過相似的應用

這裏一樣是簡短了查詢的域，由原來的document，縮短到了某id下，同時id查詢又是性能最好的，因此，這樣的查詢／獲取元素的方式，會讓性能提高十數倍。

回到剛纔，在函數定義的時候，多了一個undefined，是什麼緣由呢？由於咱們在低版本的ECMAScript中，是容許對undefined從新定義的，若是有其餘人無心修改了undefined，那麼則會影響到咱們的插件，咱們甚至也不知道如何定位那個bug。因此，咱們定義函數的時候，定義了undefined這個參數，可是卻沒有傳入這個參數，那麼它就變成undefined了。

• 再增進形式
  

ok，咱們看到剛剛那個函數，前面的位置多了一個前導分號；

咱們在寫代碼的時候，不是全部的時候都記得給咱們語句的結束的地方，加上分號。可是不少時候咱們編譯的時候並不會報錯，程序也能夠正常運行，緣由是咱們程序環境幫咱們隱式加入了分號。可是咱們真正去開發時候，咱們會打包壓縮各類js文件到一個文件來減小http請求。這個時候，若是咱們的插件碰到分號使用不正確的代碼，就會報錯。

因此這個前導分號的做用，就是用來避免這樣的狀況。

ES3中能夠被修改，ES5修復了這個問題，undefined再也不能夠修改

好，如今咱們已經大概瞭解插件一些外部工程的東西，以及一個大概的函數定義形式。那麼咱們將在下一期文章中，去到函數體內，看看具體一個插件如何去寫。