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

摘 要

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

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

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

1 Web components 標準及其發展

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

2 目前前端工程的發展與問題

2.1 前端工程初期

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

2.2 Web2.0時期

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

2.3 工程化前端時期

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

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

3.1 改進的組件化框架介紹

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

（1）提前自定義組件命名規范，然后再結合該規范進行開發。在框架渲染環節，所匹配的標簽也要根據之前定義的命名規范進行，如果匹配成功就可以進行渲染。

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

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

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

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

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

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

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

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

（2）注冊：執行createElementClass方法，于是就能夠產生elementClass，該元素可備用。

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

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

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

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

4 結論

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

參考文獻

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

[2]魏娜.Web前端開發技術研究[J].現代計算機（專業版），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-），男，江蘇省人。現為同濟大學在讀碩士。主要研究方向為軟件工程Web開發。

作者單位

同濟大學 上海市 201804