javascript

在瀏覽器輸入網址並送出後,到底發生了什麼事?

這道題目涵蓋前端技術範圍很廣,很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼,就讓我來檢視一下自己的狀態吧 d(`・∀・)b

效能調校 轉譯效能 關鍵轉譯路徑 你懂JavaScript嗎? 你所不知道的JS 加載效能 圖片最佳化 快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype · 留言


你懂 JavaScript 嗎?#30 總結

總結鐵人賽這 30 天的想法與感謝。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#29 語法(Syntax)

本文主要會談到 ES6 新增的熱門語法,包含以區塊為範疇的宣告、分散與其餘運算、預設參數值、解構、物件字面值擴充功能、範本字面值、箭號函式。。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#28 ES? 現在 vs 未來

本文主要會談到如何在 JavaScript 快速演進的狀況下,漸進的適應新功能?來嘗試 Transpiling 與 Shims/Polyfills 吧。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#27 基準化分析與微調(Benchmarking and Tuning)- 使用 Benchmark.js 和 jsPerf 分析程式碼效能

本文主要會談到如何使用工具來做基準化分析。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 效能調校 · 留言


你懂 JavaScript 嗎?#26 程式效能(Program Performance)

本文主要會談到 web worker、SIMD 與 asm.js。到目前為止我們只談論了如何有效的運用非同步處理模式,現在就來探討為什麼非同步處理對 JavaScript 來說這麼重要,其中最明顯的理由就是效能,本文主要探討的是更整體的程式層級的效能。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 Web Workers Worker 效能調校 · 留言


你懂 JavaScript 嗎?#25 產生器(Generator)

本文主要會談到 generator 的基本概念與範例;從 callback 演進到 ES6 promise 與 generator 再進化到 ES7 async 和 await。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#24 Promise

本文主要會談到 promise 是什麼?promise 的錯誤處理、模式與限制。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#23 Callback

本文主要會談到情境切換、callback vs callback hell、控制權轉移、解決 callback 的信任問題的解法-分別回呼與錯誤優先處理。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#22 非同步:現在和以後

本文主要會談到事件迴圈與共時

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#21 ES6 Class

本文主要是探討 ES6 Class 的美好與陷阱。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? ES6 鐵人賽 · 留言


你懂 JavaScript 嗎?#20 行為委派(Behavior Delegation)

本文主要會談到-什麼是行為委派?和類別有什麼差異?行為委派的優點是什麼?模型比較?什麼是 OLOO?如何使用委派機制達到去類別化?如何撰寫更簡潔易懂的程式碼?物件間要怎麼做內省?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#19 原型(Prototype)

本文主要會談到-類別、建構子與實體;什麼是原型串鏈?原型串鏈的功用是?什麼是原型式繼承?疑難雜症大解惑-如何分辨屬性是位於該物件或原型串鏈上的?如何分辨誰是誰的實體?誰是誰的建構子?原型串鏈有終點嗎?如何建立兩物件的連結?物件屬性的設定與遮蔽規則有哪些?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#18 (簡易版)物件導向概念

本文主要會談到簡單的物件導向概念,作為後續「原型」(Prototypes)的暖身。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#17 物件(Object)

關於物件,本文會提到-語法:宣告式與建構形式;型別:再次複習 typeof、使用 instanceof 判定物件子型別;內容:屬性值的存取、物件的複製(淺拷貝與深拷貝)、屬性描述器、不可變的物件、取值器與設值器、檢視屬性是否存在、屬性列舉;迭代:一些迭代出陣列的值的方法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#16 this

本文主要會談到-this 是什麼?判斷 this 的值的四個規則與例外。語彙的 this,這裡會提到箭頭函數中的 this 的不同之處。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#15 閉包(Closure)

本文主要會談到-閉包是什麼?有什麼功用?迴圈與閉包搭配使用時的謬誤與陷阱。模組模式是什麼?如何管理模組?探討模組依存性載入器/管理器與 ES6 模組。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#14 動態範疇(Dynamic Scope)

本文主要是比較動態範疇與語彙範疇的差異。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#13 拉升(Hoisting)

本文主要會談到-什麼是拉升(hoisting)?變數與函式的拉升有什麼不同?怎麼處理在 script 標籤內宣告的全域變數?是否也有拉升的狀況?拉升 vs 重複宣告的變數與函式,要怎麼處理?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#12 函式範疇與區塊範疇(Function vs Block Scope)

本文會提到範疇的劃分單位可分為兩種-函式範疇與區塊範疇,它們有什麼不同?各有什麼優點?函式範疇的重要觀念與相關應用-函式宣告與函式運算式、匿名與具名函式、即刻調用函式運算式。區塊範疇的重要觀念與相關應用-const 與 let、垃圾回收。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#11 語彙範疇(Lexical Scope)

本文會提到什麼是語彙範疇?這階段要做什麼事情?什麼會改變語彙範疇?有什麼影響?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#10 範疇(Scope)

本文會提到什麼是「範疇」?範疇的功用是?編譯器怎麼理解程式碼?什麼是巢狀範疇?從 LHS 與 RHS 來理解 JavaScript 查找變數的報錯機制。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#9 文法(Grammar)

JavaScript 的文法是描述其語法(syntax),例如:運算子、關鍵字等,如何結合在一起,形成格式正確的有效程式的一種結構化方式。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#8 強制轉型(Coercion)

強制轉型(coercion)到底是一個有用的功能,還是設計上的缺陷呢?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#7 原生功能(Natives)

本文主要會談到...何謂 Natives(原生功能)?怎麼用?物件包裹器、陷阱、解封裝;各類建構子的原生功能、原生的原型。雖然優先使用字面值而非使用建構子建立物件,還是需要來看一些需要關心的議題和警惕用的錯誤用法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array javascript date 鐵人賽 javascript prototype · 留言


你懂 JavaScript 嗎?#6 值(Values)Part 2 - 特殊值

本文主要內容為探討基本型別的特殊值並能適當地使用它們。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#5 值(Values)Part 1 - 陣列、字串、數字

本文主要會談到關於陣列、字串、數字的錯誤操作方式與疑難雜症的解法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array 鐵人賽 · 留言


你懂 JavaScript 嗎?#4 型別(Types)

本文主要會談到 (1) 何謂「型別」?內建型別有哪些?常見疑難雜症與解法;(2) 未定義(undefined)vs 未宣告(undeclared)。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array 鐵人賽 · 留言


你懂 JavaScript 嗎?#3 暖身 (๑•̀ㅂ•́)و✧ Part 2 - 變數、嚴格模式、IIFEs、閉包、模組、this、原型、Polyfill 與 Transpiler

在上一篇暖身文章中大致聊過了一些基本知識,像是運算子、運算式、值與型別、變數、條件式、迴圈,本文還會再探討一些基礎概念,像是變數、函式範疇、拉升、巢狀範疇、嚴格模式、IIFE、閉包、模組、this、原型、Polyfill 與 Transpiler。本文也僅是概念而已,之後會有單篇章節細細討論的,所以就算是暖身 Part 2 摟。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 javascript prototype · 留言


你懂 JavaScript 嗎?#2 暖身 (๑•̀ㅂ•́)و✧ Part 1 - 運算子、運算式、值與型別、變數、條件式、迴圈

本文主要內容為程式設計簡介,在此可看到在初學階段所必須理解的各種專有名詞。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#1 預備...GO!

這次鐵人賽的主題是「你懂 JavaScript 嗎?」,主要內容是「You Don't Know JS」系列書的讀書筆記。為什麼要讀這一系列的書呢?由於近幾年的年度願望中都有「讀完 You Don't Know JS 系列書」這一項(掩面),但苦於各種理由而導致進度嚴重落後(哭),那麼就讓我藉由這次鐵人賽一口氣讀完吧(握拳)!

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


從 JavaScript 著手優化渲染效能

避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。

效能調校 轉譯效能 關鍵轉譯路徑 requestAnimationFrame Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css · 留言


Web Workers

JavaScript 通常在作業系統的 Main Thread 執行,但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread,兩條線互不影響,讓 JavaScript 在背景執行,並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers,好處是不阻塞 Main Thread 而讓速度變快。

Web Workers 效能調校 轉譯效能 Rendering Performance Chrome DevTools javascript Worker · 留言


如何提升動畫效能?

動畫效能優化筆記。這裡提供三個方向:使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。

效能調校 轉譯效能 關鍵轉譯路徑 css3 animations Rendering Performance Critical Rendering Path requestAnimationFrame will-change javascript css · 留言


JavaScript:使用 Array.map、Object.values 和 Object.keys 處理一連串的資料

使用 Array.map、Object.values 和 Object.keys 處理「物件中有物件」和「陣列中有物件」的情況。

javascript javascript array functional programming · 留言


ES6 Top Features You Must Know

ES6 快速小筆記:let / const、物件縮寫 Object Shorthand、預設傳入參數 Default Paramaters、解構賦值 Destructuring Assignment、字串模板 String Template、擴展運算子 Spread Operator、其餘運算子 Rest Operator、箭頭函數 Arrow Function、Class、Mudule 等。

ES6 javascript javascript prototype · 留言


jQuery .attr() vs .prop()

Attribute 與 Property 的差異、jQuery 相關程式碼解析。

jQuery javascript · 留言


Service Worker

Service Worker 的瀏覽器支援度檢查、註冊(Register)、下載(Download)、安裝(Install)、啟動(Active)、閒置(Idle)、發生錯誤(Error)、存取(Fetch)、收發訊息(Message)和結束(Terminated)。

Service Worker javascript Worker Chrome DevTools · 留言


Notification(通知):利用 JavaScript 實作瀏覽器推播通知

實作瀏覽器推播通知的過程以下面的流程圖表示,會經過幾個步驟:瀏覽器支援度檢查、請求授權、建立通知、發出通知、分門別類通知、事件處理和錯誤處理。

Push Notification javascript · 留言


JavaScript:檢查日期是否存在

檢查日期是否存在,這裡分為兩個部份「該年是否為閏年」和「該日是否超過每個月份最大日期限制」。

javascript javascript date · 留言


JavaScript:將指定日期加上 X 天

將指定日期加上 X 天,得到一個延後的日期。

javascript javascript date · 留言


JavaScript 陣列處理:找東西 - indexOf、$.inArray 與 filter

整理了一些在陣列中找東西的方法。

javascript javascript array ES6 · 留言


如何用 JavaScript 產生 UUID / GUID?

使用 JavaScript 產生 UUID / GUID 的方法。這篇文章整理了幾種使用 JavaScript 產生 UUID / GUID 的方法和優缺比較。

javascript uuid guid · 留言


Currying in JavaScript(柯里化)

Currying(柯里化),又稱為 parital application 或 partial evaluation,是個「將一個接受 n 個參數的 function,轉變成 n 個只接受一個參數的 function」的過程。

javascript functional programming · 留言


利用 Object.defineProperty 和 MutationObserver 實作雙向綁定

雙向綁定就是 (一)可以經由改變model的值而自動更新DOM的內容,並且 (二)經由改變DOM的內容而自動更新model的值。以下分這兩部份來實作...

javascript vue.js 雙向綁定 two-way binding · 留言


ES6: let, const, Block-Level Scope

let, const, var, function declaration, block-level scope, hoisting 相關筆記。

ES6 javascript · 留言


T3: 構建大型網站的 JavaScript 框架

T3 是一個 JavaScript UI Framework,主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話,很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。

javascript · 留言


jQuery 的陣列操作:$.map() 與 $.grep()

這陣子在整理系統內的程式碼,發現自己曾經使用一些過時的方法(例如:native javascript 操作陣列),而非使用 jQuery 提供的 API 來撰寫。以下整理並比較這兩種方法的差異。

jQuery javascript · 留言


JavaScript Object Oriented Programming

關於 JavaScript Object Oriented Programming,會寫這一系列的文章是因為希望自己的 JavaScript 程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...

javascript javascript prototype · 留言


JavaScript Object Oriented Programming: Early and Late Binding

JavaScript 在呼叫的時候設定 this 的值,而這個 this 的值有可能不是我們預期的結果。下面有幾個範例。

javascript · 留言


JavaScript Object Oriented Programming: Exceptions

「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。

javascript · 留言


JavaScript Object Oriented Programming: Factory Constructor Pattern

Factory Constructor Pattern 不使用 new 來宣告新物件,新物件用 function call 來建立。

javascript · 留言


JavaScript Object Oriented Programming: All-in-one Constructor Pattern

所有的 method 和 property 都放在 consctructor 中,而不使用 prototype。

javascript javascript prototype · 留言


JavaScript Object Oriented Programming: Pseudo-Classical Pattern

在 pseudo-classical pattern 中,物件是由「建構子」(constructor)這個函式所建立,並把 method 放到建構子的 prototype 中。

javascript javascript prototype · 留言


JavaScript Object Oriented Programming: The instanceof operator

instanceof 允許檢查物件是否為給定的 constructor 所產生的。

javascript · 留言


JavaScript Object Oriented Programming: The constructor property

物件有內建的屬性「constructor」,意即「參考建立此物件的 function」。

javascript · 留言


JavaScript Object Oriented Programming: Extending Natives

Native JavaScript 物件將 method 存在 prototype 中。例如:當一個新的物件被建立,內容為空,但為何可以使用 toString 這個 method?

javascript javascript prototype · 留言


JavaScript Object Oriented Programming: Prototypal Inheritance

對大多數的語言來說,它們擁有「Class」和「Object」,而 Class 繼承其它的Class。對於 JavaScript 來說,繼承是使用 prototype 來實作的,意即沒有 Class,而是由物件繼承其它的物件來達成繼承。

javascript javascript prototype · 留言


Strategy 策略模式

JavaScript Design Pattern「Strategy 策略模式」筆記。

javascript 設計模式 Design Pattern · 留言


Event Delegation 事件委派

JavaScript Pattern「Event Delegation 事件委派」筆記。

javascript 設計模式 Design Pattern · 留言


Iterator 迭代器模式

JavaScript Design Pattern「Iterator 迭代器模式」筆記。

javascript 設計模式 Design Pattern · 留言


Factory 工廠模式

JavaScript Design Pattern「Factory 工廠模式」筆記。

javascript 設計模式 Design Pattern javascript prototype · 留言


Singleton 單體模式

JavaScript Design Pattern 「Singleton 單體模式」 筆記。

javascript 設計模式 Design Pattern javascript prototype · 留言


Code Reuse Patterns

JavaScript Pattern 之 Code Reuse Patterns 筆記。JavaScript 沒有 class 的概念,而物件也僅是名值對(key-value pair),表示可以即時建立和改變。但 JavaScript 卻有建構式,類似其他語言(例如:Java)使用 class 的語法。

javascript 設計模式 Design Pattern javascript prototype · 留言


Module Pattern

Module Pattern 利用函數的「閉包(Closure)」特性來避免汙染全域的問題,意即使用閉包來提供封裝的功能,將方法和變數限制在一個範圍內存取與使用。這樣的好處除了避免汙染全域外,也將實作隱藏起來,只提供公開的介面(Public API)供其他地方使用。

javascript 設計模式 Design Pattern · 留言


Decorator 裝飾者模式

Decorator(裝飾者模式)的說明與範例。

javascript 設計模式 Design Pattern javascript prototype · 留言


JavaScript: JSON.parse and JSON.stringify

使用 JSON 做 Client 端與 Server 端資料傳遞的說明與範例。

javascript · 留言


JavaScript: Call and Apply

call 與 apply 兩者皆是執行某個 function,並將這個 function 的 context(即物件)替換成第一個代入的參數。其差異在於 call 必須將參數一一代入,而 apply 除了第一個參數代入 context 外,其餘的參數只要包在一個陣列裡面即可。註:第二個參數不是必須的(optional)。

javascript · 留言


JavaScript: Closure 與 Hoisting

分散 var 來宣告變數並沒有太大的意義,因為就 JavaScript 程式語言的特性來說,函數(Function)中未宣告而先用到的變數會被提升至區塊的第一行做宣告。先來看基本觀念 Closure,再來看 Hoisting。

javascript · 留言