JavaScript

淺談 Web EME API

淺談 Web EME API

什麼是 EME? EME 是簡稱,全名 Encrypted Media Extensions (加密媒體擴充 API),它現在是瀏覽器標準內建的 Web API,讓瀏覽器可以播放受 DRM 保護的影片。使用它的核心目標是讓 HTML5 <video> 支援加密內容,並確保只有合法授權的使用者能夠解碼和播放影片。 要注意的是: EME 不負責解密影片,它只是 API,提供 Interface 與電腦底層 DRM 系統溝通的機制。 為什麼需要 EME? 早年大多數的線上影音網站使用 Flash 或 Silverlight 來播放影片(這些技術也有實作 DRM 的保護機制,例如 Flash 的 Flash Media Rights Management、
SimonAllen
錯誤處理:開發 Client 別忘了實作 Error View 錯誤畫面

錯誤處理:開發 Client 別忘了實作 Error View 錯誤畫面

在 Web 前端中,若 JS Runtime 發生錯誤(例如存取 undefined 的屬性),頁面往往會直接變成一片空白,沒有任何提示,讓使用者以為網頁整個掛了。 雖然這對效能沒有幫助,但對使用者體驗來說卻非常關鍵。很多 Web 網站並未針對錯誤做處理。 常見情境 當 Web JS 拋出錯誤或後端 API 欄位漏給資訊,JavaScript 取用 response 不存在的物件 null 、undefined下另個不存在的值,就會拋出錯誤,若是沒實作 try-catch 或拋出的錯誤在元件樹層層傳遞都沒被接住,瀏覽器就會一片空白。 這在產品開發上是不太能接受的,通常會有個「something went wrong」的錯誤畫面,提醒使用者網頁壞囉。 例如 2020年 youtube 有爆掉過一次,大家就看猴子一個下午。 面對預料外的錯誤,Client
SimonAllen

TypeScript 筆記:never 簡介

上一篇 TypeScript 筆記簡單介紹了 unknown,而此篇改來介紹另一個特殊型別—— never: never never 型別是所有型別的子集,TypeScript 「所有」型別(甚至包括 any、null 與 undefined)都有包含 never 例外處理的狀態,其在 TypeScript 2.0 版提出,表示不存在值的型別,那怎樣會出現不存在值的型別呢? 最常見的情形有兩種: * 無法結束的函式方法 * throw error 錯誤處理 無法結束的函式方法 無法結束函式方法情境,最常見就是函式內發生了無限迴圈的情況: function infiniteLoop(){ while(true){ } } 不過,上述程式碼在型別推論因為函式沒有回傳值,會被自動推論成 void。 可以這麼理解,當一個函式沒有返回值時,它的 return 值為 void 型別,
SimonAllen

TypeScript 筆記:unknown 簡介

延續上一篇 TS 筆記末尾,若版本允許,使用 unknown 會比 any 更好一點,此篇就來簡介一下 unknown: unknown unknown 型別容易與 any 搞混,其在 TypeScript 3.0 版提出,也是所有型別的聯集。unknown 意指未知型別,表示不知道當下是何種型別。使用 unknown 會允許 TypeScript 在之後仍可以賦值為任意型別。 unknown 和 any 的差異: * 不能直接操作屬性、方法、建構式 * 無法重新賦值給 unknown 或 any 外的型別 * 需要斷言或限縮型別 不能直接操作屬性、方法、建構式 在使用 any 的情境下,我們可以這樣寫,
SimonAllen

TypeScript 筆記:void 與 any

TypeScript 是 JavaScript 的超集合,最終還是編譯成 JavaScript,除了原本 JavaScript 的型別系統,TypeScript 還新增了一些特殊型別,例如:void、any、never 與 unknown。 此篇先以 void 與 any 介紹為主: void void 表示沒有 return 返回值的函數回傳值(空值)型別。 在撰寫 JavaScript 函式、方法時,函式不一定要 return 返回值出來,它不一定是有輸入就有輸出的 pure function。例如 JavaScript 我們可以這樣寫: let a = 1; function add(){ a = a + 1
SimonAllen

TypeScript 筆記:原始型別

談 TypeScript 的型別種類之前,要有個認知:TypeScript 是 JavaScript 的超集合,最終編譯成 JavaScript,純 JavaScript 語法都是可以在 TypeScript 撰寫的。而在 JavaScript 有分成原始型別 Primitive types 和物件型別 Object types,TypeScript 內自然也有,並且還新增了其他的型別設定。 此篇先從原始型別開始,TypeScript 的原始型別(比照 JavaScript)有:number (數值)、string (字串)、boolean (布林值)、null、undefined 與 ES6 新增的型別 Symbol。 number * 型別註記:用:number來標註。 * 型別斷言:用&
SimonAllen

TypeScript 筆記:推斷、註記與斷言

和 JavaScript 相比,TypeScript 最容易被提出差異的就是型別系統,其核心主要為註記、斷言與推論。 型別推論 Inference 在撰寫 TypeScript 時,如果沒有指出型別,那麼編譯器會照型別推論來推測型別。 例如,這樣寫會報錯: let years = '2021'; years = 2021; 在前面 let years = '2021'; 這段,雖然我們沒有使用斷言與註記限制變數 years 型別,但 TypeScript 按照型別推論規則推測 years 是字串型別(因為我們賦值了字串 "2021") 。 所以當後續 years = 2021; 要重新賦值數值時變報錯。 也就是等於 let years: string
SimonAllen