SegmentFault 思否技術週刊 Vol.76 — 破解 Javascript 玩法

Beverly發表於2023-01-03

本期技術週刊一起了解 Javascript,歡迎大家閱讀 ~

文章推薦

淺談 Javascript 閉包 // magnesium

閉包的概念是有很多版本,不同的地方對閉包的說法不一

維基百科:在電腦科學中,閉包(英語:Closure),又稱詞法閉包(Lexical Closure)或函式閉包(function closures),是在支援頭等函式的程式語言中實現詞法繫結的一種技術。

MDN: 閉包(closure)是一個函式以及其捆綁的周邊環境狀態(lexical environment詞法環境)的引用的組合。

個人理解:

  • 閉包是一個函式(返回一個函式)
  • 返回的函式儲存了對外變數引用

JS 如何返回非同步呼叫的結果? // 現實的理想技術

在 JS 中處理非同步呼叫的結果,最佳實踐就是“非同步轉同步”:使用 Promise + async/await 語法關鍵字。在這裡 async 總是與 await 成對出現,一個 async 函式總是返回一個 Promise,一個 await 關鍵字總是在嘗試“解開”一個 Promise,結局要麼等到有價值的資料,要麼非同步出現非同步,什麼也沒有等到。為了避免出現異常,影響主執行緒的正常執行,一般要用 catch 規避異常。

從 await-to-js 到 try-run-js // jump__jump

之前在做 code review 時候發現有同事使用 try catch 包裝了一堆非同步程式碼,於是個人就覺得很奇怪,難道不應該只 catch 可能出問題的程式碼嗎?同事告訴我說 try catch 太細的話會出現內外作用域不一致,需要提前宣告變數。

let res: Data[] = [];

try {
  res = await fetchData();
} catch (err) {
  // 錯誤操作或者終止
  // return
}

// 繼續執行正常邏輯

前端效能最佳化到底該怎麼做 // 熊的貓

效能指標,如下:

  • 首位元組達到時間(Time to First Byte,TTFB
  • 首次繪製(First Paint,FP
  • 首次內容繪製(First Contentful Paint,FCP
  • 首屏時間 / 最大內容繪製(Largest Contentful Paint, LCP
  • 累積佈局偏移(Cumulative Layout Shift, CLS)
  • 首次輸入延遲(First Input Delay, FID

關鍵資源越早到達客戶端,證明 TTFB 時間越短,而這也能間接的減少 FPFCP 的時間;對資源進行了壓縮處理意味著能夠儘可能提升 LCP 的時間;減少了頁面的 迴流/重繪 就能使得 CLS 的數值越小,檢視越趨於穩定;FID 是一個用於跟蹤瀏覽器對使用者輸入做出反應之前的延遲時間的指標,包括點選和敲擊,保證資源的快速載入和頁面儘早渲染,其對應的數值就越小,檢視響應就越快。

javaScript 進階之路 --- 《手寫 Promise(中篇)》 // FFF方

至此距離我們完成自己的 MyPromise 類已經成功了一大半!我相信透過消化這一篇的內容,你會收穫很多很多額外的知識。是不是有一種原來 Promise 不過如此的感覺~

其實有很多很多東西都是用很基本的函式,透過很巧妙的設計去完成一些看起來很複雜的邏輯。在下一章我們會迎來最後的幾個關鍵點,如:微任務的建立then 函式的鏈式呼叫,希望你能堅持下去。

Javascript 變數命名規範 // 一丁目

駝峰命名

首先,和其他語言一樣,大部分變數建議採用駝峰命名法。

var articleTitle = 'javascript變數命名規範' 

而對於常量,使用大寫字母和下劃線來組合命名。

const COUNTRY_NAME = 'China'

問答推薦


# SegmentFault 技術週刊 #

「技術週刊」是社群特別推出的技術內容系列,一週一主題。

每週二更新,歡迎「關注」。大家也可以在評論處留言自己感興趣的主題,推薦主題相關的優秀文章。

如有問題可以新增小姐姐微信~

image.png

相關文章