組件化WEB前端架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)

王萌 田楊 李寧寧

摘要：隨著科技的發(fā)展，Web環(huán)境的不斷更新，人們對(duì)前端的要求也在不斷提高，用戶已經(jīng)不再滿足于頁(yè)面的功能性實(shí)現(xiàn)，對(duì)頁(yè)面的美觀度也有著強(qiáng)烈的要求。從事前端開(kāi)發(fā)的過(guò)程中，我們也根據(jù)業(yè)務(wù)和需求的不斷變化，不斷深入研究如何快捷便捷的從事前端開(kāi)發(fā)工作。從項(xiàng)目中積累沉淀出一套適合組件化前端框架。該框架有低耦合，高復(fù)用，高效等特性，學(xué)習(xí)成本低，開(kāi)發(fā)效率高的優(yōu)點(diǎn)。

關(guān)鍵詞：前端；組件化；架構(gòu)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）30-0077-03

1 概述

現(xiàn)今人們對(duì)美觀度的要求越來(lái)越高，用戶對(duì)系統(tǒng)的要求也在不斷地提高，不止要滿足性能的需求，對(duì)頁(yè)面的美觀度的要求也在逐漸提升，這就導(dǎo)致頁(yè)面展示越來(lái)越重要。如何滿足用戶對(duì)系統(tǒng)的需求？如何讓頁(yè)面更好地展示在用戶面前？如何快速高效開(kāi)發(fā)等等一系列的問(wèn)題也應(yīng)運(yùn)而生。

在前端人員越來(lái)越多人員分布越來(lái)越廣，項(xiàng)目的復(fù)雜度越來(lái)越高，要求越來(lái)越嚴(yán)格的情況下。前端的開(kāi)發(fā)難度在逐年提高，所以前端團(tuán)隊(duì)開(kāi)發(fā)的形式越來(lái)越具體化。如何從繁重的工作中解脫自己，并提高開(kāi)發(fā)效率和質(zhì)量一直是前端人員所追求，所以營(yíng)運(yùn)而生組件化開(kāi)發(fā)，對(duì)于組件化開(kāi)發(fā)不只是后臺(tái)專利，前端也有組件化。

無(wú)論是前端還是后臺(tái)，都是整個(gè)軟件體系的組成部分。軟件產(chǎn)品也是產(chǎn)品，既然是產(chǎn)品就有它應(yīng)用的場(chǎng)景，使用的地方時(shí)，有它產(chǎn)生的目的性。而這最大的目的性就是創(chuàng)造剩余價(jià)值，追逐利潤(rùn)的極致，成本是軟件產(chǎn)品必須要面的實(shí)質(zhì)性問(wèn)題，降低成本提高開(kāi)發(fā)效率是一條必經(jīng)之路。

提高開(kāi)發(fā)效率這方面，業(yè)界研究得更多，主要途徑有兩點(diǎn)：加快開(kāi)發(fā)速度，減少變更代價(jià)。怎樣才能加快開(kāi)發(fā)速度呢？如果我們的開(kāi)發(fā)不是重新造輪子，而是每一次做新產(chǎn)品都可以利用已有的東西，那就會(huì)好很多。怎樣才能減少變更代價(jià)呢？如果我們能夠理清模塊之間的關(guān)系，合理分層，每次變更只需要修改其中某個(gè)部分，甚至不需要修改代碼，僅僅是改變配置就可以，那就更好了[1]。

工程化、模塊化、組件化生產(chǎn)這些概念并不是僅存在于軟件開(kāi)發(fā)中，例如汽車制作行業(yè)，通過(guò)流水式操作完成一整輛汽車的拼裝工作，小道螺絲，大到整個(gè)車體車架都是分批給各個(gè)不同的部門(mén)或是廠商去制作，也有專門(mén)的地方去拼裝整部汽車。這樣在無(wú)形中我們將制造效率提高，在生產(chǎn)過(guò)程中或是使用過(guò)程中的，我們可以從一個(gè)廠商購(gòu)入相同型號(hào)的組件，使用到類似的型號(hào)的汽車拼裝，這樣也提高了組件的使用率。軟件產(chǎn)品的開(kāi)發(fā)也追尋著類似的開(kāi)發(fā)方式，講軟件解耦分成不同的組件，組件結(jié)合成模塊，模塊和模塊拼裝成產(chǎn)品，行程一整套工程化的作業(yè)方式。提高開(kāi)發(fā)的效率也提高組件的復(fù)用率，使開(kāi)發(fā)更加簡(jiǎn)便化也更好的控制對(duì)代碼質(zhì)量產(chǎn)品質(zhì)量的檢測(cè)。因?yàn)橥缓笥型坏臉?biāo)準(zhǔn)我們就有一套可以衡量的標(biāo)準(zhǔn)這樣也可以提高檢測(cè)速度和質(zhì)量，從而降低成本，提高利潤(rùn)的生成。

2 背景

前端初期給開(kāi)發(fā)人員的印象是入門(mén)簡(jiǎn)單門(mén)檻低，只需要會(huì)使用html、js、css會(huì)Ps基本就是個(gè)合格的前端開(kāi)發(fā)人員，但是隨著前端技術(shù)的不斷發(fā)展對(duì)前端人員的要求也在逐漸地提升。WEB的發(fā)展史：

l 1989出現(xiàn)web原型；

l 1990年出現(xiàn)瀏覽器原型；

l 1994年HTML2規(guī)范公布；

l 1995年腳本語(yǔ)言的出現(xiàn)；

l 1997年ECMAScript規(guī)范公布；

l 2000年瀏覽器的第一次戰(zhàn)爭(zhēng)。

Web發(fā)展的初期：從誕生到2005年都是以前請(qǐng)厚重的模式展示給大家的，直到ajax的出現(xiàn)與興起逐步促進(jìn)Web2.0時(shí)代的發(fā)展。

l 2008年迎來(lái)瀏覽器的第二次革命，兼容性的前端要求也隨之而來(lái)。

l 1994年W3C發(fā)布HTML4.0標(biāo)準(zhǔn)；

l 2004-2008年HTML5的演化到正式發(fā)布；

l 2009年Node.js誕生；

l 2010年MV*框架的興起；

l 2009-2017移動(dòng)端的快速發(fā)展。

前端的發(fā)展在不斷地刷新這人的認(rèn)知，從基礎(chǔ)技能的更新，框架的變革，瀏覽器之間的競(jìng)爭(zhēng)都無(wú)處不在的提醒這人們前端崛起是必然趨勢(shì)。從事前端開(kāi)發(fā)人員也在逐年增加，開(kāi)發(fā)人員的追求的極致已經(jīng)不是如何去實(shí)習(xí)功能，如何去還原設(shè)計(jì)圖，人們把質(zhì)量和效率提上了日程。前端工程化是早起的思想，它是一種思想而非一種技術(shù)，它可以深入到項(xiàng)目的各個(gè)方向中。與模塊化的程序設(shè)計(jì)思想類似，前端模塊化開(kāi)發(fā)的基本思想是在Web上以模塊作為基本單位，對(duì)相關(guān)代碼等進(jìn)行組織和劃分，各個(gè)模塊相互獨(dú)立，負(fù)責(zé)各自特定的功能[2]。

前端工程化就是用工程思維方式來(lái)設(shè)計(jì)和開(kāi)發(fā)自己的項(xiàng)目，是高層次的思想，前端模塊化是更加具體化的實(shí)施方案，模塊簡(jiǎn)單說(shuō)就是運(yùn)用技術(shù)實(shí)現(xiàn)具體的一系列功能的頁(yè)面的組合。什么是組件？組件就是頁(yè)面上一些小的組成，通過(guò)不同的組合拼裝成一個(gè)完整的頁(yè)面，當(dāng)需要的時(shí)候添加進(jìn)來(lái)，當(dāng)不需要的時(shí)候隨時(shí)修改或是刪除。組件之間是自有組合的，組件化將頁(yè)面視為一個(gè)容器，頁(yè)面上各個(gè)獨(dú)立部分例如：頭部、導(dǎo)航、焦點(diǎn)圖、側(cè)邊欄、底部等視為獨(dú)立組件，不同的頁(yè)面根據(jù)內(nèi)容的需要，去盛放相關(guān)組件即可組成完整的頁(yè)面[1]。組件有良好的復(fù)用性可以重復(fù)使用在不同頁(yè)面中，通過(guò)小的改變也可以變化成擁有不同功能的模塊頁(yè)面。

3 需求分析與設(shè)計(jì)

在汽車行業(yè)中也有不少的系統(tǒng)網(wǎng)站和應(yīng)用程序，根據(jù)不同的需求產(chǎn)生了許多產(chǎn)品的原型。對(duì)現(xiàn)有產(chǎn)品調(diào)研整理后發(fā)現(xiàn)雖然有成型的產(chǎn)品但是使用的技術(shù)是分散的，使用的方法是參差不齊的，沒(méi)有統(tǒng)一的開(kāi)發(fā)標(biāo)準(zhǔn)、統(tǒng)一的檢測(cè)標(biāo)準(zhǔn)，在后期維護(hù)中遇到許多問(wèn)題，技術(shù)部統(tǒng)一要求維護(hù)人員掌握的技術(shù)要全面化，提高人員成本。檢測(cè)標(biāo)準(zhǔn)的不統(tǒng)一使得產(chǎn)品出來(lái)后在不同的環(huán)境下展現(xiàn)出不同的效果，出現(xiàn)的問(wèn)題也是層出不窮，降低了用戶的體驗(yàn)度，也讓部分用戶對(duì)我們的產(chǎn)品失去了信心。所以我們現(xiàn)在急需一整套的解決方案去改變現(xiàn)有的狀況，在多方調(diào)研中我們發(fā)現(xiàn)使用組件化的開(kāi)發(fā)方式可以有效地解決現(xiàn)在面臨的問(wèn)題。

在軟件產(chǎn)品上解耦合，前后臺(tái)分離開(kāi)發(fā)，采用組件化開(kāi)發(fā)的方式，統(tǒng)一開(kāi)發(fā)標(biāo)準(zhǔn)框架，統(tǒng)一的框架規(guī)范，統(tǒng)一檢測(cè)標(biāo)準(zhǔn)。通過(guò)mv*的方式進(jìn)行項(xiàng)目的開(kāi)發(fā)，將前端的開(kāi)發(fā)成本降低，提高開(kāi)發(fā)的效率。

分析其他系統(tǒng)的功能和現(xiàn)有項(xiàng)目的框架，梳理出以下幾個(gè)問(wèn)題：

首先，開(kāi)發(fā)環(huán)境的選取。分析企業(yè)的應(yīng)用環(huán)境，企業(yè)對(duì)視覺(jué)、功能的要求范圍，開(kāi)發(fā)工期的范圍，開(kāi)發(fā)人員的配置等。部署的環(huán)境是在什么樣的操作系統(tǒng)下進(jìn)行？是否可以聯(lián)網(wǎng)？部署的端口是否有要求等。

其次，組件內(nèi)容。我們所提供的組件應(yīng)該包括哪些內(nèi)容，通過(guò)組件是否可以完成簡(jiǎn)單的頁(yè)面開(kāi)。組件的性質(zhì)可劃分為：業(yè)務(wù)組件，功能組件。功能組件為基礎(chǔ)，加入一定的業(yè)務(wù)需求后演變成業(yè)務(wù)組件。從已有項(xiàng)目中分析得來(lái)的在以后的使用中也有一定的比例所以我們也可以稱其為共性組件（通用組件）。

再次，組件之間通訊，項(xiàng)目中使用前后臺(tái)分離的方式開(kāi)發(fā)，通過(guò)Ajax進(jìn)行與后臺(tái)的交互，采用Json格式的數(shù)據(jù)傳輸方式。組件通過(guò)Js和html的之間的構(gòu)建類完成相互的結(jié)合。

整理以上問(wèn)題內(nèi)容，應(yīng)設(shè)計(jì)組件開(kāi)發(fā)內(nèi)容清單和適用的開(kāi)發(fā)環(huán)境情況，以及交互方式制定一套具體的開(kāi)發(fā)標(biāo)準(zhǔn)和開(kāi)發(fā)規(guī)范。根據(jù)不同的內(nèi)容可以組合成不同的頁(yè)面。

對(duì)現(xiàn)有汽車企業(yè)對(duì)瀏覽器的應(yīng)用分析得出結(jié)論：IE8+的瀏覽器支持，已內(nèi)網(wǎng)訪問(wèn)位主部分有外網(wǎng)訪問(wèn)，部署環(huán)境系統(tǒng)涉及l(fā)inux/windows/ slorais操作系統(tǒng)。隨著時(shí)代的進(jìn)步對(duì)界面的要求也從單純的功能性操作提高到界面美觀的高度。

4 設(shè)計(jì)與實(shí)現(xiàn)

對(duì)于前端組件化框架的設(shè)計(jì)，思想如下：

1）列出項(xiàng)目中高頻涉及的功能組件和業(yè)務(wù)組件進(jìn)行封裝，讓其可以單獨(dú)使用運(yùn)行，組件與組件直接無(wú)直接聯(lián)系。組件的復(fù)用性和可移植性能提高組件在不同場(chǎng)景下使用，解耦合是軟件開(kāi)發(fā)的性能提升的關(guān)鍵，所以組件化開(kāi)發(fā)每個(gè)組件都可以單獨(dú)運(yùn)行，不受其他組件的影響這樣在后期的拼裝過(guò)程中才能更好地應(yīng)用。根據(jù)組件的功能列出相應(yīng)的Demo案例可以參考，同時(shí)配有文字性注釋輔助開(kāi)發(fā)人員的使用。

2）列出系統(tǒng)開(kāi)發(fā)的基本框架所包含的模塊，根據(jù)模塊內(nèi)容指定可以應(yīng)用的組件信息，也模塊的功能也提現(xiàn)約束組件的特性，如大小、展示形式、加載方式等等。每個(gè)模塊都可以稱之為一個(gè)系統(tǒng)，模塊和模塊之間通過(guò)協(xié)議和數(shù)據(jù)進(jìn)行鏈接，它們之間沒(méi)有必要的聯(lián)系，分開(kāi)后可以使用在不同的系統(tǒng)中，合并在一起又能組成不同的模塊。根據(jù)不同的組成方式又需要不同組件去填充。

3）拼裝組合組件，根據(jù)組件的使用說(shuō)明和模塊的性質(zhì)完成組件的拼裝。通過(guò)快速的組件拼裝最后形成一個(gè)完整的頁(yè)面，通過(guò)頁(yè)面的充實(shí)完成整個(gè)系統(tǒng)的開(kāi)發(fā)。

首先，統(tǒng)一框架根據(jù)企業(yè)應(yīng)用場(chǎng)景的分析，我們采用Jquery的開(kāi)發(fā)框架進(jìn)行前端開(kāi)發(fā)，采用webpack的方式進(jìn)行前端構(gòu)建和打包壓縮等。采用Ajax的Json傳輸方式，通過(guò)Nginx的應(yīng)用輔助進(jìn)行頁(yè)面的跳轉(zhuǎn)和圖片等的處理。對(duì)頁(yè)面的樣式標(biāo)準(zhǔn)參考多個(gè)流行中UI規(guī)范制定了有自己特色的UI設(shè)計(jì)規(guī)范內(nèi)容，并制定了三套主題分別是以藍(lán)色為主、綠色、暗色為輔的頁(yè)面主題參考標(biāo)準(zhǔn)。

其次，構(gòu)建一套特有的組件庫(kù)，包括功能性組件和業(yè)務(wù)性組件，通過(guò)組件庫(kù)的內(nèi)容可快速拼裝出的頁(yè)面。實(shí)際應(yīng)用中代碼如下：

樣式引入方式：

腳本引入方式：

頁(yè)面中應(yīng)用：

再次，根據(jù)Ajax的使用進(jìn)行前后臺(tái)的數(shù)據(jù)交互，判斷數(shù)據(jù)交互的結(jié)果是否正確，驗(yàn)證數(shù)據(jù)的真實(shí)性，根據(jù)返回的結(jié)果展示不同的頁(yè)面信息。

$.ajax（{

url： addr + "/api/sys/user？_ts="+ new Data（）.getTime（），

type： 'POST'，

data： JSON.stringify（params），

contentType： "application/json； charset=UTF-8"，

success： function （response） {

if （response.ok） {

refreshData（）；

layer.closeAll（）；

layer.msg（'成功！'）；

} else {

layer.msg（response.message）；

}

}，

error： function （response） {

layer.closeAll（）；

layer.msg（'失敗！'）；

}

}）；

最后，根據(jù)前端規(guī)范通過(guò)JsLint的應(yīng)用對(duì)代碼進(jìn)行掃描，當(dāng)全部通過(guò)后再進(jìn)行代碼壓縮打包工作。代碼打包通過(guò)WebPack工具進(jìn)行打包處理，在最后的部署環(huán)境下運(yùn)用的合并壓縮后的打包程序，減少頁(yè)面的請(qǐng)求提高加載速度。根據(jù)汽車企業(yè)在公司內(nèi)部規(guī)定使用的內(nèi)部網(wǎng)絡(luò)，缺少外網(wǎng)鏈接在此組件化開(kāi)發(fā)框架中并沒(méi)有使用CDN方式加載頁(yè)面引入信息。此組件化開(kāi)發(fā)框架面向的是汽車企業(yè)的內(nèi)部管理系統(tǒng)的開(kāi)發(fā)和應(yīng)用，同時(shí)也適用于其他行業(yè)的開(kāi)發(fā)，在后期繼續(xù)完善組件開(kāi)發(fā)功能下，我們還將致力于可視化組件的研究更好的完善此框架的內(nèi)容。

5 總結(jié)

目前前端模塊化和組件化的標(biāo)準(zhǔn)只是停留在初步階段，由于缺少官方標(biāo)準(zhǔn)，各大公司的主流框架都用自己的方式實(shí)現(xiàn)組件化[3]。我們也嘗試在根據(jù)汽車企業(yè)行業(yè)的特殊性，開(kāi)發(fā)出自己的一套前端組件化框架應(yīng)用。根據(jù)其兼容性的要求我們采用jQuery框架作為輔助開(kāi)發(fā)框架，在開(kāi)始使用jQuery之前，必須將jQuery庫(kù)添加到項(xiàng)目中[4]。這是我們?cè)谑褂弥斜仨氁⒁獾膽?yīng)用規(guī)范。我們將組件化根據(jù)模塊劃分又形成了部分的業(yè)務(wù)組件，組件化的開(kāi)發(fā)在實(shí)際應(yīng)用中，真實(shí)地提高了我們開(kāi)發(fā)效率，運(yùn)用組件化開(kāi)發(fā)是現(xiàn)在前端發(fā)展的趨勢(shì)，同時(shí)在完善組件化開(kāi)發(fā)的基礎(chǔ)上，我們也進(jìn)一步地將框架其提升為組件化可視化的操作，企業(yè)及開(kāi)發(fā)更簡(jiǎn)便，更快捷。一定程度上降低開(kāi)發(fā)成本提高開(kāi)發(fā)效率，提高軟件產(chǎn)品的利潤(rùn)。

參考文獻(xiàn)：

[1] 肖慧明.網(wǎng)站前端模塊化開(kāi)發(fā)策略研究[J].數(shù)字技術(shù)與應(yīng)用，2018，36（3）.

[2] 黃江寧.基于Webcomponents標(biāo)準(zhǔn)的前端工程組件化的改進(jìn)研究[J].電子技術(shù)與軟件工程，2016（22）.

[3] 劉汀.基于jQuery的Web前端組件的應(yīng)用研究[J].無(wú)線互聯(lián)科技，2017（21）.

【通聯(lián)編輯：朱寶貴】