JavaScript

超簡單介紹

JavaScript （簡稱 JS）是歷史悠久，使用也非常廣泛的一個動態程式語言。諸君所見到的一切網頁幾乎都含有 JS 程式碼，

「受歡迎」歸「受歡迎」，然而它也因為它語法上的「不確定性」以及其動態語言的本質受到許多人詬病。所謂「不確定性」是指其某些違背主流程式語言的規則（例如「所謂 this 為何物」的問題）。這樣的性質燃燒了許多有經驗的程式設計人員腦袋內的養分以及腦細胞。另外，動態語言的本質，讓大多數 JavaScript 陳述式結果無法輕易地被預測（間接讓設計整合開發環境的人傷透腦筋）

雖然如此，但若想不接觸 JS，就必須迴避幾乎所有跟 Web 開發的一切專案，會失去不少機會。再加上 Node.js 的出世，讓 JS 得以在伺服器端，甚至是桌面以及手機應用上大放異彩（藉著 electron 以及 cordova 等）。因此，還是有不少程式設計人員前仆後繼的投入學習。

開發工具

JS 的工具、程式庫相當相當相當的多，簡直就是戰國時代！因此，此處所列者為千秋所接觸過的工具。

1. 整合開發環境
1. Visual Studio Code
   在一定的限度內提供程式碼自動完成的功能
   需要注意程式碼本身在 MIT 授權下發布，但是在官方網站上發布的執行檔則使用了比較有限制性的授權。請參看這裡的解說。
2. Atom
   具有高度自訂性的編輯器。由 Github 所開發。和 VIsual Studio Code 一樣，是使用所謂的 Web Technology 寫成的桌面軟體。
2. 執行環境
1. 瀏覽器
   一般用來調整網頁顯示，以及增加網頁功能的 JS 都是在瀏覽器上運作
   建議使用 Firefox, Chrome 或 Chromium，因為有好用的開發者工具。
2. Node.js
   獨立於客戶端網頁運作的 JS 程式碼均在 node.js 上運作
3. 相依性管理工具
1. npm
   和 Node.js 相輔相成的套件管理工具
   
4. 前處理工具
1. Browserify
   讓 node.js 的套件可以被用在瀏覽器環境上
5. 建置工具
1. Gulp
6. 偵錯工具
1. 您的瀏覽器
   您的瀏覽器有開發者工具，好好利用吧！
2. Node.js (node debug xx.js)
7. （族繁不及備載）

學習資源

1. 互動式教學網站
1.  Codecademy
   不錯的互動教學網站，非常適合初學者使用。也提供其他程式語言的教學
2. 教學與練習網站
1. CodeWars
   也提供其他程式語言的練習
   非基礎題目可能需要演算法的基礎
2. Codingame
   也提供其他程式語言的練習
   非基礎題目可能需要演算法的基礎
3. JSWarrior
   小遊戲
4. Untrusted
   也是小遊戲
5. exercism.io
   練習網站。也提供其他程式語言的練習。特點是撰寫程式時可以離線，在本機上測試通過後才上傳程式碼。
6. JavaScript 30
   以「學習程式就是要親手打造點東西」的精神，提供一個 30 天的 JS 打造之旅。
   千秋的練習：https://gitlab.com/chiakikame/JS30
7. NodeSchool
   提供許多線下 workshop ：教完後就馬上動手做！
3. 參考文件
1. MDN
   提供完整的開發資料
2. Can I use ...
   很適合查詢某瀏覽器是否支援某組 JS API 的好工具
4. JS 專家文串
1. Eric Elliott
   Programming JavaScript Application 的作者

相關程式庫

基本上，在 node.js 上可以執行的東西，有可能可以利用 browserify 使其可在瀏覽器上面運作；但是，只在瀏覽器上面運作的東西大多無法在 node.js 上面運作：因為大多是使用者界面元件相關的東西，會依賴在 node.js 上面沒有的瀏覽器 API 框架。

1. 基礎程式庫（執行引擎）
1. 瀏覽器
   在瀏覽器內執行 JS，以達成某些動態呈現的需求
2. Node.js
   在本機上執行 JS 的執行引擎
2. 使用者界面框架（在瀏覽器上運作）
   某些框架提供了需要 Node.js 才可以運作的「伺服器端呈現」（server-side rendering）功能
1. Vue.js
   新起之秀！下面列出 vue.js 相關的工具
1. Quasar
   可以用同一份程式碼建立網頁、桌面程式（Electron）以及手機程式的框架
2. DejaVue
   將使用 Vue.js 的程式圖形化使開發者易於了解
3. avoriaz
   測試使用了 Vue.js 程式的工具
4. eagle.js
   基於 Vue.js 的投影片播放框架
2. React 
3. Mithril
4. Marko
5. AngularJS 
6. Riotjs
7. hyperapp
3. 使用者界面元件以及小服務（瀏覽器上面運作）
1. 元件
1. medium-draft
   Rich text 編輯器
2. medium-editor
   Inline editor
3. quill
   很強大的 rich text 編輯器
4. trix
   簡單的 rich text 編輯器
5. pell
   小巧，無相依元件的 rich text 文字編輯器
6. uppy
   檔案上傳元件。（開發中） 
7. monaco-editor
   在瀏覽器內，讓您的使用者使用和 VS Code 一樣的編輯器
8. Keen-UI
   基於 vue.js 的元件庫
9. notyf
   沒有其他相依元件的 notification 程式庫
10. flatpickr
    日期選擇器
11. headroom.js
    做出像是 medium.com 那樣子會自動隱藏 / 現身的 heading
12. tingle.js
    在網頁繪圖區做出 modal 對話方塊的效果（跟 JS 的 alert 不同）
13. Choices
    下拉式選單 / 文字方塊功能增強
14. Tippy.js
    工具提示（tooltip）
15. botui
    建立一個可以利用對話的方式來收集使用者資訊（代替表單）的使用者界面
2. 使用者界面功能
1. validate.js
   提供送出表單之前，驗證表單資料的功能
2. blazy.js
   在圖片上加上 lazy-loading 機制的幫手
3. gotem
   剪下功能。讓使用者按下某個機關後，把另個元素的內容放入剪貼簿
4. 桌面或手機應用程式框架
1. electron
   桌面程式開發。Atom 以及 VS Code 便是利用此框架開發
2. cordova
   跨平台開發，包括桌面以及手機程式
3. Weex
   跨平台手機程式開發框架
5. 伺服器框架（在伺服器上運作）
1. expres
   很知名常用的伺服器框架。下面列出常用的 middleware
1. body-parser
   Json, text, raw, url-encoded 的 request body 處理
2. multer
   multipart/form-data 處理
3. serve-favicon
   「我的最愛」圖示
4. compression
   Response deflate / gzip 壓縮
5. csurf
   CSRF token middleware
6. helmet
   藉著增加一些 HTTP header 來保護您的 express web app
2. koa
3. hapi
4. fastify
   標榜高效能的伺服器框架
6. 資料庫引擎或驅動程式
   資料庫引擎的話，多半使用在以 node.js 為基礎框架的時候
1. MongoDB（database connector / driver）
2. LevelDB（embedded database）
   若想要在 node.js 上面使用，建議以 npm 安裝 level package。（npm install level）
   有些人指出 levelDB 的資料庫容易在像是斷電的情況下毀損（您可以參考其 github repository 的 issue 區域）
3. NeDB （embedded database，瀏覽器也可以使用）
   小巧的資料庫引擎，不適合存放 big data 等級的資料
4. neo4j-driver（database connector）
   連接 Neo4j 的 driver，由 Neo4j 的開發團隊出品
5. sqlite3（embedded database）
6. rethinkdb （database connector / driver）
   支援以 reactive 的方式取得資料的 NoSQL 資料庫
7. pouchdb （browser database）
   可離線資料庫。可以利用中央的 CouchDB 進行客戶端間的資料同步。
   此資料庫引擎可以使用在瀏覽器或者 node.js 上
8. rxdb （browser database）
   利用 PouchDB 實現的可離線資料庫。
   此資料庫引擎可以使用在瀏覽器或者 node.js 上
7. 測試工具（框架等）
1. tape （Node.js、瀏覽器）
   符合 TAP （test anything protocol）協定的測試框架
2. Postman
   開發 WEB API 的好幫手：可以用來手動執行 API 查詢以進行測試 
3. phantomjs
   多功能的 headless web browser，可以用在使用者界面單元測試、動態網頁的抓取、以及動態頁面的呈現（rendering）等。（爬動態網頁的爬蟲幫手）
   可用 npm 安裝 phantomjs-prebuilt，或者從官方的下載區取得。
4. json-server （node.js）
   利用您提供的 json 檔案，產生一個 mock server 讓您可以測試前端
8. 圖形或遊戲引擎（瀏覽器運作）
1. CraftyJS
   遊戲引擎
2. WhitestormJS
   3D 引擎
3. Planck.js
   2D 物理引擎
4. picogl.js
   嚴格說起來不算是 3D 引擎，而是在 webgl 2 上面再包上簡單的一層，使 webgl 容易使用。
9. 基礎（語言擴充、工具箱等）
1. 工具箱
1. lodash （均可）
   提供許多的工具，像是函數式程式設計輔助、字串處理、數學函數、比較函數等
2. just （均可，瀏覽器使用須配合 browserify）
   提供模組化的許多小工具（陣列使用、物件處理、字串處理等）
3. suger （均可）
   提供模組化的許多小工具（時間、字串處理、物件 reduce ...）
4.  ramda （均可）
   提供 functional programming 工具的程式庫
5. Folktale （ 均可，瀏覽器使用須配合 browserify）
   內容豐富的 functional programming 工具箱，提供了像是 Monad, Either 以及 Maybe 工具。
2. 字串處理
1. voca （均可）
   字串處理工具
2. re-build （均可）
   提供一個比較可讀的方法來建立正規表達式（regular expression）
3. 資料結構
1. immutable.js （均可）
   提供不可變（immutable）資料結構的程式庫
2. mnemonist （均可？）
   提供許多資料結構的實作
3. graphology （均可？）
   提供圖（graph）資料結構的實作
4. freezer （均可？）
   Immutable state holder，會在 state 有更動時發出事件供程式設計人員處理
5. BitArray.js （均可？）
   省記憶體的位元陣列
6. wade
   利用 Trie 提供快速搜尋的機制
4. 數學、數字以及統計
1. math.js （均可）
   數學擴充
2. simple-statistics （均可）
   提供簡單的統計相關計算功能
3. decimal.js （均可）
   大數字操作
4. swarm-numberformat （均可）
   格式化大數字的輸出
5. NodeJS 串流（stream）工具
   別忘了瞧瞧資料剖析的部份，裡面可能有支援串流的程式庫
1. through2
   撰寫 Transform stream 的幫手
   另有 through2-map, through2-filter, 以及 through2-reduce 三樣輔助工具。
2. ez-stream
   一個獨立的 stream library。可以包裹 node.js 的 stream。
6. 其他
1. stampit （均可）
   幫助開發者更完善利用 JS prototypal inheritance 的工具 
2. yargs （node.js）
   命令列參數剖析
3. date-fns （均可）
   提供許多函數，加強了內建 Date 類別的功用
4. fmt-obj （node.js）
   美化 JS 物件以 console 輸出的模樣
5. store.js （均可）
   提供跨瀏覽器的 persistence 方案程式庫
6. ffi （node.js）
   使開發者可以輕易使用與 C 相容 ABI （Application Binary Interface）的程式庫
7. gpu.js
   讓開發者可以輕鬆使用 GPU 的運算資源
10. 多工
1. webworker-threads
   thread-based
2. tiny-worker
   process-based
3. skale-engine
   平行與分散式運算引擎
11. 記憶體相關
1. big-map
   利用 Buffer 提供
12. 美工（繪圖、動畫、圖形處理）
1. pdfkit （node.js、瀏覽器需用 browserify）
   產生 pdf 檔案
   使用中文字型、畫表格、換頁的實例請見這裡。
2. jimp （node.js）
   完全以 JS 實做的影像處理程式庫，支援 bmp, jpg, png。
3. d3.js （瀏覽器）
   可以將資料轉換成圖形的程式庫
4. dimple.js （瀏覽器）
   建構在d3.js 之上的作圖（統計圖）軟體
5. d3-node （node.js）
   讓伺服器端可以使用 d3.js 的功能
6. billboard.js （瀏覽器）
   建立在 d3.js 之上的圖表繪製程式庫
7. color-blind （node.js）
   模擬色盲者所看見色彩的程式庫
8. PixiJS （瀏覽器）
   2D 繪圖引擎，提供硬體加速
9. KUTE.js （瀏覽器）
   動畫引擎
10. chartist （瀏覽器）
    作圖（直方圖折線圖等）。簡單小巧沒有其他相依元件
11. cropper.js （瀏覽器，Node.js ?）
    影像處理（裁剪、放大、旋轉等）
12. sigma.js （瀏覽器）
    作網路圖
13. rough.js （瀏覽器）
    在 HTML5 canvas 上做出手繪風格的圖形
14. UTIF.js （均可？）
    TIFF 影像解碼器，純 js 實做
15. UPNG.js （均可？）
    PNG 影像解碼器，純 js 實做
16. web-dsp （瀏覽器）
    以 web assembly 做出來的影像 / 影片處理程式庫
17. GraphicsJS （瀏覽器）
    繪圖程式庫（利用 SVG / VML 技術）
13. 檔案以及資料剖析
    已知支援 node.js 串流的程式庫後方會有（stream）標記
1. 字型
1. Typr.js（均可）
   TTF 以及 OTF 字型剖析（似乎不太活躍了）
2. opentype.js （均可）
   Open Type （OTF）字型解析
2. 壓縮檔
   不要忘了內建的 zlib 可以提供 streaming 的 gzip 處理體驗
1. node-zip
   zip 壓縮檔處理
2. adm-zip
   zip 壓縮檔處理
3. unzipper （node.js）（stream）
   支援 streaming 的 zip 解壓縮處理
4. compressjs （均可）
   提供多種格式壓縮檔的壓縮與解壓縮
   如果要 streaming ，所提供的 input 以及 output 分別要實做 readByte 和 writeByte
5. decompress （node.js）
   提供多種格式的一口氣解壓縮的功能
6. lzma-purejs （均可）
   lzma 格式的壓縮以及解壓縮
   如果要 streaming ，所提供的 input 以及 output 分別要實做 readByte 和 writeByte
7. xz （node.js） （stream）
   lzma 格式的串流壓縮以及解壓縮
8. unbzip2 （均可）（stream）
   bz2 格式的 streaming 解壓縮
3. 影片
1. JSMpeg （瀏覽器）
   mpeg1 & mp2 影音解碼器
4. 圖檔（請參照美工部份）
5. 其他格式
1. parse5 （node.js）（stream）
   HTML5 剖析器
   具有 ParserStream （WritableStream）
2. htmlparser2 （node.js）
   HTML 剖析器，提供 SAX 界面以及製作成 DOM 文件的方法（要配合 domhandler ）
3. json-parse-async
   提供 JSON.parse 的非同步界面。實際剖析發生在相同的執行緒上面。
4. JSONStream （node.js）（stream）
   利用 Stream 的方式來剖析所指定的部份 JSON 資料
   亦即它無法在 stream 完成後傳回完整的資料，這不是這個程式庫的目標
5. oboe （均可）
   利用類似 SAX 的方式來分段剖析 JSON
14. 網路通訊（Ajax、fetch api wrapper、檔案上傳等） 
1. resumable.js （瀏覽器）
   可以將大型檔案切塊後上傳的工具。需要有伺服器端的配合。
2. ftp （node.js）
3. ftp-client （node.js）
   包裝 ftp 的程式庫，但似乎無法做複雜的操作。若您知道目標檔案的位置而不需要探勘的話，似乎是不錯的選項
4. jsftp （node.js）
   除了 ftp 以外的選擇
5. node-fetch （node.js）
   在伺服器端使用 fetch API ！
6. request （node.js）
   功能強大且方便使用的 http / https client
7. axios （均可）
   功能強大且方便使用的 http / https client。具有取消 request 的功能
8. phin （node.js）
   輕巧的 http / https client。
9. trae （瀏覽器）
   Fetch-based http / https client。
15. 機器學習
1. brain.js （均可）
   類神經網路
2. synaptic （均可）
   architecture-free neural network
3. neurojs （均可？）
   Deep learning
16. 自然語言
1. franc （均可）
   語言偵測。franc-all 支援 375 種語言； franc 支援 175 種語言； franc-min 支援 75 種語言。
17. 紀錄工具（logging）
1. debug （均可）
   簡單的 logging 工具。很多程式庫或者框架均利用 debug 來做錯誤紀錄。
2. winston （node.js）
   功能豐富的 logging 工具。支持非同步、多輸出端、以及自定義格式等功能
18. 開發工具
1. Gulp
2. Npm
3. Browserify
4. phantomjs
   多功能的 headless web browser，可以用在使用者界面單元測試、動態網頁的抓取、以及動態頁面的呈現（rendering）等。（爬動態網頁的爬蟲幫手）
   可用 npm 安裝 phantomjs-prebuilt，或者從官方的下載區取得。
5. nodemon
   簡單的伺服器程式開發小幫手：在檔案有修改的時候幫你重新啟動伺服器軟體
6. tldrlegal
   檢查專案相依程式庫的授權，替你列出這些授權所應該遵守的義務
7. pkg-ok
   檢查 package.json 裡面紀錄的 main 以及 bin 欄位中的檔案是否存在。適合用在 npm prepublish hook