前端是什么？通俗的來(lái)說(shuō)前端就是運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶(hù)層瀏覽的網(wǎng)頁(yè)。前端技術(shù)也分為前端設(shè)計(jì)和前端開(kāi)發(fā)，前端設(shè)計(jì)顧名思義就是網(wǎng)頁(yè)的UI視覺(jué)設(shè)計(jì)，簡(jiǎn)潔美觀的UI設(shè)計(jì)會(huì)給用戶(hù)帶來(lái)更佳的使用體驗(yàn)，而前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)。前端技術(shù)發(fā)展日新月異，更新迭代的速度很快且種類(lèi)繁雜，本文將對(duì)前端開(kāi)發(fā)基礎(chǔ)知識(shí)作一個(gè)簡(jiǎn)單梳理介紹，通過(guò)MindMaster思維導(dǎo)圖幫系統(tǒng)梳理前端知識(shí)框架。
一、開(kāi)發(fā)語(yǔ)言
前端開(kāi)發(fā)的三大核心技術(shù)：JavaScript、HTML、CSS，這也是每一個(gè)前端工程師所需掌握的基本功。
1、JavaScript
雖說(shuō)JavaScript名字開(kāi)頭帶有Java，但與Java實(shí)際上并沒(méi)有什么聯(lián)系，就像雷峰塔與雷鋒一樣，毫無(wú)關(guān)系。JavaScript由LiveScript發(fā)展而來(lái)，是一種面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型的客戶(hù)端腳本語(yǔ)言，區(qū)分大小寫(xiě)。ECMAScript是JavaScript的正式名稱(chēng)。而ECMAScript5和ECMAScript6都是JavaScript語(yǔ)言的國(guó)際標(biāo)準(zhǔn)。ECMAScript6在ECMAScript5的基礎(chǔ)上增添了例如模塊和類(lèi)等許多必要的特性以及一些實(shí)用特性，具體知識(shí)梳理詳見(jiàn)圖一圖二。
圖 1 ECMAScript5
圖 2ECMAScript6
BOM即瀏覽器對(duì)象模型，沒(méi)有相關(guān)標(biāo)準(zhǔn)，因此不同的瀏覽器實(shí)現(xiàn)同一功能可用過(guò)不同的實(shí)現(xiàn)方式。BOM與瀏覽器聯(lián)系密切，瀏覽器很多東西，例如打開(kāi)窗口、打開(kāi)選項(xiàng)卡、關(guān)閉頁(yè)面、收藏夾等都可以通過(guò)JavaScript控制。
DOM即文檔對(duì)象模型，執(zhí)行W3C標(biāo)準(zhǔn)。DOM與文檔有關(guān)而與瀏覽器無(wú)關(guān)，關(guān)注的是網(wǎng)頁(yè)本身的內(nèi)容，所以相關(guān)標(biāo)準(zhǔn)也比較好制定。
BOM和DOM的相關(guān)知識(shí)梳理詳見(jiàn)圖3。
圖 3 DOM、BOM
2、HTML
HTML是一種超文本標(biāo)記語(yǔ)言而并非編程語(yǔ)言，是建立網(wǎng)頁(yè)的基礎(chǔ)。HTML包括一系列的標(biāo)簽，通過(guò)這些標(biāo)簽將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，把分散的互聯(lián)網(wǎng)資源連接成一個(gè)整體，因此HTML在前端里就相當(dāng)于骨骼框架，將大量的網(wǎng)頁(yè)數(shù)據(jù)信息格式化展示。
圖 4 HTML
3、CSS
如果說(shuō)HTML是網(wǎng)頁(yè)的骨架，那CSS就是網(wǎng)頁(yè)的血肉，決定了網(wǎng)頁(yè)元素的展現(xiàn)形式，將單調(diào)的HTML寫(xiě)成的網(wǎng)頁(yè)修飾的更加美觀。
圖 5 CSS
4、NodeJS
Node.JS是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境，這是NodeJS官網(wǎng)上的一段描述。開(kāi)發(fā)框架解決代碼組織問(wèn)題，但最終還是需要對(duì)代碼進(jìn)行打包編譯處理，而各種前端構(gòu)建工具和模塊化開(kāi)發(fā)的工具都是基于NodeJS運(yùn)行的，所以學(xué)習(xí)NodeJS對(duì)一個(gè)前端工程師來(lái)說(shuō)也是很有必要的。
圖 6 NodeJS
二、數(shù)據(jù)結(jié)構(gòu)及算法
雖然僅是做前端的話，并不需要對(duì)數(shù)據(jù)結(jié)構(gòu)和算法十分精通，但是掌握數(shù)據(jù)結(jié)構(gòu)及算法能在一定程度上提高一個(gè)前端工程師的上限。以下圖中的思維導(dǎo)圖梳理了一些數(shù)據(jù)結(jié)構(gòu)及算法中的一些基礎(chǔ)內(nèi)容。
圖7數(shù)據(jù)結(jié)構(gòu)與算法
三、前端框架
市面上的前端框架很多，各種各樣的前端框架參差不齊，學(xué)習(xí)前端框架可以加快前端開(kāi)發(fā)速度，節(jié)約時(shí)間成本。以下是幾個(gè)常見(jiàn)的前端框架。
圖 8 前端框架
四、瀏覽器
瀏覽器即可以顯示網(wǎng)頁(yè)服務(wù)器或文件系統(tǒng)的HTML文件內(nèi)容并與用戶(hù)進(jìn)行交互的軟件，我們所做的網(wǎng)頁(yè)也是在瀏覽器上運(yùn)行。作為一名網(wǎng)絡(luò)開(kāi)發(fā)人員，學(xué)習(xí)了解瀏覽器的內(nèi)部工作原理將幫助我們做出更加明智的決策。
圖 9 瀏覽器
五、網(wǎng)絡(luò)
網(wǎng)絡(luò)這部分的知識(shí)包括網(wǎng)絡(luò)協(xié)議、資源請(qǐng)求過(guò)程及手段和七層網(wǎng)絡(luò)結(jié)構(gòu)。知識(shí)梳理詳見(jiàn)圖10。七層網(wǎng)絡(luò)結(jié)構(gòu)包括應(yīng)用層、表示層、會(huì)話層、傳輸層、網(wǎng)絡(luò)層、鏈路層以及物理層。
圖 10 網(wǎng)絡(luò)
六、打包工具
打包工具是一種將前端代碼進(jìn)行轉(zhuǎn)換、壓縮、合并等操作的工具。目前主流的打包工具有g(shù)runt，gulp，webpack等。近期熱門(mén)的一個(gè)打包工具就是webpack，能把各種資源作為模塊來(lái)進(jìn)行處理。
圖 11 打包工具
總而言之，前端所需掌握技術(shù)多且雜，需要投入一定的精力在上面進(jìn)行學(xué)習(xí)，學(xué)習(xí)過(guò)程可像本文通過(guò)MindMaster思維導(dǎo)圖來(lái)對(duì)其進(jìn)行梳理，提高學(xué)習(xí)效率。
聯(lián)系客服
