互聯(lián)網(wǎng)前端的演進(jìn)過(guò)程

摘要：隨著網(wǎng)絡(luò)發(fā)展的如此迅速，數(shù)據(jù)信息越來(lái)越多，各種軟件，網(wǎng)站如雨后春筍般地悄悄發(fā)芽，縱觀整個(gè)互聯(lián)網(wǎng)的發(fā)展歷史，前端與互聯(lián)網(wǎng)的發(fā)展是相輔相成的，一方面互聯(lián)網(wǎng)的高速發(fā)展給前端創(chuàng)造了良好的環(huán)境，而前端各種技術(shù)的誕生以及更加工程化的開發(fā)也進(jìn)一步地推動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展。

關(guān)鍵詞：互聯(lián)網(wǎng);發(fā)展;前端;框架

一、引言

回首過(guò)去的二十年里，互聯(lián)網(wǎng)的發(fā)展是迅速的，我們從早期的2g，3g網(wǎng)絡(luò)發(fā)展到如今的4g，5g網(wǎng)絡(luò)。在互聯(lián)網(wǎng)發(fā)展的同時(shí)，也帶來(lái)了許多新的知識(shí)和技術(shù)，現(xiàn)如今有各種各樣的網(wǎng)站，淘寶、京東的網(wǎng)絡(luò)購(gòu)物平臺(tái)的出現(xiàn)也依賴于互聯(lián)網(wǎng)的高速發(fā)展，現(xiàn)如今，網(wǎng)絡(luò)迎來(lái)了新時(shí)代。

作為一個(gè)前端開發(fā)人員，我深深地感受到了互聯(lián)網(wǎng)的發(fā)展對(duì)網(wǎng)站的頁(yè)面帶來(lái)的變化，在互聯(lián)網(wǎng)的早些時(shí)候，與后臺(tái)的連接也不是很方便，甚至來(lái)說(shuō)是困難的。在過(guò)去我們先要做好后臺(tái)開發(fā)，連接數(shù)據(jù)庫(kù)，等后臺(tái)開發(fā)完成之后才能進(jìn)行前端頁(yè)面的開發(fā)，通過(guò)模板引擎或jsp的相關(guān)操作來(lái)完成網(wǎng)站的開發(fā)，這在當(dāng)時(shí)來(lái)說(shuō)是主流的網(wǎng)站開發(fā)方式，現(xiàn)如今，隨著互聯(lián)網(wǎng)的高速發(fā)展和大量的程序員的出現(xiàn)，一些新的技術(shù)被研發(fā)出來(lái)，前后端開始分離出來(lái)，前端不必等后端開發(fā)完成之后在進(jìn)行開發(fā)，前后端分離就是前端和后端同時(shí)開發(fā)，前端和后端之間通過(guò)約定的Api接口來(lái)進(jìn)行開發(fā)，這大大地節(jié)省完成項(xiàng)目的開發(fā)時(shí)間。

二、轉(zhuǎn)折點(diǎn)

作為前端的另一個(gè)里程碑的發(fā)展是node的出現(xiàn)，node的出現(xiàn)使得前端發(fā)生了本質(zhì)的改變，過(guò)去前端的任務(wù)實(shí)際上是非常簡(jiǎn)單的，我們只要用html來(lái)表現(xiàn)網(wǎng)頁(yè)的基本內(nèi)容，用css來(lái)進(jìn)行布局，將整個(gè)瀏覽器的頁(yè)面分解成一塊一塊地塊級(jí)區(qū)域，在對(duì)每一個(gè)塊級(jí)區(qū)域進(jìn)行排版和美化，常用的布局方式有盒子模型和彈性盒子兩個(gè)方式，整體頁(yè)面分為3中，標(biāo)準(zhǔn)流，定位和浮動(dòng)。我們一般用標(biāo)準(zhǔn)流進(jìn)行頁(yè)面的展示，用定位來(lái)布局頁(yè)面中固定的元素，用浮動(dòng)來(lái)完善頁(yè)面的布局。至于網(wǎng)頁(yè)中的動(dòng)態(tài)效果和動(dòng)畫我們交給JavaScript來(lái)做。這是我們以前的前端開發(fā)?，F(xiàn)在node的出現(xiàn)使得前端有自己的服務(wù)器端，我們可以用node來(lái)作為我們的后端，這樣可以用前端來(lái)做一些后端開發(fā)的事情。通過(guò)node的包管理器我們可以制作出各種各樣的工具，也讓前端來(lái)到了一個(gè)新時(shí)代，大前端時(shí)代。

三、前端與后端的區(qū)別

作為一個(gè)從事網(wǎng)站開發(fā)的工作人員，我們經(jīng)?？梢月牭絼e人總喜歡將前端與后端進(jìn)行比較，在我看來(lái)二者的開發(fā)邏輯是完全不同的，前端相較于后端沒(méi)有那么嚴(yán)謹(jǐn)?shù)倪壿嬮_發(fā)方式，就拿Java來(lái)說(shuō)，Java的包管理機(jī)制使得Java在后臺(tái)開發(fā)中占據(jù)絕對(duì)的優(yōu)勢(shì)，Java開發(fā)的過(guò)程中每一步做些什么，以及各個(gè)包的導(dǎo)入都是十分嚴(yán)謹(jǐn)?shù)?，反觀前端，前端的開發(fā)在早些時(shí)候是十分繁瑣的，JavaScript作為前端三要素的核心，JavaScript本意就是用來(lái)處理瀏覽器輕量的腳本的，Brendan Eich自己也未想到JavaScript未來(lái)可以發(fā)展得如此強(qiáng)大，另一方面，我們寫的html、css、JavaScript代碼都要在瀏覽器上運(yùn)行，通過(guò)瀏覽器的引擎為我們渲染出頁(yè)面和加載腳本。但是目前市面上主流的瀏覽器眾多，其中比較主流的有chrome、ie、firefox等等。這些瀏覽器的內(nèi)核與引擎都不一樣，要花很長(zhǎng)的時(shí)間和精力來(lái)完成適配各個(gè)瀏覽器。

四、前端開始變得工程化

在進(jìn)行長(zhǎng)時(shí)間的發(fā)展和沉淀，前端開發(fā)終于開始邁向工程化，在這個(gè)大背景下，前端3大框架開始應(yīng)運(yùn)而生，前端3大框架包括Vue、React、Angular，對(duì)于中國(guó)的前端開發(fā)人員來(lái)說(shuō)，我們用Vue.js比較多，Vue是一個(gè)循序漸進(jìn)的JavaScript框架。它的核心是存在一個(gè)虛擬Dom，可以大大減少瀏覽器訪問(wèn)的壓力，我們都知道后端有一個(gè)mvc三層架構(gòu)，首先來(lái)說(shuō)，三層架構(gòu)與MVC的目標(biāo)一致：都是為了解耦合、提高代碼復(fù)用。MVC是一種設(shè)計(jì)模式，而三層架構(gòu)是一種軟件架構(gòu)。三層架構(gòu)分為：表現(xiàn)層（UI）（web層）、業(yè)務(wù)邏輯層（BLL）（service層）、數(shù)據(jù)訪問(wèn)層（DAL）（dao層），再加上實(shí)體類庫(kù)（Model）而在vue中出現(xiàn)了一種mvvm的概念，前后端開始出現(xiàn)分離，前端主要完成頁(yè)面的展示效果，以及一些簡(jiǎn)單的邏輯操作，后端主要連接數(shù)據(jù)庫(kù)，將數(shù)據(jù)庫(kù)中的數(shù)據(jù)通過(guò)后臺(tái)傳遞給前端。這樣前后端各司其職，可以有條不紊地完成項(xiàng)目的開發(fā)。

五、前端火熱的框架Vue

Vue的優(yōu)點(diǎn)：

（一）輕量級(jí)框架

只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb，Vue.js通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。

（二）簡(jiǎn)單易學(xué)

（三）雙向數(shù)據(jù)綁定

通過(guò)MVVM思想實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，讓開發(fā)者不用再操作dom對(duì)象，有更多的時(shí)間去思考業(yè)務(wù)邏輯。

（四）組件化

在前端應(yīng)用，這就引入了組件化開發(fā)的思想，分模塊開發(fā)。Vue.js通過(guò)組件，把一個(gè)單頁(yè)應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件（component）中，我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽，并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)，然后再分別寫好各種組件的實(shí)現(xiàn)，然后整個(gè)應(yīng)用就算做完了。

（五）視圖，數(shù)據(jù)，結(jié)構(gòu)分離

使數(shù)據(jù)的更改更為簡(jiǎn)單，不需要進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就能完成相關(guān)操作。

（六）虛擬DOM

總的來(lái)說(shuō)，用Vue來(lái)創(chuàng)建一個(gè)前端項(xiàng)目是比較簡(jiǎn)單的，這也是框架的好處，它把一些復(fù)雜的部分封裝了起來(lái)。我們只需要按照它的規(guī)定來(lái)使用即可，減少我們的開發(fā)時(shí)間。但是我們也不能基礎(chǔ)知識(shí)沒(méi)有學(xué)好就開始學(xué)習(xí)框架的知識(shí)。畢竟，基礎(chǔ)是最重要的。

六、總結(jié)

本文主要講述了前端隨著互聯(lián)網(wǎng)的發(fā)展歷程以及每個(gè)階段的發(fā)展經(jīng)歷，前端的發(fā)展主要有以下幾個(gè)時(shí)期，JavaScript的產(chǎn)生，瀏覽器可以運(yùn)行腳本，各個(gè)瀏覽器，各種腳本語(yǔ)言，出現(xiàn)百花齊放的一種趨勢(shì)，JavaScript逐漸完善，瀏覽器進(jìn)行合并或被淘汰，node.js的出現(xiàn)使得JavaScript可以做一些后端的操作，使得前端的功能越來(lái)越多。最后也就是現(xiàn)在的局面，直到三大框架的出現(xiàn)，前端慢慢進(jìn)入工程化，有著嚴(yán)格的項(xiàng)目創(chuàng)建過(guò)程。

參考文獻(xiàn)：

[1]朱利娜，周寧. 軟件項(xiàng)bai目管理的思考[J]. 平原du大學(xué)學(xué)報(bào)， 2007，（02） .

[2]羅鐵清，王瑩，王如龍. 軟件項(xiàng)目管理流程分析與設(shè)計(jì)[J]. 計(jì)算技術(shù)與自動(dòng)化， 2005，（03） .

[3]楊智明. 軟件項(xiàng)目管理過(guò)程[J]. 科教文匯（下半月）， 2006，（09） .

[4]陸偉. 軟件項(xiàng)目管理及其在中小規(guī)模開發(fā)中的實(shí)施[J]. 電腦知識(shí)與技術(shù)，2005，（08） .

[5]陳意云.編譯原理[M].2版.北京：高等教育出版社，2008

[6]呂映之.編譯原理[M].北京：清華大學(xué)出版社，1998

[7]徐國(guó)定.編譯原理[M].北京：高度教育出版社，2007

[8]劉春林.編譯原理與技術(shù)[M].北京：清華大學(xué)出版社，2009

作者簡(jiǎn)介：

甄朝明（ 1998—），男， 安徽六安人， 本科學(xué)歷，現(xiàn)就讀于宿州學(xué)院本科大四軟件工程專業(yè)，研究方向：前端開發(fā)。