前一篇介紹了「Javascript 壓縮、混淆、加密、解密工具及原理 」，也說明了 JS 加密混淆不容易被破解的處理流程，此流程需要開啟三個線上工具的網頁來進行。重複三次「等待編碼、複製、貼上」的時間不算長，但工程師思維就是會想辦法簡化所有重複流程，我長久以來一直想做個前端的整合工具，只是礙於這是大工程，且需解決許多技術問題。
而歷經幾次這些免費的線上服務開天窗(5xx 錯誤)、或是網站倒閉(404 錯誤)，覺得找替代品的時間成本很大，所以下決心搞定這件事，自己的網站就沒這些問題了。
本篇會介紹這個 JS 加密混淆工具的使用方式、特點，並附上所有相關模組的源碼出處：
一、工具介紹
進入工具網頁後，上圖可看到有 5 個切換選單，以下個別介紹：
1. 壓縮+加密+混淆
依序執行「壓縮+加密+混淆」三項工具，這是保護 JS 不易被破解的簡易有效流程，其原理可參考「Javascript 壓縮、混淆、加密、解密工具及原理 」，個別工具的介紹請見後續。
2. 壓縮
壓縮 JS 的工具使用了 UglifyJS 3 引擎，其特點為：
- JS 壓縮運算法最佳，壓縮檔案最小
- 支援 ES6 版本的 JS 語法
工具來源為這個線上服務：
3. 加密
出自知名的 "packer" (Dean Edwards)：
- 除了打亂程式碼之外，還有壓縮的效果
- 主要用途為混淆程式碼的中繼工具
工具來源為這個線上服務：
4. 混淆
混淆 JS 的前端開源工具不多，採用的是這個線上服務：
5. 美化
這是知名度最高、且開源的 JS 美化工具：
二、使用說明
工具的設計非常直覺，相信就算沒閱讀說明書一樣能操作：
- JS 工具選單：
- 點擊選單可切換不同的工具
- 若有勾選「貼上程式碼自動轉換」，且已經貼上程式碼，那麼點擊不同選單時也會立刻執行該選單的功能
- 轉換程式碼
- 左側貼上程式碼後，若取消勾選「貼上程式碼自動轉換」，可點擊「手動轉換」，讓右側產生轉換的程式碼
- 轉換後的程式碼會自動選取，節省鍵盤、滑鼠操作時間
- 點擊「清除資料」可清空左、右兩側的程式碼
- 自動記憶選項
- 「JS 工具選單」預設的選單是「壓縮 加密 混淆」
- 若切換過選單，最後一次使用的「JS 工具選單」，下次進入網頁後會繼續顯示該選單
- 「貼上程式碼自動轉換」的選項若切換過，下次進入網頁也會記憶設定
三、優點介紹
此工具的基本特點如同網站副標題所述：
- 轉換速度快：所有運算都在前端完成，貼上程式碼的瞬間就能光速看到轉換結果
- 壓縮比例高：壓縮引擎使用 UglifyJS 3，是 JS 優化程度最高的工具
- 不留記錄：不會記錄訪客使用的程式碼
- 使用安心：不用擔心原始程式碼被盜用
- 不開天窗：網站架在 Google 旗下的免費 Blogger 平台，伺服器效能及存續時間比其他網站有保障
除此之外還有這些優點：
- 操作介面流暢友善，轉換後的程式碼會自動選取，節省操作時間
- 所有設定會自動記憶，下次進入網頁不必重新選取
四、個別工具模組介紹
這個 JS 整合工具全部使用前端的開源工具，以下列出源碼出處，幾乎在 Github 都能找到：
- 壓縮工具：Github terser
- 加密工具：packer
- 混淆工具：Github javascript-obfuscator
- 美化工具：Github js-beautify
五、補充
如果對這個工具有什麼疑慮或意見的話歡迎留言告知，同時我也整理了一些可能的問題，列在該工具網頁的「常見 FAQ」區塊，提問之前可先參考。
更多網頁開發工具：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。