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的一些呼叫順序。

How to clone an object in Javascript with Object.defineProperties?

TL;DR

Sometimes we want to clone an object in JS, we will use something like:

const obj = {foo:'bar'};

const newobj = {};

for (const key in obj){

    newobj[key] = obj[key];

}

This will work fine under most circumstances, since you might never adjust the property flags of the object. Also, when we create an object property, theare default to true, so everything is "default normal." And you might even not know there are such flags. Property flags, in brief, are metadata for the property in the object. They define the configuration of the property such as if the property is writable/enumerable/configurable.

Here are some simple explanation about the flags:

Writable: can reassign value or not.

Enumerable: can enumerate it with for...in loop or not.

Configurable: can change the flags shown above and this flag or not.

Okay, the problem with the above cloning code is that when someone changes the flags to non-default values, and you unconsciously clone the object without knowing those property flags. In a nutshell, if you want to clone an object along with the flags, please do as following:

let newobj = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));

Here we use Object.defineProperties(object, descriptors) and Object.getOwnPropertyDescriptors(object) to accomplish this. The former will define properties for the objects in the first argument ( here is an empty object literal. ) with the property descriptors in the second argument ( here is the latter function getOwnPropertyDescriptors. ). However, although the code is cleaner, this method should be employed only when you really need to clone the property descriptors since it is slower and not straight-forward enough.

For more on Property flags and descriptors:

https://javascript.info/property-descriptors