利用Knockout來實現可重複利用的組件Component

在一個大型項目或者在一個公司的不一樣的web項目，一個可重複利用的同時能提供豐富互動的web組件的重要性不言而喻。一個良好設計的Web組件，不但可以減小開發時間，同時能夠保持最大的擴展性和維護性。這樣開發人員可以儘量的集中在商業邏輯設計以及基礎的組件開發上。這樣對公司來講，是一種技術的積累，對開發人員來講在開發組件的時候可以保持極大的熱情和動力同時減小複製粘貼的次數。

Knockout提供了2種調用組件的方法。

一種是Web-Component模式。好比一個針對表單的篩選功能的組件。

 <filters-component params="gridContainer:$component, vm: $root"></filters-component>

另外一種是動態的或者利用虛擬元素的模式。好比針對每一個數據類型，咱們有不一樣篩選的圖形界面和功能。

<!-- ko component: {name: uiComponentType,params: {filterObserver:$data, filterContainer:$component}} -->
<!-- /ko -->

第一種模式想必很熟悉，這就比如在Html增長了新的Tag. 第二種模式，實現了在客戶端依然可以動態調用或者生成不一樣組件以及功能的可能性。動態的靈活性大大增長了系統的功能和抽象性。

如今咱們就用require.js以及knockout來定一個組件。好比咱們的需求是一個相似Excel的表單的篩選功能，可是對不一樣數據類型，咱們須要有不一樣的邏輯符號。就像對數值類型，咱們有大於，小於，等於。對字符類型，咱們須要包含，起始於，結束於等等。對日期類型，有當前年份，當前月份以及開始和結束日期的自定義。那整個的實現想法就是，首先咱們有一個組件叫篩選容器, 它主要提供了基礎的功能，好比監控每一個過濾組件的用戶的輸入和選擇，針對全部過濾組件的基礎功能，好比重置，清除，管理當前的過濾組件。另外，針對每一個數值類型，咱們有不一樣的過濾組件。那整個大致的結構佈局就像下圖：

 

 每一個組件都位於一個獨自的文件夾裏，中間包括了ViewModel以及View。在filterContainerView.html裏面咱們就能夠動態調用不一樣過濾組件的組件。

x

<div class="col-xs-10 col-sm-10 col-md-10">
　　<ul class="list-inline">
　　　　<li>
　　　　　　<!-- ko component: {name: uiComponentType,params: {filterObserver:$data, filterContainer:$component}} -->
　　　　　　<!-- /ko -->
　　　　</li>
　　</ul>
</div>

　　

 一個良好的結構，一個良好的組件參數或者接口的設計決定了組件的質量和它的可重複利用性。