Promise 學習筆記

這篇文章主要是為了複習與更加深入掌握 Javascript Promise 而產生的筆記。在直接閱讀關於 Promise A+ 或原理說明之前先通過比喻的方式理解可以更加深記憶。如果您對於 Promise 還是有點似懂非懂,不妨可以看看。

繼續閱讀

RabbitMQ 學習筆記 - 安裝、入門、Work Queues

本篇是關於 RabbitMQ 的入門學習筆記,內容從安裝到學習使用 Work Queue 的方式。能夠引導您快速入門。大部分的資料來自於官方的學習文件佐以實作時相關問題的資料補充。

繼續閱讀

Heroku 優化 Node 應用程式 - 併發

Node 對於擴展到不同規格的主機環境上其能力有限。首先是它是單執行緒,所以預設它不會自動使用額外的 CPU 核心。再者由於它基於 v8 引擎所以有記憶體上的限制概略是 1.5GB,所以也無法自動使用額外的記憶體。

因此 Nodejs 的應用程式需要多個進程來最大化可用的資源。這個過程我們稱為叢集,我們可以透過使用 Nodejs Cluster API 來完成這個功能。
我們可以直接在程式中使用 API 又或者使用基於這些 API 抽象化的函式庫。這裡我們將使用 throng

使用叢集的方式,應用程式可以善加利用各種 dyno 的資源使效能得到提升。Heroku 的 Nodejs buildpack 也提供一些環境變數來協助我們。

繼續閱讀

[譯] 使用 stream 的方式處理 JSON 傳輸

網頁應用程式在處理大量資料時一直都不是一件簡單的事。當需要接受大量資料時不只速度會變慢,且容易出錯,逾時等等。因此這是使用者體驗設計上的一個挑戰。
傳送大量資料同樣的也不容易,特別是在傳送前處理某些複雜的資料成為我們需要的資料時。

在這篇文章,我們將要來看看如何面對這些挑戰

繼續閱讀

[譯 + 補充] Webpack 2 學習筆記

在今時今日,webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具,但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML,CSS,甚至是圖片等,讓我們能夠控制程式發出 HTTP 請求的數量(編譯結果的檔案數量)。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sass, ES6 等等。同時也讓我們能夠輕易的使用來自 npm 的套件。

這篇文章目標讀者是那些剛接觸 webpack 的新手。內容將會包含設定,模組的使用,loaders,plugins,code splitting(分拆程式碼),熱替換(Hot module replacement)。

每過一陣子,重新學習 webpack 就會有些新的發現 - 廢話。

繼續閱讀

DOM 基礎複習筆記

DOM

DOM = Document Object Model。DOM 詮釋了 HTML,XML,SVG 上元件的組成建構,操作,是一套程式介面。所有的 DOM 都提供了 API 可以對其操作。實務上指的就是 HTML Tag,文件樹的結構化表示法。

例如:我們使用 HTML 標籤來撰寫,然後瀏覽器會把這些 HTML 轉成 DOM Object 讓我們可以操作。

繼續閱讀

理解 DOM 座標

座標系統

在瀏覽器中有兩種座標系統 & 滑鼠座標:
1. 相對於 document - 座標 (0, 0) 在整個頁面的最左上角。
2. 相對於 window - 座標 (0, 0) 在可視區 Viewport 的最左上角。
3. 滑鼠座標 - 通常透過事件取得。

當頁面還沒捲動時 window 和 document 的原點 (0, 0) 與其他座標是相同的。

開始捲動後,document 的座標等於 window(viewport) 的座標加上 scroll 的位置,大部分的情況下我們會使用 document 座標系統,因為它即便 scroll 了,還是會保持一致。

繼續閱讀

關於 Javascript {} + {}

這篇文章源自 What is {} + {} in JavaScript? 其實早在 2012 年就問世了。
時至 2016 年末純粹是在聊天時重提這個問題,但由於年紀大了記憶力不佳,竟然記了,所以才會有這一篇重新紀錄的筆記。

源頭是當時由 Gary Bernhardt 在閃電秀中指出 Javascript 的詭異行為 - Wat

繼續閱讀

撰寫高效能的 Javascript 小技巧

這篇文章將會介紹簡單的技巧來優化我們的程式碼讓 Javascript 編譯的過程更具效率,最終我們的程式碼可以執行的更加快速。
特別是當您在遊戲類型的專案上發現掉禎或記憶體回收機制(garbage collector)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。

繼續閱讀