利用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>

　　

 一个良好的结构，一个良好的组件参数或者接口的设计决定了组件的质量和它的可重复利用性。