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

来源:http://www.cnblogs.com/leegent/archive/2017/05/21/6886688.html
-Advertisement-
Play Games

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


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

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

 

歡迎留言交流!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 三個月就這麼悄悄溜走了,本K對於前端雖然有了一定的認識,但對一些方面還是處於一種比較萌幣的狀態,就在這種萌幣狀態下,本K又跟著大神浩開始了後臺語言—PHP語言的學習。PHP的學習對於學過其他語言的人來說,是非常easy的(原因後續會提及),K在初次接觸的時候也就僅僅是對一些PHP的寫法有點膈應而已. ...
  • 時間複雜度上,紅黑樹在平均情況下插入,查找以及刪除上都達到了lgN的時間複雜度。 那麼有沒有查找效率更高的數據結構呢,答案就是本文接下來要介紹了散列表,也叫哈希表(Hash Table) 什麼是哈希表 哈希表就是一種以 鍵-值(key-indexed) 存儲數據的結構,我們只要輸入待查找的值即key ...
  • 設計模式一--單例設計模式 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 一、定義 Singleton Pattern: 確保一個類只有一個實例,並且自行實例化並向整個系統提供這個實例。 二、分類 餓漢式單例類:類載入時就進行對象的實例化 懶漢式單例類:第一次引用類時,才進行對象的實例化。 ...
  • ES6新語法於2015年發佈;而我這個前端小白在17年才接觸到。慚愧慚愧!!不過到目前為止,似乎只有FireFox和Chrome對ES6的支持相對良好。不過既然人家ES6已經出來了,還是要跟上技術的潮流。 ES6給我的感覺就是讓js越來越靠近傳統的編程語言,如java;比如裡面的面向對象的思想和語法 ...
  • 滑鼠事件是Web 開發中最常用的一類事件,畢竟滑鼠還是最主要的定位設備。DOM3 級事件中定義了9 個滑鼠事件,簡介如下。 click:在用戶單擊主滑鼠按鈕(一般是左邊的按鈕)或者按下回車鍵時觸發。這一點對確保易訪問性很重要,意味著onclick 事件處理程式既可以通過鍵盤也可以通過滑鼠執行。 db ...
  • 接下來幾個篇章,都會解讀 zepto 中的跟 相關的方法,也即源碼 對象中的方法。 讀Zepto源碼系列文章已經放到了github上,歡迎star: "reading zepto" 源碼版本 本文閱讀的源碼為 "zepto1.2.0" .forEach() 因為 zepto 的 集合是類數組,所以這 ...
  • 一、常用實體(字元轉義) '&lt;' == '<' '&copy;' == '©' '&gt;' == '>' '&quot;' == '"' '&nbsp;' == ' ' '&reg;' == '®' '&amp;&' == '&' '&t ...
  • //d3.scan /* 新的d3.scan方法對數組進行線性掃描,並根據指定的比較函數返回至少一個元素的索引。 這個方法有點類似於d3.min和d3.max。 而d3.scan可以得到極值的索引而不僅僅是計算極值。 */ var a1 = [1,3,5,2,9]; var i = d3.scan(... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...