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

即將成為一名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前端同仁：以上解讀是否存在明顯的錯誤？如果有，敬請斧正~

?

歡迎留言交流！

轉載于:https://www.cnblogs.com/leegent/p/6886688.html

總結

以上是生活随笔為你收集整理的一个前端程序员的费曼技巧练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。