2019年3月11日 星期一

Web技術相關好文&重點整理

JS:

1.我知道你懂 hoisting,可是你了解到多深?
https://github.com/aszx87410/blog/issues/34

此文章從ECMAScript的規格去剖析hoisting的原理,非常不錯。以下節錄結論:
當我們在進入一個 EC 的時候(你可以把它想成就是在執行 function 後,但還沒開始跑 function 內部的程式碼以前),會按照順序做以下三件事:
1. 把參數放到 VO 裡面並設定好值,傳什麼進來就是什麼,沒有值的設成 undefined
2. 把 function 宣告放到 VO 裡,如果已經有同名的就覆蓋
3. 把變數宣告放到 VO 裡,如果已經有同名的則忽略

2. Microtasks/Macrotasks and their relations to Promises/Event
https://javascript.info/microtask-queue

這也是一篇很有趣的文章,網站整體的內容也很充實。重點在認識V8對於Promise和Event的處理順序,對於理解Node非同步很有幫助。可以幫助釐清promise chain中的非同步處理的順序。ex: 不同then裡面若各自有非同步的呼叫,並無法保證前一個then中的會先執行完,也就是說Promise chain在使用上,要注意then裡頭若是有非同步呼叫,(很有)可能會在這個then block結束後才完成,因此下一個then block不能相依於此then block的非同步處理結果

System Design:

1.搶購系統設計
https://codertw.com/程式語言/573527/

此文章深入探討搶票/搶購系統的架構設計,內容含括前/後端業務邏輯,也提出許多解決方案,值得參考。

ES6 features:

1. import/export Modules:
https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281

扼要回答了ES6 Module的使用方式,也解釋了export default(預設導出/入)和 { A as B } ( named export renaming)的意涵。

React:

Life Cycle demo:
https://codesandbox.io/s/8k9k5zm060

一個簡單的demo,可以了解元件的生命週期,和state update的一些呼叫順序。