王萌 田楊 李寧寧

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

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

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）30-0077-03

1 概述

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

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

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

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

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

2 背景

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

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

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

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

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

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

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

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

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

l 1994年W3C發(fā)布HTML4.0標準；

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

l 2009年Node.js誕生；

l 2010年MV*框架的興起；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

樣式引入方式：

腳本引入方式：

頁面中應用：

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

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

5 總結(jié)

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

參考文獻：

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

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

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

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