一個前端程式員的費曼技巧練習 来源:

費曼是美國著名物理學家，諾貝爾獎得主，是個非常聰明、正直而且好玩的家伙，他的自傳《別鬧了，費曼先生》我一口氣看完了，精彩程度不遜於一部小說。費曼提出了一種高效學習的方法，即“費曼技巧”，其核心思想是：每當學習一個新東西的時候，想象自己正試著把它介紹給一個對此一無所知的外行人，不使用任何專業術語；如果 ...

費曼是美國著名物理學家，諾貝爾獎得主，是個非常聰明、正直而且好玩的家伙，他的自傳《別鬧了，費曼先生》我一口氣看完了，精彩程度不遜於一部小說。費曼提出了一種高效學習的方法，即“費曼技巧”，其核心思想是：每當學習一個新東西的時候，想象自己正試著把它介紹給一個對此一無所知的外行人，不使用任何專業術語；如果能講清楚，說明你已經掌握了它本質，如果做不到，那就繼續學習。

即將成為一名Web前端工程師的我，試著用費曼方法來釐清我的工作內容和一些技術上的概念。

（我想象自己正在和麻麻對話，試圖讓她明白我的工作內容） 

Q1. 前端工程師是做什麼的？為什麼叫“前端”？

A1. 前端工程師的主要工作就是編寫代碼去控制瀏覽器的運行，包括你能看到的和看不到的：這裡有張圖，那裡有個按鈕，這是你看得到的部分；你點了“查詢”以後，瀏覽器暗地裡向伺服器發個消息，這是你看不到的部分（當然，拿到查詢結果後會顯示給你看的）。我們寫的代碼需要被瀏覽器下載到用戶的電腦里運行，而不像Java等語言的代碼運行在遙遠的伺服器上，所以從用戶視角看，我們寫的代碼離用戶更“近”，位於前端啦！

Q2. HTML是什麼？

A2. 我們上網時看到的花里胡哨的網頁，不是用筆畫出來的，而是用一種瀏覽器聽得懂的語言告訴它要顯示哪些內容，它再按照預定的規則顯示出來的，這種語言就是HTML，全稱是“超文本標記語言”。HTML描述了一個網頁內的所有元素，以及它們之間的關係。”超“字說明元素不僅僅是文本，還可以是別的比如圖片、音樂、視頻等。

Q3. CSS是什麼？

A3. HTML只是告訴了瀏覽器要顯示哪些東西，而沒有告訴它這些東西長什麼樣，如果直接顯示出這些東西最原始的樣子，那網路世界會醜得不堪入目。於是我們需要另一門語言來描述這些東西的樣子，比如大小、顏色等，這門語言就是CSS，全稱是“層疊樣式表”。打個比方：HTML建起一座毛坯房，CSS為房子搞裝修。

Q4. JavaScript又是什麼？

A4. 網頁的內容有了，樣子也好看了，但就這樣靜靜地顯示在那兒，會不會太單調了點？比如，可不可以在頁面上加點動畫，或者播放一首歌？好主意！於是就有了JavaScript，簡稱JS。這種編程語言可以動用瀏覽器更為複雜的功能，大致分為兩類：一是控制頁面上的元素和樣式，比如取消某些文字的加粗、彈出一個小視窗、或者開始播放音頻；二是與伺服器通信，即從伺服器獲取數據和向伺服器發送數據。舉個例子，你在使用網頁郵箱時，點一下“收件”按鈕，瀏覽器就會在相應的JS代碼的指揮下，向郵箱伺服器發個信息詢問“這位用戶有新郵件嗎？”，郵箱伺服器那邊收到信息後開始檢查，然後回覆“有啊”並且把新郵件發回來。

Q5. DOM、BOM分別是什麼？

A5. JS之所以能操縱瀏覽器的諸多高級功能，仰賴兩大功臣輔佐，即DOM（“文檔對象模型”）和BOM（“瀏覽器對象模型”），它們都是瀏覽器提供給程式員的“介面”，沒有它們，前端工程師什麼也幹不了。

很抱歉這裡不得不使用“介面”這一術語，但這個概念很容易理解。所謂介面，就是一種規範，符合這種規範的東西都具有它“應該”具有的功能。舉個例子，方向盤就是一個介面：首先，司機要想控制車輛的前進方向，必須通過方向盤；其次，每輛車的方向盤雖然外觀上有所差別，但它們實現的功能是一樣的——向左打時左轉，向右打時右轉，決不會反著來。

現在，JS就是司機，瀏覽器就是車，而DOM和BOM就是方向盤、油門、剎車。

詳細點說，DOM是控制頁面元素的介面，通過它，JS代碼可以編輯頁面元素，如取消某些文字的加粗、彈出一個小視窗、或者開始播放視頻；BOM是控制瀏覽器其他一些屬性的介面，通過它，JS代碼可以獲取瀏覽器型號、當前頁面地址、瀏覽記錄等信息，或者讓瀏覽器跳轉到指定頁面。

說了半天，介面在JS中到底怎麼用？很簡單，DOM規定了一個詞“document”，在別的編程語言中這隻是一個普通的字眼，但在JS里它是DOM的化身，寫出它就可以為所欲為了！BOM對應的詞是“window”。

Q6. AJAX是什麼？

A6. 這是一種網路技術，全稱是“非同步JavaScript和XML”（不必理會名字中的術語）。這種技術提供的功能是，瀏覽器在不“刷新”頁面的前提下，與伺服器實現網路通信。所謂刷新，就是瀏覽器把你正在看的網頁扔掉，重新從伺服器下載那個網頁。在互聯網的早期（1998年之前，真的很早），瀏覽器與伺服器之間的通信都是“給我一個網頁”“好的，這是你要的網頁”這種一板一眼的模式。後來人們想，為什麼不只下載必須的那一點數據，然後用JS略微修改原來的頁面呢？比如在收到新郵件後，在“收件箱”後面加個“（1）”，再把文字加粗，這比每次都把整個頁面重新下載一遍要省事得多。於是就有了AJAX。當然，現代瀏覽器都提供了使用AJAX技術的介面。

Q7. “類庫”和“框架”是常聽到的兩個概念，它們分別是什麼？有何區別？

A7. 打個比方，你手頭有一輛汽車的所有部件，你的任務是把它組裝成一輛完整的車。

類庫（如jQuery）就好比錘子、改錐等工具，有了它們，徒手很難做的事情（如擰螺絲）就變得很容易了，但你仍然需要自己想辦法把每個部件拼在一起。

而框架（如React, Vue）好比裝配流水線，蜿蜒的傳送帶兩側伸出長短不一的機械臂。你打開說明書，上面寫著：“依次把部件放在傳送帶上，位置A放上底盤，位置B放上發動機，位置C放上座椅……”你照做了。不一會兒，一輛嶄新的汽車被傳送帶緩緩送出。成功了！等等，但它究竟是怎麼做到的？似乎一時半會兒弄不懂這個複雜的系統！

於是區別很明顯了，類庫是你的趁手工具，而框架是一種快速、標準化打造Web應用的“大型工具”。只用類庫不用框架的是“手工藝人”，而使用框架的是“流水線工人”。如果只是做個小項目，用框架就顯得小題大做；而大型的工程，不用框架幾乎不可能順利開發出來。當然，框架遠遠沒有汽車裝配流水線那麼強大、死板，即使在目前這個框架滿天飛的時代，軟體開發仍然非常依賴程式員的“手藝”。

寫在最後的話

To不瞭解前端的朋友：以上回答是否有讓你弄不懂的地方？如果有，敬請指出~

To前端同仁：以上解讀是否存在明顯的錯誤？如果有，敬請斧正~

歡迎留言交流！

更多相關文章