摘 要

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

【關鍵詞】Web components標準 前端工程 組件化

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

1 Web components 標準及其發(fā)展

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

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

2.1 前端工程初期

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

2.2 Web2.0時期

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

2.3 工程化前端時期

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

3 基于Web components標準的前端工程組件化的改進

3.1 改進的組件化框架介紹

目前改進框架的方式有兩種：

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

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

3.2 改進的組件化框架工作原理

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

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

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

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

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

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

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

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

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

3.3 改進的組件化框架編譯原理

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

4 結論

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

參考文獻

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

[2]魏娜.Web前端開發(fā)技術研究[J].現(xiàn)代計算機（專業(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)為同濟大學在讀碩士。主要研究方向為軟件工程Web開發(fā)。

作者單位

同濟大學 上海市 201804