#Front-end

前言

2021-06-09 補充:

感謝讀者 blackr1234 留言,此文章為 2018 年 11 月發表,底下程式碼輸出結果大概是以 Node.js v8.17.0 為準,因此對於一些狀況的輸出可能會跟現在不太一樣。例如說存取宣告前的 let 變數,當初的結果為:ReferenceError: a is not defined,現在用 Node.js v14 的結果則是:ReferenceError: Cannot access 'a' before initialization

這陣子我在忙一些教學相關的東西,稍微準備一些資料之後教了學生們 JavaScript 裡面的 hoisting,也就是「提升」這個觀念,例如說以下程式碼:

console.log(a)
var a = 10

會輸出undefined而不是ReferenceError: a is not defined,這種現象就叫做 Hoisting,變數的宣告被「提升」到最上面去了。

如果你只想了解最基本的 hoisting,其實差不多就是這樣,但後來我還教了letconst相關的一些知識,不過前一天剛教學完,隔天就立刻看到相關的技術文章還發現自己教錯,因此特別花了一點時間打算好好理解 hoisting 這個東西。

很多東西沒有深入研究的時候你都會覺得沒什麼,真的跳下去深入去看才會發現自己其實還有一大堆概念沒有搞懂。

有很多人都知道 hoisting,但是理解程度卻不盡相同,我列出了 10 個項目,如果有任何一點你剛好不知道的話,那恭喜,這篇文章應該可以為你帶來一些收穫。

  1. 你知道什麼是 hoisting
  2. 你知道 hoisting 只會提升宣告而非賦值
  3. 你知道 function 宣告、function 的參數以及一般變數宣告同時出現時的提升優先順序
  4. 你知道 let 跟 const 沒有 hoisting
  5. 你知道第四點是錯的,其實有但只是表現形式不一樣
  6. 你知道有關第五點,有個概念叫做 TDZ(Temporal Dead Zone)
  7. 你看過 ES3 的規格書,知道裡面是怎麼描述的
  8. 你看過 ES6 的規格書,知道裡面是怎麼描述的
  9. 你知道 hoisting 背後的原理是什麼
  10. 你看過 V8 編譯出來的程式碼

你可能會問說:「我為什麼要知道的這麼深?有什麼用?」,其實我也覺得對 hoisting,只要知道基本的就行了。只要你有好好地宣告變數,就算不知道那些,對日常生活或是工作也不會有太大的影響。

可是假如你像我一樣,想要有朝一日在自己的履歷上面放上「精通 JavaScript」的話,那對這些東西就不能逃避。同時你如果對底層的這些細節愈熟悉,會碰到的問題就愈少,也愈能理解為什麼會有 hoisting 的出現,當你想要在技術這條路上走得更遠爬得更高時,我覺得這些細節是很重要的。

接下來,我們就一步步來看 hoisting 吧!

閱讀更多

前言

前些日子在忙公司的產品改版,從原本的 PHP 換成後端 Go + 前端 React SPA,分成桌面版跟手機版兩個不同的 Project,而既然都改版了,自然要把最新最潮的 PWA 也放在目標裡面,之前耳聞 PWA 很久但卻沒有實作過的我也有了機會來嘗試這個東西。

如今產品已經改版完畢且上線了兩三個月,慢慢穩定下來,在優化 PWA 的過程中也讓我有了一些心得可以讓大家分享。

在舉一些實際案例之前,先讓我們來談談到底怎樣才算是 PWA。

閱讀更多

前言

CORS(Cross-Origin Resource Sharing,跨來源資源共享)在前端一直是個很經典的問題,簡單來說就是因為瀏覽器的一些安全考量,你在載入其他網域的資源時會受到一些限制,解決方法也很簡單,就是在 Server 那邊加上一些 response header 例如說 Access-Control-Allow-Origin,有了這個 header 之後瀏覽器就會認為你是有經過驗證的,就沒什麼問題了。

針對這個問題,我以前也有寫過一篇:輕鬆理解 Ajax 與跨來源請求,裡面把碰到的問題與解法寫得十分詳細。

我以為自從我上次深入研究過這個問題之後,從此以後 CORS 再也難不倒我,再也不會看到 console 跳出禁止跨來源存取的錯誤。

但是我錯了。

這次我在一個特定的使用場景之下摔了一跤,但也因此學到不少。而這次的經驗也讓我想起我以前寫的:我遇過的最難的 Cookie 問題

太好了,又有東西可以跟大家分享了!

閱讀更多

前言

其實這週原本是要來寫淺拷貝跟深拷貝的差異以及實作,但在找資料的時候無意間又看到 call by value 與 call by reference 相關的文章,越研究發現越有趣。原本以為自己已經搞懂了這個問題,但沒想到看的資料越多,卻把自己弄的越糊塗。

要寫這篇文章其實有兩個不同的方式,一個是詳實記錄我研究這個問題的過程以及心中的疑惑,以及最後如何得到解答,簡單來說就是按照時間軸來寫;另外一個是當我研究完以後,再重新以自己的方式整理,並且用更簡單易懂的方式來表達。

以往我的文章大多數都走第二種路線,重新歸納整理過後再寫出一篇相對上更容易理解的文章,用我的方式帶著大家一步步跟著我的脈絡去探討問題最後得出解答。

但這次我想嘗試第一種,帶大家看看我平常寫文章的時候都看了哪些資料,以及發想的過程為何,這樣應該也滿有趣的。

Let’s go!

閱讀更多

前言

雖然說從以前就一直聽到 React 要把內部的 reconciler 換成一個叫做 Fiber 的東西,但從沒仔細研究過,也不知道這樣子的改變會對上層造成什麼影響。

真正開始比較深入理解,是在某一次使用 Redux Form 時踩到一個相關的 bug,才知道 React 自從正式改用 Fiber 之後,其實對上層也有一些改變。

這篇的標題「淺談」不是騙你的,這篇真的很淺,我不會談到 Fiber 底層的運作(因為我也還沒認真研究過),只會用白話文跟你說 Fiber 大概是怎樣,是為了解決什麼樣子的問題而誕生。

閱讀更多

前言

前陣子在 Hacker News 上面看到這篇:Show HN: A CSS Keylogger,大開眼界,決定要找個時間好好來研究一下,並且寫一篇文章分享給大家。

這篇會講到以下東西:

  1. 什麼是 keylogger
  2. CSS keylogger 的原理
  3. CSS keylogger 與 React
  4. 防禦方法

好,那就讓我們開始吧!

閱讀更多

前陣子正在重構公司的專案,試了一些東西之後發現自己對於 React 的渲染機制其實不太了解,不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣,其實還有滿多人對這整個機制不太熟悉,因此決定寫這篇來分享自己的心得。

其實不知道怎麼優化倒還好,更慘的事情是你自以為在優化,其實卻在拖慢效能,而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了!這個就嚴重了。

因此,這篇文章會涵蓋到下面幾個主題:

  1. Component 跟 PureComponent 的差異
  2. shouldComponentUpdate 的作用
  3. React 的渲染機制
  4. 為什麼要用 Immutable data structures

為了判別你到底對以上這些理解多少,我們馬上進行幾個小測驗!有些有陷阱,請睜大眼睛看清楚啦!

閱讀更多

前言

關注 RxJS 已經好一段時間了,最早知道這個東西是因為 redux-observable,是一個 redux 的 middleware,Netflix 利用它來解決複雜的非同步相關問題,那時候我連redux-saga都還沒搞懂,沒想到就又有新的東西出來了。

半年前花了一些時間,找了很多網路上的資料,試圖想要搞懂這整個東西。可是對我來說,很多教學的步調都太快了,不然就是講得太仔細,反而讓初學者無所適從。

這次有機會在公司的新專案裡面嘗試導入redux-observable,身為提倡要導入的人,勢必要對這東西有一定的瞭解。秉持著這個想法,上週認真花了點時間再次把相關資源都研究了一下,漸漸整理出一套「我覺得應該可以把 RxJS 講得更好懂」的方法,在這邊跟大家分享一下。

在開始之前,要先大力稱讚去年 iT 邦幫忙鐵人賽的 Web 組冠軍:30 天精通 RxJS,這系列文章寫得很完整,感受得出來作者下了很多功夫在這上面。看完這篇之後如果對更多應用有興趣的,可以去把這系列的文章讀完。

好,那就讓我們開始吧!

閱讀更多

前言

這篇的原文(你走你的陽關道,我走我的獨木橋:前後端分離)是我之前在 iT 邦幫忙鐵人賽的其中一篇文章,寫完之後有陸陸續續收到一些回饋,就想說可以重新整理一下這篇文章,讓它變得再更清楚一點。

如果你有以下疑惑的話,這篇文章非常適合你:

  1. 為什麼前端會有 MVC?
  2. 前端 MVC 跟後端 MVC 有什麼不一樣?
  3. 為什麼要有 SPA(Single Page Application)?

閱讀更多