在一個大型項目或者在一個公司的不同的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>
一個良好的結構，一個良好的組件參數或者接口的設計決定了組件的質量和它的可重復利用性。