綱舉目張👀

  • UI
  • DOM
  • React
  • Conclusion
  • Reference

UI

User Interface是現在前端工程主要面對的議題,這篇系列文談的UI以Web為主。網頁的架構由HTML組成,在靜態網站的應用上,通常由瀏覽器向某個伺服器發出一個請求(Request),而伺服器回以HTML的文檔,瀏覽器解析文檔後就將畫面呈現在使用者面前。
而隨著網頁應用的蓬勃發展,網站上的互動越來越多,使用者可以點讚留言,或是發射彈幕等等,不可能每個操作都向伺服器請求一個新的畫面,如果按個讚畫面就需要重整的話體驗就太差了點。
解決的方式就是當使用者作出某些操作後,透過JavaScrip直接改變畫面的結構或樣式,如果我在某篇貼文下的輸入筐內打下留言並送出,JavaScript就會幫我在該篇貼文上加上我的留言,而不需要重整畫面。
而JavaScript是如何操作網頁上的結構呢?就是透過DOM了!

DOM

在Web的世界裡,UI的問題,基本上就是DOM的問題。Document Object Model是一種介面,連接文檔和程式語言。而在Web的應用上文檔通常是HTML、SVG,程式語言就是JavaScript。HTML是一種樹狀結構的標籤式語言,也因此DOM會以樹狀的方式表達畫面的結構,並提供一些API讓JavaScript可以對DOM做操作,在瀏覽器上DOM tree就是document:

const paragraphs = document.getElementsByTagName("p");
// document就是瀏覽器上操作網頁內容的介面也就是DOM Tree。
// getElementsByTagName是DOM提供的API,用以取得網頁上所有的<p>tag。

瀏覽器上的DOM主要都是由JavaScript實作的,不同的瀏覽器有不同的實作方式,但可以確定的是瀏覽器會讓你可以透過JavaScript操作DOM,也就是說幾乎所有的瀏覽器都可以在畫面載入完成後透過document取得網頁的內容。

簡而言之,當我們要透過JavaScript改變UI時,必須要操作DOM。

React

而React這個UI library,主要就是要解決DOM的問題。當應用程式變得龐大後,直接操作DOM會變得複雜且難以維護,因此React提供了一種不同的方式來管理和維護UI。簡單來說呢,只要告訴React:“在某個狀態下,畫面要是什麼樣子” 然後React就會幫忙處理所有DOM的操作。至於如何處理呢?就是之後再寫了XD

Conclusion

做個簡單的總結:UI複雜,DOM難處理,React是一個處理DOM的UI library。

Reference

By the way

如果你看到了這裡,就順便讓我置入行銷一下 Podcast 節目【BitWise 一點智慧】吧!
【BitWise 一點智慧】主要是以輕鬆的角度,跟大家聊聊軟體開發、 設計、學習、以及一些生活分享。

用Apple收聽
用Spotify收聽
用Google收聽
官方網站

#UI #DOM #React







你可能感興趣的文章

JavaScript - Destructuring 解構

JavaScript - Destructuring 解構

CS50 Form

CS50 Form

第五期直播 week15 + 期中測驗檢討

第五期直播 week15 + 期中測驗檢討






留言討論