寫在 2018 時,前端三國鼎立的時代,選擇陣營前,一起重新好好了解 Web World 如何運作

Whien_Liou
Sep 7, 2018 · 12 min read

2018 前端好比「魏」「蜀」「吳」的三國鼎立時期,一進入前端的世界時,大家就問會「A、R、V」?還是該選擇哪個陣營?Wait, Wait .. Stop!

冷靜

好的,冷靜一會,希望你真的冷靜了,那就看看這篇文章想要傳達的事情。

思考

其實小弟本人歷史很差,「魏」「蜀」「吳」三國鼎立時代大概就一個印象而已,但說起這時代,我們總要去理解為什麼會有三國鼎立出現,但這裡不教歷史,也不傳教,但要開始思考一切的根本。

暫時拋棄

開始讀這文章時,先將腦袋裡對於「HTML 畫面」的這個部分暫時拋棄掉,會更好理解。

思維

接下來,我們的思維不是在畫面,而是在「物件」,如何用物件操控畫面,而不是畫面操控物件。

走入「網」頁世界(Web World)

前面提到的「不教、不傳教」,想像我們現在正在操控著「Web」這樣的一個抽象世界,怎麼產生一個「Web」世界。

Web 這個詞在 google 翻譯上可以查到類似「網」、「蜘蛛網」的概念解釋,如何形成「網」?就是透過「線」與「線」之間的連結所產生,因此「網」路的概念就此產生,而我們所做的畫面就是「網」頁。

產生「網」頁(Web Page)

一頁網頁的產生,就好比是一份文件,可以想像有著現實一張 A4 紙,上面什麼都沒有時,這張 A4 紙就是一份空白的「紙」文件。

文件是個抽象的詞(廣義指組織或個人為處理事務而製作的有訊息記錄的各種材料)

連接到網頁上的概念就是一份空白的「網頁」文件,也就是這是一份「關於網頁的訊息記錄」。

於是聰明的大家就開始在一份網頁文件上小心翼翼的記錄上各式各樣的筆記,就像在 A4 紙上塗鴉一樣,但這些塗鴉都是有意義的。

賦予意義

如果在 A4 紙上畫了一個O,我們就會說這是個「圓形」,當然也可以認為它是「方形」,這沒有對錯,只是在於哪個「環境」之下的一個共識,不然有人認為是「圓形」,有人認為是「方形」,那就不太妥了,很難溝通的!

於是網頁也是這樣的,訂定了共同的「標籤」來告訴大家,這是什麼?

定義 Web World 標準

紙張用的標籤可能是「公釐」這個單位,網頁用的是「<>」這個單位,因此標準下會這樣定義

「210×297」是張 A4 紙

「<html></html>」這是份網頁

於是在這份文件上記錄

<html>
</html>

好的,現在全世界的人都知道這份文件就是「網」頁了,很棒的開始!

接下來集合全世界的力量,大家紛紛開始討論與規劃每個內容的標準,就此發展出了各種可被識別的「標籤」。

<head>, <title>, <body>, <p>

然後告訴大家,記得 <html> 裡面要有「頭」有「尾」,並且有些標籤的裡面只可以加入「限制」的標籤,這樣我們才看得懂,不然 <head> 裡面也有 <body> 裡面也有,我到底要識別哪一個,會造成困擾的!

於是就變成這樣

<html>
<head>
<title>Document</title>
</head>
<body>
Hello Web World
</body>
</html>

講到這,有些人想關掉了是吧!

「也太基礎了吧?」

等等,先聽我說,我不是有說先拋棄「HTML 畫面」的想像嗎?肯定是開始在想畫面了吧?求求你繼續聽我說~~~

開始解析

好的!我們做好了規格了,但這份就這樣拿給「人類」看,我們雖然是看得懂啦,但好像只能靠「想像」吧?

於是瀏覽器該出場了

聰明的瀏覽器,可以將這份文件做一次性閱讀後,將結果告訴我們,但我們還是一樣,拋棄「HTML 畫面」繼續往下看。

閱讀「網」頁文件

從 Parse HTML 開始,我們可以看到聰明的瀏覽器已經在閱讀我們的「文件」,閱讀過程中會開始將預期出現的內容開始計算,然後準備畫出來。

延伸到後面綠色的部分,就是開始繪製,分成了 Paint 與 Composite

  • Paint 繪製階段
  • Composite 計算繪製時的圖層關係

最後我們會看到

好的,我們完成了對於「網」頁的第一個認知。

瀏覽器可以從我們給予的標籤,得知需要輸出什麼樣的內容。

自訂標籤(Custom DOM)

這樣我懂了,所以我們可以自訂標籤對不對?

沒錯!有了這句,代表已經清楚知道了 Web 的世界運作模式,於是我們嘗試一下。

真開心,能成功製作出自己的「標籤」了!

但…可惜的是,這個 <my-custom> 標籤因為並沒有被世界所承認,因此只能是一個自己自 high 的東西,有如「..$.」一樣(開玩笑

單調、無色、無味

當這個世界都只能依照一個「一模一樣」的內容來時,就會變得很單調、很無聊,為了改善這樣的狀況。

因此 JavaScript 該出場了。

是的,沒錯 <script> 標籤,就是我們現在所知的 JavaScript 語言,這其實也只是一個普通的標籤,只是不同於是有被「規範」過的標籤,網頁世界是這麼樣跟我說的

HTML:「好的,我看到了這標籤是 script,我將準備另一項工具,來解析這內容該怎麼運作」

<script> 也只是一個標籤,內容就是 Hello Web World,你說這段程式碼有錯?

不,這對於 Web World 來說,絕對是正確的!

那為什麼會認為錯呢?那是因為已經知道 <script> 是一份 JavaScript 語言的前提下,但這對於網頁來說,並不知道,只知道要拿另一項工具來分析它。

重頭戲 JavaScript Engine 該出場了

JavaScript Engine

JavaScript Engine 翻譯為 JavaScript 引擎,是一項能夠幫助網頁將 <script> 內文做分析且翻譯的一個工具。

在不同的瀏覽器(創造 Web World 世界)的工具中都帶有 JavaScript Engine 來為 <script> 標籤做分析。

目前較著名的就是 Google 推出的 V8 JavaScript Engine

只要遇到這樣的標籤,就會將內容丟給 JavaScript Engine 來處理

<script>
Hello, JavaScript Engine I'm come from web world
</script>

將這內容「Hello, JavaScript Engine I’m come from web world」丟進引擎中只會發生錯誤,為什麼呢?因為在 JavaScript Engine 中,又是另一個世界,這個世界只「規範」了自己的東西。

定義 JavaScript 標準

Boom!直接跳過定義,這就像是在寫共同認知的東西,有興趣可以到 ECMAScript 去觀看~

JavaScript World

JavaScript 具備著改變 Web World 的能力,有點像世界的操縱者(GM)的概念,它可以針對每個玩家給予特定的名稱,然後將它抓取出來,做能力的改動,所以任何 Web World 標籤在 JavaScript World 中都是一個特定的玩家。

每一個玩家都是一個實體,就此 JavaScript World 定義了非常多的實體構造,也就是「物件」。

JavaScript Engine 發功

當 Web World 擁有 <script> 時,就會發生以下事情

發現了嗎?

多了一個 Evaluate Script

從這裡開始,就進入了「JavaScript World」

兩個世界

一個 Web World

<body>
<div id='player1'>Yeee</div>
</body>

一個 JavaScript World GM 所看到的 player1

當我們使用 GM 模式時,JavaScript Engine 就會將「特定」玩家轉換成一個可被閱讀的物件,因此 GM 可以透過此份物件,再次告訴 Web World 該怎麼改變世界。

被轉換後這有幾個重要的關鍵內容

  • innerHTML, innerText, nodeName, nodeType

這內容就是 JavaScript Engine 來認知此「標籤」是做什麼用的,應該配置哪些功能與能夠改變哪些狀態。

<script> 也是個標籤,也能被控制嗎?

當然沒問題,既然是個 Web World 中的標籤,肯定就能被獲取,但這單純只是獲取了標籤,卻無法改變已經正在 Web World 運作的世界了。

試圖移除 Script World

企圖刪除 <script> 標籤

查看一下 Web World

是不是不見了?那 JavaScript World 停止運作了嗎?

結論是,並沒有!

所以如果我們想改變某一個 Web World 中的一個玩家內容,就可以這麼做

看一下 Web World

所以這玩家現在的物件是?

注意在 textContent 發生變化了,現在是 Hee Hee..,因此這份文件丟給 Web World 後,就會知道 player1 應該改為是 Hee Hee.. 內容,而要改掉原本的 Yeee。

觀察變化

程式碼

Console log 觀察變化

Web World

<div id='player1'>Hee Hee..</div>

延伸思考

因此,如果是一個 input type checkbox 的 Web World 標籤,當 Web World 看到以下

<input checked type='checked' />

就會有一個打勾的畫面

如果要將它變成不是打勾,就是在 JavaScript World 中告知

<script id='js'>
document.getElementById('check').checked = false;
</script>

理解到什麼事情了嗎?其實就是一個 input 玩家 type 為 checkbox 的物件中,有一個 checked 項目,然後我們將它變成 false 以後,再送回 Web World 去做改變,按鈕就會是「視覺」上的未打勾了。

Simulate 模擬操作

也就是說,如何操控 Web World 都是透過物件改變狀態來操作的,也因此我們可以透過「模擬」也稱「Simulate」來達到畫面變化

所以這就是為什麼在 input 的 type text 類型使用 autofocus 或我們就能在畫面上看到自動選取

<input type='text' autofocus />

因為 Web World 有規範好,如果一個 input type 是 text,只要加上 autofocus,那我們就把它自動選取!!

而在 JavaScript World 其實是這樣子

說在最後

再打下去這篇文章會有點長了,先在這裡中斷一下,因此可以得知任何的 JavaScript Engine 被分析的 Web World 東西,都會變成一個「可控制的物件」,只要我們改變了這份物件的內容,就會再送到 Web World 中做改變。

如果要做對於 DOM 的測試時,就是必須要先了解這些事情是怎麼發生的,那帶回標題,現在的框架都是為了解決 DOM 上操作的問題,但如果能更理解原本的 Web 是如何運作的,相信會對於在使用 JavaScript 時更得心應手,接著就會開始理解這些框架為什麼誕生,為什麼都用一個 Component 元件來代表一個元素,其實就是在當 GM 操控著這個世界,但原本的控制能力不足以解決現在問題,因此框架帶入了充分的操作,讓我們可以擁有更強大的能力來操作 Web World。

因此問自己並思考一個問題拋棄畫面後,能夠繼續改寫 Web World 嗎?

我是懷恩,目前是一位 YOSGO 的核心開發,在一個我熱愛的新創團隊活躍著,是個全職的全端開發者,我熱愛開發與分享「前端專注在瀏覽器的相關開發、效能與互動體驗」
「後端專注在網頁伺服器的效能調適與架構的配置」
「對於網頁技術有著熱衷,隨時跟在新技術的旁邊」
如果您覺得文章有幫助到您,請不吝嗇給我一個手掌
讓我們做一個「Give me five」然後就繼續一起往更美好的開發大道前進吧
如果您有任何問題,歡迎與我聯繫,我也時常在自己 FB 上開直播做紀錄
Github: https://github.com/madeinfree
FB:https://www.facebook.com/haowei.liou
Email: sal95610@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade