一些簡單通俗的前端領(lǐng)域相關(guān)名詞解釋，幫助各位想學(xué)前端的同學(xué)盡快入門。
什么是前端？
什么是前端？端是一個什么概念？前端和前臺有什么區(qū)別，下面就給你一一道來。
既然有前端這個名詞，那么先來了解一下什么是端。再來區(qū)別什么是前端什么是后端。端在這里可以認(rèn)為是終端，面向普通用戶用的東西就是客戶端 (client)，舉例來說你所用的微信、支付寶、瀏覽器都可以稱之為客戶端(Client)。大概率情況下客戶端是由前端開發(fā)工程師開發(fā)出的。而后端中的端，則指的是服務(wù)器端 (server)。通常后端開發(fā)工程師負(fù)責(zé)對服務(wù)器端的開發(fā)。
所以既然想要了解前端、后端的區(qū)別，本質(zhì)上還是需要了解客戶端和服務(wù)器端的區(qū)別。我們將以微信朋友圈為例來做一些舉例：
這是一張你熟悉的不能再熟悉的微信朋友圈界面，你可以在朋友圈里做大概這么幾件事情：
1. 發(fā)自拍帶一張圖或者不帶。
2. 刷朋友圈，不斷地刷下去，遇到感興趣的就點贊或者評論。
3. 初次之外你還可以點開圖片查看大圖，或是點擊某個人的頭像去這個人的主頁看看。
那么請思考以下幾個問題：
1. 你發(fā)的圖片假設(shè)是 2M 一張，這張圖片上傳到哪里去了？為什么你的朋友們都可以看到這張圖片？
2. 你的朋友圈和別人的朋友圈顯然是不一樣的對吧，為什么是不一樣的？
3. 為什么圖片上就可以點擊查看大圖，文字上不能點擊查看大文字呢？頁面中哪些部分是可以點擊的？（其他人的頭像、名字、地址、圖片）點擊之后會發(fā)生什么？（點擊評論按鈕為什么會彈出一個框可以顯示贊和評論？）
思考幾分鐘上面的這三個問題，然后繼續(xù)往下看。
一分鐘
兩分鐘
三分鐘
...
是時候揭曉答案了。
第一個問題，你的圖片上傳到哪里去了？別人為什么能看到這個圖片
你的圖片被上傳到了下面的這種地方，我們稱之為服務(wù)器上（現(xiàn)在也流行叫云端）
這地方看著很酷炫，很像電影中的場景對吧。其實生活中我們已經(jīng)離不開這樣的地方了，這就是服務(wù)器機房。而服務(wù)器是什么東西呢？就是提供某種服務(wù)的電腦。從宏觀上來說上圖的服務(wù)器和我們自己用的個人電腦沒太大差別，都是有 CPU、內(nèi)存條硬盤之類的東西組成的。但微觀上來說因為服務(wù)器的領(lǐng)域?qū)Ｓ眯再|(zhì)設(shè)計上和我們的家庭電腦區(qū)別也很大。服務(wù)器效率更高，省去了我們所用不到的比如聽歌玩游戲這樣的功能。那么我們自己的電腦能做服務(wù)器嗎？是可以的，只要你也提供某種服務(wù)即可。這里的服務(wù)可以是：提供數(shù)據(jù)庫服務(wù)、提供文件存放服務(wù)、或是計算服務(wù)等等。
那么別人為什么能看到你的圖片呢？這里就牽扯到一個賬戶的概念了。
我相信每個人都去過銀行，存過錢。當(dāng)你去銀行辦了一張銀行卡的時候，銀行會用你提供的身份證信息辦理一張屬于你自己的卡，并且讓你設(shè)置一個密碼。而你所提交的這些個人信息、密碼等都被存儲了起來。我們稱這些個人信息（名字、出生年月、密碼）等為數(shù)據(jù)，這些數(shù)據(jù)怎么放呢？記到本本上嗎？那一場大火所有人賬戶沒了也不知道錢是誰的了。所以這些數(shù)據(jù)存放的地方我們稱之為數(shù)據(jù)庫(data base)。
數(shù)據(jù)庫這種東西其實也沒有什么神秘的地方，就是存放數(shù)據(jù)的倉庫而已。我相信大多數(shù)人都接觸過 Excel 表格，實際上 Excel 表格也可以稱之為一種數(shù)據(jù)庫，它可以存放大量的數(shù)據(jù)并且你可以寫一些自動計算的功能。所以說數(shù)據(jù)庫和你用到的 Excel 是很相似的。
Excel 我們也稱之為表格，上圖的表格中有兩個概念一個是行(row)一個是列(column)。左邊是數(shù)字的，水平方向上的一欄就是行，行是以數(shù)字(1, 2, 3, 4)來標(biāo)記的。而列是垂直方向上的一欄，以字母為標(biāo)識的(A, B, C, D)。我們的第一行稱之為表頭，第一行的第一列（A1）的位置寫著字母 (EMP NO)，意思是說這一列記錄的是關(guān)于 EMP NO 的信息，雖然我也不知道 EMP NO 代表了什么。但是第二列我們知道是用來存儲姓名的。第三列是用來存儲年薪的。而第四列是用來存儲獎金的。這樣的設(shè)計能夠讓我們清晰直觀的看到我們的數(shù)據(jù)并對之進行管理。而數(shù)據(jù)庫也正是類似于這樣的東西，區(qū)別是 Excel 更加簡單直觀，而數(shù)據(jù)庫更加專業(yè)化當(dāng)然功能也更多。
所以你的朋友為什么能看到你的照片？
當(dāng)你選擇了手機里的一張圖片上傳到朋友圈的時候，你可以想象微信會在自己的數(shù)據(jù)庫中插入一行新的信息，就像上面的截圖一樣。為了說明問題這里只是做一些假設(shè)，我們來看一下這張表格都有哪些列，或者更專業(yè)一點都有哪些字段（field）。第一列是 id，大家上傳到微信的圖片太多了，所以需要用一個數(shù)字來表示一下。我相信理解這個應(yīng)該是沒有什么問題的。你上傳在數(shù)字世界的每張圖片、每句話都會有一個對應(yīng)的 id 來區(qū)分。而第二行記錄的圖片的地址，方便別人去直接看到這個圖片。第三列顯示了圖片的上傳時間，這些數(shù)字是一種表示時間的方法，我們稱之為時間戳(unix timestamp)。而第四列存放著一個用戶 id，表明這是哪個用戶上傳的圖片。最后一列則是這張圖片你所配的文字。有了上面的信息之后，當(dāng)別人再刷新朋友圈的時候會根據(jù)下面的方法來顯示新的圖片。
下拉屏幕刷新朋友圈 -> 微信到服務(wù)器去查詢最新的信息 -> 找到所有的朋友列表 (567556756就是你) -> 找到所有朋友新發(fā)的圖片 -> 可能有幾張新的圖片 -> 按照時間排序返回數(shù)據(jù) -> 微信軟件根據(jù)返回的數(shù)據(jù)顯示新的朋友圈。（這只是一個舉例，實際情況可能相差非常多）
而返回的數(shù)據(jù)可能長這個樣子：
看到了嗎，是不是和我們在 Excel 中記錄的數(shù)據(jù)一樣只是表達數(shù)據(jù)的方式從一個軟件里變成了一些文字？對于你的數(shù)據(jù)應(yīng)該有哪些列，它們分別表達著什么意思以及互相之間的聯(lián)系我們稱之為數(shù)據(jù)結(jié)構(gòu)。如果你要開發(fā)一個軟件那么你需要去考慮你的軟件中有哪些數(shù)據(jù)，是否要使用數(shù)據(jù)庫，數(shù)據(jù)的字段是怎樣的，有幾個數(shù)據(jù)表。
相信到此為止你已經(jīng)能理解什么是數(shù)據(jù)、什么是數(shù)據(jù)庫、數(shù)據(jù)庫存放的地方就是微信的服務(wù)器。在這個例子中服務(wù)器給我們提供的功能有上傳圖片以及數(shù)據(jù)庫的功能。
沒有數(shù)據(jù)庫，你的微信將不知道你有哪些朋友，以及你的朋友什么時候上傳了圖片，你的朋友圈也將不復(fù)存在。
如果上面理解的差不多了，那我們再來看看第二個問題：
?你的朋友圈和別人的朋友圈顯然是不一樣的對吧，為什么是不一樣的？
簡單來說在數(shù)據(jù)庫中，你和你朋友的 user_id 是不一樣的，所以微信在查詢這個人的所有朋友時，這些朋友列表是不一樣的。再進一步查詢朋友們上傳的圖片時，當(dāng)然結(jié)果也是不一樣的。這一切都要歸功于數(shù)據(jù)庫這樣一個神奇負(fù)責(zé)的東西。
來回到第三個問題：
為什么圖片上就可以點擊查看大圖，文字上不能點擊查看大文字呢？頁面中哪些部分是可以點擊的？（其他人的頭像、名字、地址、圖片）點擊之后會發(fā)生什么？（點擊評論按鈕為什么會彈出一個框可以顯示贊和評論？）
一個軟件是有不同的很多功能的，而這些功能用戶需要怎么使用其實是一個人和軟件、機器打交道的一個問題。專業(yè)名詞稱之為交互設(shè)計(interaction design)。交互設(shè)計就是有這么一群有人性的設(shè)計師，幫你設(shè)計出簡單、易用的交互流程。讓你在使用軟件的時候更舒服（或是讓你看到的廣告更多，公司賺的錢更多）。所以總結(jié)來說流程如下：
上傳圖片這樣一個功能需求 -> 交互設(shè)計師初步設(shè)計流程（點擊右上角開始選擇圖片，選好了開始上傳然后讓用戶輸入一段文字）-> 軟件界面設(shè)計師（UI）來決定這個界面具體長什么樣子，圖標(biāo)應(yīng)該是什么樣子最終的產(chǎn)出是一張用戶界面的圖片 -> 前端工程師/客戶端開發(fā)工程師（收到圖片，負(fù)責(zé)把圖片用代碼的形式描述出來，最終生成用戶可以點擊的軟件）
看起來經(jīng)過前端工程師的手之后你的軟件就已經(jīng)實現(xiàn)了，但其實不然。這個軟件的功能、用戶怎么上傳圖片這樣的交互完成之后還有一個非常重要的步驟就是我們需要把數(shù)據(jù)發(fā)送回服務(wù)器。同樣我們需要處理當(dāng)用戶下拉屏幕去服務(wù)器主動獲取數(shù)據(jù)這樣的操作。一個有功能的界面加上和服務(wù)器的交互之后，一個活的軟件才誕生了。相信你已經(jīng)明白前端工程師是做什么的了，但是后端工程師做什么呢？通常來說數(shù)據(jù)庫應(yīng)該怎樣設(shè)計，前端工程師要發(fā)送到服務(wù)器的什么位置才能正確的更新數(shù)據(jù)這些都是后端工程師所需要考慮的。簡單來說前端工程師之所以叫前端是因為離用戶更近，負(fù)責(zé)給用戶提供界面交互。而后端相對來說用戶不容易感知，甚至很多人不能理解數(shù)據(jù)的存在，數(shù)據(jù)這種東西就像水和空氣一樣自然而然的存在于軟件之中。所以這也是后字的來源。
現(xiàn)在你可能已經(jīng)略微有了一些概念了，這些概念分別是
data 數(shù)據(jù)：軟件交互所產(chǎn)生的需要被記錄的信息
field 字段：數(shù)據(jù)的名稱
database 數(shù)據(jù)庫：存放數(shù)據(jù)的一種軟件（數(shù)據(jù)庫自己也是一種軟件）
server 服務(wù)器：提供某種服務(wù)的專業(yè)電腦，當(dāng)然個人電腦也是可以做為臨時服務(wù)器用的
interaction design 交互設(shè)計：用戶和軟件直接應(yīng)該怎樣溝通？點擊按鈕還是滑動屏幕？點擊哪里？出錯了怎么處理？
user interface 用戶界面：基于交互設(shè)計之后的真實軟件界面設(shè)計圖，基本上和你用的軟件高度相似了。
Front-End 前端：在用戶界面設(shè)計圖確定之后，根據(jù)不同的目標(biāo)環(huán)境（Android/IOS/瀏覽器/windows/Mac OS）進行對應(yīng)的軟件實現(xiàn)。而通常我們所說的前端開發(fā)是指開發(fā)工作在瀏覽器上的網(wǎng)頁，而對應(yīng)的移動開發(fā)工程師則是開發(fā)工作在手機上的軟件。這兩者都是編寫面向用戶的軟件的，所學(xué)習(xí)的只是以及工作流程也是非常相似的，因此我們可以統(tǒng)稱為客戶端開發(fā)工程師。
Client Side 客戶端：簡單來說是用戶手中的軟件，嚴(yán)謹(jǐn)?shù)卣f是消費服務(wù)器提供的服務(wù)的軟件。
Back-End 后端：負(fù)責(zé)提供數(shù)據(jù)的接口，以及設(shè)計數(shù)據(jù)結(jié)構(gòu)，當(dāng)然也負(fù)責(zé)實現(xiàn)一部分業(yè)務(wù)邏輯。比如你再支付寶里集齊五福就能開獎，那前端只負(fù)責(zé)給你顯示你集齊了哪幾個福，這些福字能不能開獎還是后端決定的。又或者說支付寶里的余額，這是一種數(shù)據(jù)，前端只關(guān)心余額應(yīng)該以什么字體、多大、顏色是什么、怎么對齊。而具體是多少數(shù)字這些是由后端工程師幫你查詢計算得出的。
unix timestamp：時間戳 一種記錄時間的方式。具體來說是指從 +0 時區(qū)(格林尼治時間) 的1970年1月1日0時0分0秒起至現(xiàn)在的總秒數(shù)，timestamp 60 則表示了1970年1月1日0時1分0秒這個地球上唯一的時間。（時間這種東西究竟是不是唯一的請參考霍金的時間簡史）
了解了概念之后，下一步可以繼續(xù)向下一個領(lǐng)域了解，就像打怪升級一樣。如果你想了解前端工程師具體所需要做的事情，下面給上一個學(xué)習(xí)路線圖僅供參考。
https://github.com/qiu-deqing/FE-learning
最后，附上一個你看了可能會懵逼其實我也懵逼的可能已經(jīng)過時的一張圖。要學(xué)習(xí)的東西還有很多，加油。
