jQuery插件開發精品教程，讓你的jQuery提高一個臺階2

關於變量定義及命名

如今談談關於變量及方法等的命名，沒有硬性規定，但爲了規範，遵循一些約定仍是頗有必要的。

變量定義：好的作法是把將要使用的變量名用一個var關鍵字一併定義在代碼開頭，變量名間用逗號隔開。緣由有二：

• 一是便於理解，知道下面的代碼會用到哪些變量，同時代碼顯得整潔且有規律，也方便管理，變量定義與邏輯代碼分開；

• 二是由於JavaScript中全部變量及函數名會自動提高，也稱之爲JavaScript的Hoist特性，即便你將變量的定義穿插在邏輯代碼中，在代碼解析運行期間，這些變量的聲明仍是被提高到了當前做用域最頂端的，因此咱們將變量定義在一個做用域的開頭是更符合邏輯的一種作法。固然，再次說明這只是一種約定，不是必需的。

變量及函數命名 通常使用駝峯命名法（CamelCase），即首個單詞的首字母小寫，後面單詞首字母大寫，好比resultArray，requestAnimationFrame。對於常量，全部字母採用大寫，多個單詞用下劃線隔開，好比WIDTH=100，BRUSH_COLOR='#00ff00'。當變量是jQuery類型時，建議以$開頭，開始會不習慣，但常常用了以後會感受很方便，由於能夠很方便地將它與普通變量區別開來，一看到以$開頭咱們就知道它是jQuery類型能夠直接在其身上調用jQuery相關的方法，好比var $element=$('a'); 以後就能夠在後面的代碼中很方便地使用它，而且與其餘變量容易區分開來。

引號的使用：既然都扯了這些與插件主題無關的了，這裏再多說一句，通常HTML代碼裏面使用雙引號，而在JavaScript中多用單引號，好比下面代碼所示：

var name = 'Wayou';document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號，JavaScript中保持單引號

 

一方面，HTML代碼中原本就使用的是雙引號，另外一方面，在JavaScript中引號中還須要引號的時候，要求咱們單雙引號間隔着寫纔是合法的語句，除非你使用轉意符那也是能夠的。再者，堅持這樣的統一能夠保持代碼風格的一致，不會出現這裏字符串用雙引號包着，另外的地方就在用單引號。

 

代碼混淆與壓縮

進行完上面的步驟，已經小有所成了。或許你很早就注意到了，你下載的插件裏面，通常都會提供一個壓縮的版本通常在文件名裏帶個'min'字樣。也就是minified的意思，壓縮濃縮後的版本。而且平時咱們使用的jQuery也是官網提供的壓縮版本，jquery.min.js。

這裏的壓縮不是指代碼進行功能上的壓縮，而是經過將代碼裏面的變量名，方法函數名等等用更短的名稱來替換，而且刪除註釋（若是有的話）刪除代碼間的空白及換行所獲得的濃縮版本。同時因爲代碼裏面的各類名稱都已經被替代，別人沒法閱讀和分清其邏輯，也起到了混淆代碼的做用。

壓縮的好處

• 源碼通過混淆壓縮後，體積大大減少，使代碼變得輕量級，同時加快了下載速度，兩面加載變快。好比正常jQuery v1.11.0的源碼是276kb，而壓縮後的版本僅94.1kb！體積減少一半還多。這個體積的減少對於文件下載速度的提高不可小覷。

• 通過壓縮混淆後，代碼還能閱讀嘛？固然不能，因此順帶還起到了代碼保護的做用。固然只是針對你編寫了一些比較酷的代碼又不想別人抄襲的狀況。對於jQuery社區，這裏自己就是開源的世界，同時JavaScript這東西其實也沒什麼實質性方法能夠防止別人查看閱讀你的代碼，畢竟有混淆就有反混淆工具，這裏代碼壓縮更多的仍是上面提到的壓縮文件的做用，同時必定程度上防止別人抄襲。

工具

所使用的工具推崇的是Google開發的Closure Compiler。該工具須要Java環境的支持，因此使用前你可能須要先在機子上裝JRE, 而後再獲取Closure進行使用。

同時也有很朋在線的代碼混淆壓縮工具，用起來也很方便。這些工具都是一搜一大把的。

插件發佈

這一步不是必需的，但本着把事情作完整的態度，同時你也許也但願有更多人看到或使用你的插件吧。

 

• 首先你須要將插件代碼放到GitHub上建立一個Service Hook，這樣作的目的是你之後更新的插件後，jQuery能夠自動去獲取新版本的信息而後展現在插件中心的頁面上。關於如何傳代碼到GitHub，你去下載GitHub 提供的客戶端工具，就會知道如何操做了，很是方便。關於在GitHub建立Service Hook，也只是點幾下而以的事情。下面會截圖介紹。

• 而後須要製做一個JSON格式的清單文件，其中包括關於插件的基本信息，具體格式及參數能夠在jQuery官網插件發佈指南頁面瞭解到，這裏提供一個示例文件，是我以前寫的一個jQuery插件SlipHover：

{
    "name": "sliphover",
    "title": "SlipHover",
    "description": "Apply direction aware  2D/3D hover effect to images",
    "keywords": [
        "direction-aware",
        "animation",
        "effect",
        "hover",
        "image",
        "overlay",
        "gallery"
    ],
    "version": "1.1.1",
    "author": {
        "name": "Wayou",
        "email": "liuwayong@gmail.com",
        "url": "https://github.com/Wayou"
    },
    "maintainers": [
        {
           "name": "Wayou",
            "email": "liuwayong@gmail.com",
            "url": "https://github.com/Wayou"
        }
    ],
    "licenses": [
        {
            "type": "MIT",
            "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
        }
    ],
    "bugs": "https://github.com/Wayou/sliphover/issues",
    "homepage": "http://wayou.github.io/SlipHover/",
    "docs": "http://wayou.github.io/SlipHover/",
    "demo":"http://wayou.github.io/SlipHover/",
    "download": "https://github.com/Wayou/SlipHover/zipball/master",
    "dependencies": {
        "jquery": ">=1.5"
    }}

• 而後就能夠在插件的根目錄執行現行git代碼來發布插件了。其中0.1.0是版本號，之後每次你的插件有新版本發佈只需更新上面命令中的版本，建立新的tag，這樣jQuery插件中心就會自動獲取到新版本信息了

$ git tag 0.1.0$ git push origin --tags

GitHub Service Hook

1 點擊項目右邊菜單的設置

2進入設置頁面後點擊'Webhooks & Services '

3而後點擊右邊主頁面上的'Configure services' 按鈕

4這時出現一個很長的列表，向下找到jQuery Plugins 點擊

5點擊選中框後點擊'更新設置'按鈕

到此就設置完成了。

 

 

Reference:

1. jQuery官網學習中心關於插件開發的文章： http://learn.jquery.com/plugins/

2. jQuery官網插件中心：http://plugins.jquery.com/

3. jQuery官網插件發佈指南：http://plugins.jquery.com/docs/publish/

4. JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

5. Google Web Developer Tool : https://developers.google.com/closure/

 

Feel free to repost but keep the link to this page please!