由于Web技術(shù)日新月異, 網(wǎng)站的前端也處在不斷的變化之中, 各種各樣的網(wǎng)頁(yè)趨于多元化, 導致網(wǎng)頁(yè)的制作難度在加大, 已經(jīng)逐漸地演變成了一門(mén)網(wǎng)頁(yè)前端開(kāi)發(fā)的獨立技術(shù)。企業(yè)的網(wǎng)站如何提供給用戶(hù)一個(gè)良好的體驗
一、前端開(kāi)發(fā)的三種技術(shù)
（一）HTML
HTML 只是標準通用標記語(yǔ)言其中一個(gè)應用，它對標準通用語(yǔ)言來(lái)說(shuō)具有規范性。瀏覽器網(wǎng)頁(yè)的文本結構內容的顯示是 HTML 提供的標記文本，是 WEB 編程的基礎。瀏覽器顯示網(wǎng)頁(yè)是按照標記符一定的順序和設置好的規則下出現內容。所以網(wǎng)站的建設第一步就是運用 HTML 建設布局合理的框架， 而且要與當前的瀏覽器兼容。當然網(wǎng)頁(yè)建設開(kāi)發(fā)只利用 HTML 技術(shù)是不行的，這時(shí)的網(wǎng)頁(yè)是不具備企業(yè)網(wǎng)站的可用性，還需要用到 CSS 語(yǔ)言進(jìn)一步優(yōu)化網(wǎng)頁(yè)的可用性。
（二）CSS
層疊樣式（CSS）與 HTML 一樣是一種樣式語(yǔ)言，HTML 是一種網(wǎng)頁(yè)標準性樣式語(yǔ)言，CSS 是一種網(wǎng)頁(yè)描述性樣式語(yǔ)言。CSS 可以把網(wǎng)頁(yè)的數據和樣式兩種信息拆分而使得瀏覽器呈現網(wǎng)頁(yè)的信息達到最強化，它可以提供多種文檔的樣式外觀(guān)， 為一些元素和文本進(jìn)行改造，修改頁(yè)面字體的顏色，增強了HTML 中的重要內容標記。雖然說(shuō)運用 CSS 和 HTML 兩種技術(shù)制作出來(lái)的網(wǎng)頁(yè)在外觀(guān)和功能已經(jīng)達到了可用性的要求，也可以滿(mǎn)足用戶(hù)對企業(yè)網(wǎng)頁(yè)的瀏覽需求，但是還有兩個(gè)問(wèn)題需要注意。第一，CSS 在如今互聯(lián)網(wǎng)市場(chǎng)上的不同瀏覽器中或者同一個(gè)瀏覽器不同的版本中顯示有很大的差別，因為瀏覽器的核心設計和對網(wǎng)頁(yè)支持力度不同，有時(shí)候會(huì )有一些瀏覽器對網(wǎng)頁(yè)的本質(zhì)內容顯示不出來(lái)，所以在編寫(xiě) CSS 時(shí)候需要考慮各種瀏覽器的兼容性問(wèn)題。第二，這時(shí)候的網(wǎng)頁(yè)還處于靜態(tài)，有瀏覽性但是不能交互數據，還需要用到 JavaScript 技術(shù)。
（三）JavaScript
JavaScript 簡(jiǎn)稱(chēng) JS，JavaScript 作為一種語(yǔ)言，隨著(zhù)現代網(wǎng)絡(luò )技術(shù)的進(jìn)步，JS 已經(jīng)發(fā)展成為了一門(mén)全面且完善的直譯式腳本語(yǔ)言。JavaScript 的解釋器已經(jīng)作為各種瀏覽器的必須品，被人稱(chēng)為 JavaScript 引擎，主要是在用戶(hù)端運用。之所以時(shí)候 JavaScript 已經(jīng)發(fā)展的非常完善，是因為它在網(wǎng)頁(yè)的開(kāi)發(fā)和建設中應用非常廣泛，可以處理各種復雜的計算問(wèn)題，也有瀏覽器與 Web 服務(wù)器之間的交互功能，而且還可以是動(dòng)態(tài)性的交互，它在服務(wù)端的作用也隨著(zhù)技術(shù)的發(fā)展逐漸顯現出來(lái)了。JavaScript 與 HTML 之間的交互可以達到頁(yè)面行為與樣式間的
松散耦合效果，當瀏覽器有某種交互動(dòng)作時(shí)，通過(guò)監聽(tīng)器的使用，綁定了特定元素的處理程序，這時(shí)候就會(huì )有觸發(fā)后的相應處理函數來(lái)執行任務(wù)。
二、前后分離 MVC 模式的 Web 開(kāi)發(fā)
（一）劃分前后端
視圖層（V）是頁(yè)面的搭建，顯示各種數據，劃分為前端； 模型層（M）是存儲各種數據和處理不同的業(yè)務(wù)邏輯，劃分為 后端。最關(guān)鍵是控制層的劃分，因為這關(guān)系到前后耦合問(wèn)題的處理?？刂茖樱–）是具備轉發(fā)和處理請求的功能，它是一個(gè)信息的調配處理器，解析客戶(hù)端的請求內容并把此內容發(fā)送給某個(gè)服務(wù)端，服務(wù)端得到內容在模型層處理后，反饋內容給控制層，再由此給客戶(hù)端發(fā)送正確的網(wǎng)頁(yè)頁(yè)面。雖然說(shuō)控制層和模型層的交流比較簡(jiǎn)單，用來(lái)進(jìn)行數據交互。從控制層的作用來(lái)看，它是數據的交互和調度地方，沒(méi)有業(yè)務(wù)邏輯，所以把控制層劃分到前端比較合理。
（二）實(shí)現前后分離
大多數門(mén)戶(hù)網(wǎng)站在構建中將 Node.js 作為中間層，利用 Express 開(kāi)發(fā)企業(yè)網(wǎng)站。用戶(hù)訪(fǎng)問(wèn)企業(yè)網(wǎng)站的門(mén)戶(hù)時(shí)，服務(wù)端進(jìn)行判定且響應。如果頁(yè)面需要動(dòng)態(tài)型的數據，Node 會(huì )把用戶(hù)id 作為請求的參數發(fā)送給后端的接口，后端接受請求處理后以 JSON 的形式返還給 Node 層。數據傳達到 Node 層后，運用函數回調渲染相應的頁(yè)面，這些獲取的數據會(huì )注入到 EJS 模板， 將 JSON 數據轉換成 HTML，最終將文件顯示在瀏覽器里，這時(shí)用戶(hù)就可以看到。
（三）復用前后分離的數據
前后分離模式的應用，它有一個(gè)優(yōu)勢就是后端的數據使用性非常強。舉個(gè)例子，我們今天查詢(xún)天氣預報非常方便，不過(guò)天氣預報的查詢(xún)功能調用的是外部接口，用戶(hù)發(fā)送請求某個(gè)城市的天氣情況請求，前臺獲取請求參數，運用 AJAX 技術(shù)向 Node 層發(fā)出請求，由 Node 層發(fā)送二次請求給天氣預報接口， 然后天氣預報接口響應請求參數處理后將響應的數據原路反饋給 Node 端，再轉回前臺頁(yè)面，用戶(hù)刷新一下就得到某個(gè)城市的天氣預報。正式利用這種前后分離模式，使得天氣預報的后端只注重天氣數據的更新，而不需要再去關(guān)注頁(yè)面的結構， 前端只需要注重界面對用戶(hù)的呈現，而不需要去更新數據，而且這種平臺在任何網(wǎng)絡(luò )連接到的地方都可以用到天氣預報的數據，這就說(shuō)明了可以復用前后分離數據。
三、結語(yǔ)
在企業(yè)網(wǎng)站建設開(kāi)發(fā)中采用前后端分離模式進(jìn)行 Web 開(kāi)
發(fā)，這極大地簡(jiǎn)化了網(wǎng)站建設的復雜性，也使得前后端的耦合性弱化，網(wǎng)站建設增強了一些數據的重復利用性。前端技術(shù)在企業(yè)網(wǎng)站的建設和開(kāi)發(fā)中，可以快捷有效地建設企業(yè)網(wǎng)站，在后期的維護和網(wǎng)站的擴展中更加簡(jiǎn)便，這提高了員工了的工作效率，增加了企業(yè)的整體效益。
