前言
现在随着互联网的高速发展，对于电子商务各个环节各个过程的效率也需要高速起来，当然也包括了作为重要信息入口的网站页面；逐步趋于个性化的频道、层出不穷的促销活动页，对于这些页面需求的快速响应与产出也成为了一种必需；而对于这种高速的相应，带来的是人力成本的提升，资源就成为了主要瓶颈，如何让少的资源来完成高效的相应呢？不管是频道还是活动，在一定场景下他们所用到的元素都是相对固定的，比如我们的博客编辑页面，它其实是由头部吊顶、头部导航、左侧功能菜单、主编辑功能区和底部链接块组成。那么我们可以根据不同的场景将这些可以共用的东西沉淀出来，用于后续页面的快速产出，于是就引出了页面组件化的概念。
组件化概念
组件化：将一整块业务或者系统，按照其功能的独立性，而拆分成各个独立的功能模块的过程；这些独立的功能模块就是组件。
现在很多的系统都引入了组件化的概念，在进行系统功能设计的时候尽量将功能模块设计的足够独立，这样对于系统功能的并行开发和功能的扩展性都会有良好的作用；比如很多的工作流系统、资质判定系统，都是将流程上的一个一个模块进行组件化的方式来开发，通过配置的方式将各个组件串联起来，形成一个可插拔式的工作流程，可以很好地响应需求的变更。
对于一个WEB页面的组件化来说，也是可以考虑从页面的组成来引入组件化的概念；WEB页面是由一定的布局结构来组成的；而针对于不同的页面，它所承载的页面结构其实是有规律可循的，比如我们的博客编辑页面，它其实是由头部吊顶、头部导航、左侧功能菜单、主编辑功能区和底部链接块组成，那博客内容展示页面，也是有头部吊顶和导航、底部连接块和功能菜单这几个模块的，那么基于组件化的思想，我们是不是可以将页面拆分成一个一个小的独立单元来进行开发，然后通过一定的方式来将这些组件按照需求组装成一个编辑页面或者展示页面呢？
页面组件化
要想知道如何将页面进行独立的模块划分，首先要了解页面是如何组成的；页面是有固定的编码结构的，如：<html><head></head><body></body></html>，html + css + js可以实现一个页面的制作，一些动态的页面可能还包括一些动态的元素标签，包括：php/asp/jsp等；那么要将页面进行模块化，页面必需遵循一定的结构，比如栅格化的布局结构
将页面布局固定之后，对于填充布局坑位的组件单元，也有一定的约束，因为一个组件单元就包含了一定的代码片段，不单单只包括了html，也包括了这个模块的样式和脚本，对于搭建一个页面所使用到的模块，可能一个模块会被多次使用到一个页面中，那么如何保证每一个模块间的脚本只会影响自己模块的操作呢？这就需要一定的脚本框架来进行脚本的初始化工作，保证每一个模块的脚本都能进行独立的初始化，互不干扰；这就引来了另一个问题，对于脚本框架，如今也是各式各样，不同的业务会使用不同的脚本框架，如：jquery/kissy/sea-js等，如何来对此进行区分呢？我们可以对组成页面的组件进行打标，根据不同的业务页面，其所对应的可使用组件只能应用到适合的页面中，以保证一个页面中不存在不同脚本框架的模块。
总结下来页面组件化所需要做的事情：
1. 页面布局规范化；
2. 定义组件所包含的内容(html代码片段、样式脚本)；
3. 组件脚本实例初始化；
4. 组件的多框架归类处理；
这仅仅是做到了页面的组件化，但是对于这些组件是否可以用在不同的场景或者页面，单单只做这么一点是不够的，我们可以想象一个组件可以被用到的某个地方时，哪些是需要修改的，哪些是可以共用的；比如博客编辑页面的左侧功能菜单，他提供了一种菜单的形式和菜单的具体数据，这种菜单形式是不变的，到博客展示页面，只是菜单的具体数据产生了变化，那么，我们可以把这种菜单的形式做成是一个组件，而这个菜单的具体数据作为这个组件的一种传入参数，最终展现出来的页面其实是结构与数据结合产生的结果；那么，在定义组件所包含的内容时，需要注意的就是，这个组件做包含的html只是组件的展现结构，具体的数据可以在这个组件使用到某个页面之后产出，然后通过一定的渲染机制来实现最终的代码实现，这个过程需要注意的点包括：
1. 组件代码定义模板；
2. 数据由应用时提供；
3. 模板与数据渲染引擎。
由上可以看出，组件其实是可以分成2个比较独立的部分，模板和数据，其实这两部分都是可以进行组件化的，前面讨论的是模板的组件化，数据的组件化需要基于数据的来源，如果数据已经是沉淀在系统中，数据也是可以进行组件化；然后将模板与数据进行一定规则的映射匹配来实现组装；这种模板与数据组件化的思想其实可以代替很多的纯粹做数据加工与展现的应用。
转载于:https://www.cnblogs.com/sunloc/p/3162746.html