组件化开发

1、组件

我们在项目开发过程中，会发现很多东西都是可以复用或者希望能够在应用运行过程中进行动态变化。传统的开发模式中我们需要把代码统一放在前端进行处理，如果需要变更的话可以对整个应用更新最新的版本进行升级，也可以对部分文件进行升级和增加。但这些需要很多工作量。有些场景下我们只是为了某一个活动或者某一件事情临时进行的调整，而这种调整有时是比较频繁的，那么全量升级和补丁升级都太重了，我们需要更轻量级的方案。组件化是一种非常合适的解决方案。组件化即是对某些可以进行复用的功能进行封装的标准化工作。组件一般会内含他的内部UI元素、样式和JS逻辑代码，它可以很方便的在应用的任何地方进行快速的嵌入。组件内部可以使用其他组件来构成更复杂的组件。

2、组件范例

我们通过一个范例来解释AppCan 的组件化模型。构建一个简单的组件并保存为component.html，如下图组件化开发 - 图1这是一个非常简单的组件，最外部采用一个div并使用data-component=”hello”为其定义了组件的名称。在div内部我们划分为样式区、DOM元素区和JS脚本区三个部分。样式区我们需要为DOM元素区的元素所使用的个性化样式进行配置，为了保证样式区的样式与其他组件或者应用内部的样式产生冲突，我们需要在样式命名前边加入[data-component=”hello”]进行标记。

注:我们可以在style标签里面加入 scoped属性例如，此时style中的类只会对其父元素即所包含的子元素起作用，而不用人为加上[data-component=”hello”]标记来限制。但是此功能大部分浏览器尚不支持。我们也可以通过Jquery.scoped.js等组件来弥补。

DOM元素区，我们根据组件的功能设计布局元素，这与我们平常的开发方式保持一致。在JS区，我们加入DOM元素区需要的用户交互行为和其他逻辑代码（数据、通讯等），为了保证JS区的变量不会与应用的变量产生冲突，我们可以使用(function($){…}){$}把组件的代码进行内含。那么如何在界面中引用组件呢？参看如下代码组件化开发 - 图2上述代码中，我们定义了一个组件的引入。通过为元素配置data-import来关联组件所在的HTML文件，把HTML文件中的代码插入到component元素内部。组件是支持嵌套的，我们可以参考如下范例组件hello(component.html)组件化开发 - 图3组件hello1(component1.html)组件化开发 - 图4我们在组件hello中引用了组件hello1,在最外面的容器我们应用了hello组件，当我们查看网页时，可以看到两个组件都显示在了屏幕上。如下图组件化开发 - 图5从上述范例可以看出，我们可以把某些需要经常变化的部分进行组件化封装，并部署于服务器上，当界面需要进行变化时，可以快速进行在后台进行更新，应用自动会完成界面的调整，提高适应性。