費曼是美國著名物理學家,諾貝爾獎得主,是個非常聰明、正直而且好玩的家伙,他的自傳《別鬧了,費曼先生》我一口氣看完了,精彩程度不遜於一部小說。費曼提出了一種高效學習的方法,即“費曼技巧”,其核心思想是:每當學習一個新東西的時候,想象自己正試著把它介紹給一個對此一無所知的外行人,不使用任何專業術語;如果 ...
費曼是美國著名物理學家,諾貝爾獎得主,是個非常聰明、正直而且好玩的家伙,他的自傳《別鬧了,費曼先生》我一口氣看完了,精彩程度不遜於一部小說。費曼提出了一種高效學習的方法,即“費曼技巧”,其核心思想是:每當學習一個新東西的時候,想象自己正試著把它介紹給一個對此一無所知的外行人,不使用任何專業術語;如果能講清楚,說明你已經掌握了它本質,如果做不到,那就繼續學習。
即將成為一名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前端同仁:以上解讀是否存在明顯的錯誤?如果有,敬請斧正~
歡迎留言交流!