atitit. web組件化原理與設計

atitit.  web組件化原理與設計

 

 

 

1. Web Components提供了一種組件化的推薦方式，具體來講，就是：1

2. 組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。 不具備複用性的組件」2

3. 函數邏輯來生成界面 的優缺點2

4. 咱們來看看如何把一個業務界面切割成組件。通用性的東西封裝成組件，另一種是整個應用都組件化。3

5. 高內聚5

6. 可組合5

7. Iframe  容器化6

8. 參考6

 

 

 

將來的WEB開發，將會效仿今天桌面軟件的開發路子，那就是「組件化」。

目前組件化最好的就是React  angular了。。

React  的最大問題是以js爲核心，嵌入html

兒anrular最大問題是囉嗦，繁瑣。

 

 

 

1. Web Components提供了一種組件化的推薦方式，具體來講，就是：

 

· 經過shadow DOM封裝組件的內部結構

· 經過Custom Element對外提供組件的標籤

· 經過Template Element定義組件的HTML模板

· 經過HTML imports控制組件的依賴加載

這幾種東西，會對現有的各類前端框架/庫產生很巨大的影響：

· 因爲shadow DOM的出現，組件的內部實現隱藏性更好了，每一個組件更加獨立，可是這使得CSS變得很破碎，LESS和SASS這樣的樣式框架面臨重大挑戰。

· 由於組件的隔離，每一個組件內部的DOM複雜度下降了，因此選擇器大多數狀況下能夠限制在組件內部了，常規選擇器的複雜度下降，這會致使人們對jQuery的依賴降低。

· 又由於組件的隔離性增強，致力於創建前端組件化開發方式的各類框架/庫（除Polymer外），在本身的組件實現方式與標準Web Components的結合，組件之間數據模型的同步等問題上，都遇到了不一樣尋常的挑戰。

· HTML imports和新的組件封裝方式的使用，會致使以前經常使用的以JavaScript爲主體的各種組件定義方式處境尷尬，它們的依賴、加載，都面臨了新的挑戰，而因爲全局做用域的弱化，請求的合併變得困可貴多。

 

 

2. 組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。 不具備複用性的組件」

大量的業務界面，這塊東西很顯然複用價值很低，基本不存在複用性，但仍然有不少方案中把它們「組件化」了，使得它們成爲了「不具備複用性的組件」。爲何會出現這種狀況呢？

組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。這一點正如面嚮對象語言，Java要比C++純粹，由於它不容許例外狀況的出現，連main函數都必須寫到某個類裏，因此Java是純面嚮對象語言，而C++不是。

 

做者::  ★(attilax)>>>   綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍，  EMAIL:1466519819@qq.com

轉載請註明來源： http://blog.csdn.net/attilax

 

 

3. 函數邏輯來生成界面 的優缺點

另外有一些框架/庫偏心用函數邏輯來生成界面，早期的ExtJS，如今的React（它內部仍是可能使用模板，並且對外提供的是組件建立接口的進一步封裝——jsx）等，這種實現技術的優點是不一樣平臺上編程體驗一致，甚至能夠給每種平臺封裝相同的組件，調用方輕鬆寫一份代碼，在Web和不一樣Native平臺上可用。但這種方式也有比較麻煩的地方，那就是界面調整比較繁瑣。

 

4. 咱們來看看如何把一個業務界面切割成組件。通用性的東西封裝成組件，另一種是整個應用都組件化。

 

有這麼一個簡單場景：一個僱員列表界面包括兩個部分，僱員表格和用於填寫僱員信息的表單。在這個場景下，存在哪些組件？

對於這個問題，主要存在兩種傾向，一種是僅僅把「控件」和比較有通用性的東西封裝成組件，另一種是整個應用都組件化。

對前一種方式來講，這裏面只存在數據表格這麼一個組件。
對後一種方式來講，這裏面有可能存在：數據表格，僱員表單，甚至還包括僱員列表界面這麼一個更大的組件。

這兩種方式，就是咱們以前所說的「局部組件化」，「全組件化」。

 

 

好比Angular裏面的這種：

<div ng-include="'aaa/bbb/ccc.html'"></div>

就不給它什麼名字，直接include進來，用文件路徑來區分。這個片斷的做用能夠用其目錄結構描述，也就是經過物理名而非邏輯名來標識，目錄層次充當了一個很好的命名空間。

 

就像剛纔的僱員表單，既然你不從標籤的命名上去區分，那必定會在組件上加配置。好比你原來想這樣：

<EmployeeForm heading="僱員表單"></EmployeeForm>

而後在組件內部，判斷有沒有設置heading，若是沒有就不顯示，若是有，就顯示。過了兩天，產品問能不能把heading裏面的某幾個字加粗或者換色，而後碼農開始容許這個heading屬性傳入html。沒多久以後，你會驚奇地發現有人用你的組件，沒跟你說，就在heading裏面傳入了摺疊按鈕的html，而且用選擇器給摺疊按鈕加了事件，點一下以後還能摺疊這個表單了……

而後你一想，這個不行，我得給他再加個配置，讓他能很

2015前端組件化框架之路(轉) - GISER_U - 博客園.htm

 

這個問題討論完了，咱們來看看另一個問題：若是UI組件有業務邏輯，應該如何處理。

好比說，性別選擇的下拉框，它是一個很是通用化的功能，照理說是很適合被當作組件來提供的。可是究竟如何封裝它，咱們就有些犯難了。這個組件裏除了界面，還有數據，這些數據應當內置在組件裏嗎？理論上從組件的封裝性來講，是都應當在裏面的，因而就這麼造了一個組件：

<GenderSelect></GenderSelect>

 

 

裏的標籤，並不僅是界面元素，甚至邏輯組件也能夠這樣，好比這個代碼：

<my-panel>

    <core-ajax id="ajax" url="http://url" params="{{formdata}}" method="post"></core-ajax>

</my-panel>

注意到這裏的core-ajax標籤，很明顯這已是純邏輯的了，在大多數前端框架或者庫中，調用ajax確定不是這樣的，但在瀏覽器端這麼幹也不是它首創，好比flash裏面的WebService，好比早期IE中基於htc實現的webservice.htc等等，都是這麼幹的。在Polymer中，這類東西稱爲非可見元素（non-visual-element）。

 

 

在Web Components與前端組件化框架的關係上，我以爲是這麼個樣子：

各類前端組件化框架應當儘量以Web Components爲基石，它致力於組織這些Components與數據模型之間的關係，而不去關注某個具體Component的內部實現，好比說，一個列表組件，它究竟內部使用什麼實現，組件化框架實際上是沒必要關心的，它只應當關注這個組件的數據存取接口。

而後，這些組件化框架再去根據本身的理念，進一步對這些標準Web Components進行封裝。換句話說，業務開發人員使用某個組件的時候，他是應當感知不到這個組件內部究竟使用了Web Components，仍是直接使用傳統方式。（這一點有些理想化，可能並非那麼容易作到，由於咱們還要管理像import之類的事情）。

 

 

5. 高內聚

又是一個軟件工程的高頻詞！ 咱們將相關的一些功能組織在一塊兒，把一切封裝起來，而在組件的例子中，就多是相關的功能邏輯和靜態資源：JavaScript、HTML、CSS以及圖像等。這就是咱們所說的內聚。

這種作法將讓組件更容易維護，而且這麼作以後，組件的可靠性也將提升。同時，它也能讓組件的功能明確，增大組件重用的可能性。

6. 可組合

以前也討論過，基於組件的架構讓組件組合成新組件更加容易。這樣的設計讓組件更加專一，也讓其餘組件中構建和暴露的功能更好利用。

不管是給程序添加功能，仍是用來製做完整的程序，更加複雜的功能也能如法炮製。這就是這種方法的主要好處。

是否有必要把全部的東西轉換成組件，事實上取決於你本身。沒有任何理由讓你的程序由 你本身 的組件組合成你最驚歎的功能 ，乃至 最花哨的功能。而這些組件又反過來構成其餘組件。若是你從這個方法中獲得了好處，就千方百計地去堅持它。然而要注意的是，不要用一樣的方法把事情變得複雜，你並不須要過度關注如何讓組件重用。而是要關注呈現程序的功能。

 

 

7. Iframe  容器化

還記得iframe們嗎？咱們還在使用它們，是由於他們能確保組件和控件的JavaScript和CSS不會影響頁面。 Shadow DOM 也能提供這樣的保護，而且沒有iframe帶來的負擔。正式的說法是：

Shadow DOM的設計是在shadow根下隱藏DOM子樹從而提供封裝機制。它提供了創建和保障DOM樹之間的功能界限，以及給這些樹提供交互的功能，從而在DOM樹上提供了更好的功能封裝。

 

 

7.1.1.1. HTML導入

咱們長時間之前就能夠導入JavaScript和CSS了。 HTML導入功能提供了從其餘HTML文檔中導入和重用HTML文檔的能力。這種簡單性同時意味着能夠很方便地用一些組件構建另外一些組件。

最後，這樣的格式很理想，適合可重用組件，而且能夠用你最喜歡的包管理解決方案發布（例如： bower、 npm 或者 Component）。

 

8. 參考

組件化的Web王國 - 博客 - 伯樂在線.htm