• JavaScript高手都該會的7種陣列方法

    本篇介紹的陣列方法將寫程式的焦點從「如何做」轉移到「做什麼」,也就是 functional programming 中的「宣告性編程」。這些陣列方法易學易用,能夠幫助你提升程式碼的可維護性並減少潛在的bug,所以我認為每個 JavaScript 的使用者都有必要了解本篇介紹的陣列方法。

    (閱讀全文...)

  • 前端工程師都該懂的6個網頁載入加速技巧 (加速 30% 真實案例分享)

    為什麼要優化網頁的載入速度?大家開發產品時,總是把使用者體驗掛在嘴邊,但卻常常忽略一個事實:載入速度和使用者體驗息息相關。根據 Amazon 內部統計,網頁載入的速度每增加100ms,營收就減少 1%。網站速度越慢,客戶越不願意掏出錢來買你的東西。另外網頁載入速度也會影響 SEO

    (閱讀全文...)

  • [教學] JavaScript 中的 Hoisting 是什麼意思?let const var 的差異居然是這個?

    JavaScript 在 ES6 let 和 const 問世之前,都是用 var 來定義變數,但是 var 有許多迥異於其他程式語言的特性,像是使用函式作用域 (function-level scope),以及具有變數 hoisting 的規則,對於初學者而言非常容易搞錯。這篇文章要告訴你 hoisting 是什麼意思,以及 let const var 的差異,以及區塊作用域 (block-level scope) 和函式作用域 (function-level scope) 的差異。

    (閱讀全文...)

  • [教學] JavaScript 中的 this 是什麼?

    在 JavaScript 中,「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關,因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的,把握一個簡單原則就可以知道 this 到底是誰。另外,arrow function 的 this 也很常令人搞混,這篇文章也會一併介紹 arrow function 中的 this。

    (閱讀全文...)

  • [教學] CORS 是什麼? 如何設定 CORS?

    當我們在 JavaScript 中透過 fetch 或 XMLHttpRequest 存取資源時,需要遵守 CORS (Cross-Origin Resource Sharing,跨來源資源共用)。瀏覽器在發送請求之前會先發送 preflight request (預檢請求),確認伺服器端設定正確的 Access-Control-Allow-MethodsAccess-Control-Allow-HeadersAccess-Control-Allow-Origin 等 header,才會實際發送請求。使用 cookie 的情況下還需額外設定 Access-Control-Allow-Credentials header。

    (閱讀全文...)

  • [教學] Cookie 與 document.cookie

    Cookie 是儲存在瀏覽器的一小段文字資料,通常由伺服器透過 Set-Cookie header 傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來,並在之後的請求回傳 cookie 至同樣的伺服器。Cookie 最常見的用途之一是認證身份,例如登入狀態、購物車等,也被應用於追蹤使用者及廣告上。這篇文章會介紹用 JavaScript 讀取及設定 cookie 的方法,以及 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的意義,以及關於 cookie 的安全性議題。

    (閱讀全文...)

  • [教學] @babel/preset-env 設定

    這篇文章要介紹如何設定 @babel/preset-env@babel/preset-env 是 babel 7 架構下的一組 preset,能讓你用最新的 JavaScript 語法寫程式,並且智慧地根據瀏覽器的環境引入需要的 polyfill,節省手動管理 syntax transform 的時間,還能夠減少 bundle 檔案大小,是現代前端開發不可或缺的利器,快跟我一起來看看設定上有哪些要注意的地方吧!

    (閱讀全文...)

  • [教學] JavaScript Prototype (原型) 是什麼?

    在 JavaScript 中,每個物件都有一個 prototype (原型),物件可以從原型上繼承屬性和方法,達到復用程式碼的效果,這就是所謂的 prototypal inheritance (原型繼承)。除此之外,原型也能繼承其他物件,因此物件可以繼承一層又一層的屬性和方法,這形成了所謂的 prototype chain (原型鏈)。本篇文章將介紹 prototype、prototype chain,以及 prototypal inheritance 與 class inheritance (類別繼承) 的差異。

    (閱讀全文...)

  • [教學] Web Share API - Navigator.share() 介紹

    Web Share API 是現代瀏覽器提供的最新功能之一,它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。

    (閱讀全文...)

  • [教學] 如何設定 Webpack HMR + React Hot Loader (2020更新)

    Hot Module Replacement (HMR) 是 Webpack 提供方便開發過程的功能,讓你修改原始碼時不需要重新載入頁面,這篇文章將會教你如何設定 Webpack Config 使你的專案支援 HMR,增加團隊的開發效率。

    (閱讀全文...)