基于Web components標(biāo)準(zhǔn)的前端工程組件化的改進(jìn)研究

摘 要

隨著互聯(lián)網(wǎng)的普及，網(wǎng)速的提升，瀏覽器性能的提高，前端技術(shù)的迅速發(fā)展，出現(xiàn)了各式各樣的前端組件，在這樣的環(huán)境下，W3C提出了Web components 標(biāo)準(zhǔn)。本文首先對W3C的Web components標(biāo)準(zhǔn)進(jìn)行了闡述，并對前端工程的組件化發(fā)展問題進(jìn)行了分析，最后應(yīng)用Web components 標(biāo)準(zhǔn)提出了一種新的前端工程組件化方案，提高了前端的開發(fā)效率，增強(qiáng)了Web應(yīng)用的可維護(hù)性和擴(kuò)展性。

【關(guān)鍵詞】Web components標(biāo)準(zhǔn) 前端工程 組件化

互聯(lián)網(wǎng)的發(fā)展給我們的生活帶來了翻天覆地的變化，無論是購物、娛樂、學(xué)習(xí)還是辦公，人們對互聯(lián)網(wǎng)的依賴性越來越大。目前前端模塊化和組件化的標(biāo)準(zhǔn)只是停留在初步階段，由于缺少官方標(biāo)準(zhǔn)，各大公司的主流框架都用自己的方式實現(xiàn)組件化。但是每個框架之間實現(xiàn)的方式不同，就導(dǎo)致框架之間的組件不能復(fù)用，如何制定一個通用的組件化標(biāo)準(zhǔn)并將其應(yīng)用是整個前端工程發(fā)展的一個難題。W3C提出的Web components 標(biāo)準(zhǔn)為解決這一問題提供了良好的契機(jī)。

1 Web components 標(biāo)準(zhǔn)及其發(fā)展

Web組件實際上是一種可被重用的構(gòu)件，它是由谷歌工程師開發(fā)，在生產(chǎn)標(biāo)準(zhǔn)和W3C規(guī)范下，可以在Web程序和文檔中創(chuàng)建它。其核心目標(biāo)就是將Web應(yīng)用程序的開發(fā)進(jìn)行革新，使之以軟件工程模式來進(jìn)行組件開發(fā)。在該組件中可進(jìn)行封裝，同時也能夠?qū)TML元素進(jìn)行操作。另外Firefox等瀏覽器則可以通過手工設(shè)置來對Web組件技術(shù)給予支持。而IE瀏覽器對Web組件技術(shù)的支持度方面則相對較低。Web組件的核心就是將有關(guān)UI元素進(jìn)行組件封裝，也就是將JS、HTML以及CSS等進(jìn)行封裝。在應(yīng)用時只需要調(diào)用這個組件對象就可以實現(xiàn)，而不需要導(dǎo)出粘貼相應(yīng)的源碼。通常，這個組件實際上就是一種模板，所涉及到的元素包括了模板（template），Shadow DOM，導(dǎo)入以及自定義元素。

2 目前前端工程的發(fā)展與問題

2.1 前端工程初期

1994年在PHP技術(shù)出現(xiàn)之后，可以將數(shù)據(jù)轉(zhuǎn)化成HTML模板，并進(jìn)行渲染。兩年后，W3C組織正式推出CSS1.0規(guī)范。在此規(guī)范下，可以支持開發(fā)者能夠利用外聯(lián)文件模式對之前的HTML樣式進(jìn)行修改，而之前要進(jìn)行修改，需要在對應(yīng)的HTML網(wǎng)頁上進(jìn)行修改，這樣維護(hù)就變得簡單，頁面也會更加簡潔，此時HTML和CSS以及模板語言這三個技術(shù)的融合開始得到廣泛應(yīng)用。在技術(shù)的支持下，一些后臺也能夠通過HTML來實現(xiàn)。之前的Web也從最初的展示工具蛻變成Web App，此后利用腳本語言進(jìn)行Web開發(fā)已經(jīng)成為趨勢。

2.2 Web2.0時期

2005年之后，異步的Java Script與XML技術(shù)（ajax）的出現(xiàn)徹底改變了javascript的地位。在ajax出現(xiàn)之前，前端后端之間的溝通需要提交表單，并且網(wǎng)頁需要跳轉(zhuǎn)。ajax通過javascript就可以在瀏覽器內(nèi)隨時與后端進(jìn)行連接，用戶基本上感覺不到頁面的變化。不僅瀏覽器和服務(wù)器的交流大大降低，客戶端也可以更快速的響應(yīng)并且返回數(shù)據(jù)。

2.3 工程化前端時期

在這個階段，前臺和后臺的功能開始變得十分明確，它們之間的交互主要是基于相應(yīng)的接口來實現(xiàn)，只要對接口的規(guī)格進(jìn)行規(guī)范，就能夠?qū)⑶芭_和后臺進(jìn)行分離。在前臺，可以通過字段來研發(fā)相應(yīng)的接口，確保錄入的數(shù)據(jù)具有正確性。當(dāng)后臺開發(fā)成功之后，就能夠進(jìn)行統(tǒng)一測試。然而隨著網(wǎng)絡(luò)業(yè)務(wù)的豐富，所需的功能也開始增多，這種開發(fā)模式的優(yōu)勢就很難體現(xiàn)，即使是一個單頁面程序，在復(fù)雜交互環(huán)境下，代碼也變得十分的龐大。為了改變這種境況，在前臺開始出現(xiàn)了基于MVC架構(gòu)設(shè)計的前端框架，在此框架的支持下，前臺的功能可以變得更加豐富，代碼規(guī)模也以幾何倍數(shù)進(jìn)行增長。于是對應(yīng)的模塊化概念開始出現(xiàn)，當(dāng)時AMD和CMD這兩個模塊化規(guī)范較為成熟，它們的關(guān)鍵思想就在于在開發(fā)前臺代碼時，引入模塊化的設(shè)計思路。

3 基于Web components標(biāo)準(zhǔn)的前端工程組件化的改進(jìn)

3.1 改進(jìn)的組件化框架介紹

目前改進(jìn)框架的方式有兩種：

（1）提前自定義組件命名規(guī)范，然后再結(jié)合該規(guī)范進(jìn)行開發(fā)。在框架渲染環(huán)節(jié)，所匹配的標(biāo)簽也要根據(jù)之前定義的命名規(guī)范進(jìn)行，如果匹配成功就可以進(jìn)行渲染。

（2）不限制標(biāo)簽名稱，開發(fā)人員能夠結(jié)合自身所需將標(biāo)簽名改成自己熟悉的樣式，比如分割線、駝峰等。不過這些標(biāo)簽需要有一個自定義環(huán)節(jié)，也就是將其自定義成相應(yīng)的組件。綜合對比上述兩種方式可知，在自定義組件的優(yōu)化方面，這兩種方式存在著各自的利弊，都沒有充分遵循W3C模式。這就意味著需要開發(fā)一套能夠融合這兩種方案優(yōu)勢的一種新框架。目前Web組件標(biāo)準(zhǔn)雖然能夠提供相應(yīng)的接口，可在瀏覽器上支持用戶自定義的一些元素，然而依然存在著一定的兼容性問題。Polymer通過Polyfill技術(shù)對老舊瀏覽器進(jìn)行的修補(bǔ)，通過這些修補(bǔ)使之能夠支持新瀏覽器的特性。而Polymer在運(yùn)行時，一旦涉及到element解析共組，就會對整體性能產(chǎn)生負(fù)面影響，另外對瀏覽器的支持，尤其是手機(jī)的支持都存在很大缺陷，在某些品牌的手機(jī)上，甚至不能夠使用。而本次通過對框架進(jìn)行優(yōu)化設(shè)計，可為設(shè)計者提供一些自定義的元素，從而更好的解決上述的一些兼容性問題。本文利用W3C所提供的標(biāo)準(zhǔn)規(guī)范，以及使用JS算法在底層對該組件進(jìn)行封裝，然后利用標(biāo)簽來引入框架并在容器中創(chuàng)建相應(yīng)的Dom元素。

3.2 改進(jìn)的組件化框架工作原理

此優(yōu)化之后的框架實際上就是一種MVVC結(jié)構(gòu)程序，整個程序從最上層分為兩部分：

（1）全局設(shè)計。主要涉及到全局性接口以及默認(rèn)參數(shù)等；

（2）元素實例。涉及到實例的初始化和各種接口的設(shè)計。

如圖1所示，在實例化時，其核心就是將模型和視圖進(jìn)行融合，該思路顯然和MVVC框架設(shè)計思路一致，主要工作包括：第一，對data進(jìn)行監(jiān)聽，可通過Obsever來實現(xiàn)，能實施察覺數(shù)據(jù)項的變化。第二，將Template進(jìn)行解析處理，使之成為Document Fragment，接著在對directive進(jìn)行解析，并獲取依賴它的一些數(shù)據(jù)項和更新策略。第三，基于Watcher將上述兩個環(huán)節(jié)進(jìn)行融合，就能夠獲得依賴Directive的數(shù)據(jù)項變化情況，一旦有數(shù)據(jù)變化，那么Observer就能偵測到，然后觸發(fā)視圖更新，進(jìn)而實現(xiàn)關(guān)聯(lián)性。

在此框架中涉及到的流程則是元素的加載、注冊、更新和銷毀。

（1）加載：通過對class進(jìn)行遍歷，查看相應(yīng)的element元素，然后調(diào)用create方法，將子元素和標(biāo)簽類型等參數(shù)傳入。

（2）注冊：執(zhí)行createElementClass方法，于是就能夠產(chǎn)生elementClass，該元素可備用。

（3）更新：當(dāng)數(shù)據(jù)和模型產(chǎn)生變化時，能夠迅速的從視圖中進(jìn)行反饋，此時可以對DOM進(jìn)行操作，而它的頻繁操作也會對最終的性能產(chǎn)生負(fù)面影響。

（4）銷毀：只需要從根節(jié)點上切斷需要刪除的元素實例即可。

3.3 改進(jìn)的組件化框架編譯原理

框架并不可獨立運(yùn)行，只有在編譯之后，形成相應(yīng)的構(gòu)造函數(shù)才能夠運(yùn)行。通過編譯工具，可以很好的提升前臺程序的性能，并能夠很好的進(jìn)行資源加載，這里的加載內(nèi)容涉及到同步、異步和預(yù)加載以及合并、內(nèi)嵌等，另外還包括規(guī)范的開發(fā)、代碼的部署和模塊化、自動化工具的開發(fā)等。在編譯框架時，首先要對html文件進(jìn)行分析，查看是否存在著自定義Element，如果發(fā)現(xiàn)了存在著這些元素，就需要從對應(yīng)文件中提取template和style以及script等。然后對style部分進(jìn)行封裝處理，或者進(jìn)行l(wèi)ess編譯，生成新的樣式文件。對template文件進(jìn)行分析，查看它是否存在著依賴元素，然后將其轉(zhuǎn)換成js代碼。而在Script環(huán)節(jié)，則可以將之前模板中編譯出來的function append文件進(jìn)行裝載。如果沒有發(fā)現(xiàn)element，那么該文件就是一個依賴link 的文件，并將其進(jìn)行標(biāo)記。

4 結(jié)論

本文從W3C的Web components標(biāo)準(zhǔn)入手，設(shè)計了一種高性能，敏捷開發(fā)，易維護(hù)的開發(fā)方案。這個方案封裝了Web components標(biāo)準(zhǔn)，但不是單純的封裝，而是將瀏覽器的兼容性以及虛擬DOM渲染的性能考慮在內(nèi)，實現(xiàn)了一種瀏覽器兼容性更強(qiáng)，書寫方式和代碼結(jié)構(gòu)更加標(biāo)準(zhǔn)，數(shù)據(jù)綁定視圖和模型的前端框架。

參考文獻(xiàn)

[1]王政.Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].電腦知識與技術(shù)，2013（22）.

[2]魏娜.Web前端開發(fā)技術(shù)研究[J].現(xiàn)代計算機(jī)（專業(yè)版），2011（29）.

[3]Yukui Fei，Jijun Zhang，Hongmei Zhu.Research on Self-Adaptation of Web components Based on Interface Automata.ShanDong Agri.Univ.TaiAn 271018；P.R.China Proceedings of 2007 International Symposium on Distributed Computing and Applications to Business， Engineering and Science（Volume Ⅱ），2010（07）.

作者簡介

黃江寧（1989-），男，江蘇省人?，F(xiàn)為同濟(jì)大學(xué)在讀碩士。主要研究方向為軟件工程Web開發(fā)。

作者單位

同濟(jì)大學(xué) 上海市 201804