#Front-end

前言

如果要舉出一個在 JavaScript 裡面很重要也很常用,但新手常常搞混的概念,那「非同步(Asynchronous)」當仁不讓,絕對是第一名。跟其他那些 thisclosureprototype 或是 hoisting 比起來,非同步在實際開發的時候用到的頻率高太多了,而且是初學者常常會踩坑的地方。

非同步真的那麼難嗎?

我相信不是的。只要循著一個正確的脈絡前進,就可以循序漸進理解為什麼需要非同步,也能知道在 JavaScript 裡面是怎麼處理這種操作的。

類似的主題我其實在四年前就寫過,但現在回頭看實在是寫得滿差的,所以四年後重新挑戰這個主題,希望能寫出一篇品質不錯的文章,把非同步這件事情講清楚。

在寫這篇文章之前,參考了 Node.js 的官方文件,發現在非同步的講解上其實做得不錯,因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係,我底下會稍微做點介紹。

建議閱讀本文以前需要具備 JavaScript 基礎,知道如何使用 JavaScript 操作 DOM,也知道什麼是 ajax。

接著就讓我們開始吧!

閱讀更多

簡介

近幾年前端框架大放異彩,許多新手才學沒多久的 JavaScript,就直接學習三大框架了(雖然 React 不是框架,但整個生態系其實就跟框架沒兩樣,因此我覺得歸類在框架也不是不行)。

而這三大框架通常都是拿來寫 SPA(Single Page Application)用的,我一直認為在學習這些框架前應該要具備一些基礎知識,尤其是對於前後端的理解,否則一定會遇到很多不知道從何解起的問題。

因此,本文舉出一個我自己曾經碰過,學生也常常跑來問我的問題當作範例,大家也可以先想一下自己能不能回答出這個問題:

假設今天我有個 SPA,搭配某些 router 的 library 來實作路由,所以 /list 會連到列表頁,/about 會到關於我的頁面。

可是奇怪了,當我把 SPA 上傳到 GitHub Pages 之後,首頁是好的,我從首頁進去 /list 也是好的,可是當我在 /list 重新整理的時候,卻顯示 404 not found,這是為什麼呢?

要回答這個問題,必須先來複習一下前後端相關的網路基礎知識。

閱讀更多

(原文寫在 Medium,順便在這邊備份一下)

雖然說我一直很清楚自己目前偏好的學習方法以及路線,並且把我認為適合的路徑都變成上課的大綱拿去教學,但一來好像沒多少人會去看那個大綱,二來大綱並沒有詳細解釋背後的原因。因此我才覺得自己有必要寫這一篇,來寫一下自己認為比較「紮實」的網頁前端學習路線。

閱讀更多

前言

前陣子有個學生跑來問我一個問題,說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件,還有 keyCode 跟 charCode 這兩個東西,有時候拿得到值,有時候卻拿不到,覺得十分困惑。

我原本以為是 React 做了一些處理,所以去看了一下原始碼。後來發現 React 的確有做一些處理,但實際上這個問題跟 React 沒什麼關係,而是 keyPress 跟 keyDown 這兩個原生的 JavaScript 事件本來就有差異。

所以他碰到的問題跟 React 一點關係都沒有,只是對這部分的事件機制不熟而已。

儘管如此,能夠藉由一個實際的問題來參考一下 React 的實作還是件很不錯的事,而且 React 的註解寫得很好。

因此,這篇會先帶大家來看這兩個事件的不同,最後再來看 React 裡面怎麼做一些處理。

閱讀更多

前言

在 JavaScript 裡面,有一個令新手十分頭痛,老手也不一定能完全理解的主題:「this 是什麼?」。身為一個以 JavaScript 當作吃飯工具的前端工程師,我也被這個問題困擾了許久。

我原本以為我這輩子都不會寫有關於 this 的文章。

原因有兩個,第一個是講解 this 的文章已經超級無敵多了,而且每一篇都寫得很不錯,之前看完 What’s THIS in JavaScript ? 系列之後覺得講解的很完整,若是沒有把握自己能夠講得更清楚或是以不同的角度切入,似乎就沒必要再寫一篇文章;第二個原因是若是想要「完全」搞懂 this,要付出的成本可能比你想像中要大得多。

閱讀更多

前言

以 CSS 架構方法來說,主流的大概可以分成三個:OOCSS、SMACSS、BEM,這些架構的提出都是為了讓 CSS 更好維護,這幾個的介紹以及差異可以參考 @arvinh 寫過的 淺談 CSS 方法論與 Atomic CSS

但我們今天要談的不是上面提到的這三種,而是另外一種相較之下沒那麼主流(但好像有慢慢流行的趨勢),而且很少人第一眼看到就會贊同的方法:functional CSS。

閱讀更多

前言

前幾天看見 Redux 作者 Dan Abramov 寫的這篇:Things I Don’t Know as of 2018,看了之後其實滿有感觸的,前些日子也在思考這種跟自信相關的事情,也做了個簡單的總結,寫下了兩年過後,我能夠被稱為資深工程師了嗎?

無獨有偶地,這幾天也看到一些 2019 年更新版的學習路線圖,下面依舊有些留言在說「怎麼前端要學那麼多東西」、「怎麼學的完」、「前端好難啊」等等之類的,雖然這兩件事看似沒有關連,但我覺得其實是相關的。

閱讀更多

前言

請先原諒我用了一個比較聳動的標題,因為實在是想不到還有什麼標題好下,最後選擇了一個可能比較有爭議的標題,但能利用這樣的標題激起討論也是滿有趣的,何況我說這話也是有根據的。

在觀看此篇文章之前請先看過上一篇:我知道你懂 hoisting,可是你了解到多深?,因為文章內容有部分相關,所以必須先有 Execution Context 以及 Variable Object 的觀念以後,才能夠吸收這篇文章的東西。

如果你只對文章標題的那句:「所有的函式都是閉包」有興趣,那可以直接往下拉,因為要講閉包就必須先從作用域開始講起,所以這篇文章按照慣例不會太短,前面也會有一定程度的鋪陳。

好,讓我們從作用域開始吧。

閱讀更多

前言

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

會輸出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。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×