前言：
最近在工作中发现我们前端没有一个系统的体系去支撑，产生很多不必要的代码冗余，一些公共的视图模块重复开发，导致开发效率下降，最让我郁闷的是，前端开发好的静态页面给java开发去做业务逻辑处理，会彻底的把我们开发的页面结构改的惨目忍睹。这样的形式做项目在不去想点子优化做法，真不是个合格的程序员。
组件化形态：
组件化形态很多种，我个人理解为2个分支:
1.公共组件 （单独用js封装的一个视图功能的集合体，例如：富文本编译器，时间控件...）
2.业务组件 （根据业务场景所定义的页面组件块：例如：数据列表展示，条件搜索）
在上面的组件概念中继续深入定义
1.块组件：（块组件是一小块区域的组件化形态定义，且这块组件都存在公用性才能被提取成块组件。例如：按钮）
2.原子组件：（是块组件内部最小元素的定义，更直白的说就是HTML原始元素，例如<a>,<img>...）
从上面的概述，我们把组件化抽象出2种大分类，每种分类必然都包含了2类组件形态，我这样分是参考物理领域对物质组成而设计的，构成物质的微粒有分子、原子和离子，这个解释拿到组件化概念中是这样定义的（写一个组件定义公式）：
原子组件 = 原子 || 分子 || 离子
块组件 = 分子 + 原子 + 离子
业务组件 = 块组件 + N
公共组件 = 分子 + 原子 + 离子 + 块组件
从原子到组件群，层级归类，提取公用形成的组件化形态展示。
组件化的概念：
为什么有组件化的想法出来，我个人认为，在当今前端开发过程中，框架种类太多，对应的场景应用也不同，这样就把框架束缚了，不能适应多种场景的应用开发。没有一个前端框架能“容纳百川”，怎么才能让前端开发能够效率提升，适应多种场景开发呢？ 提取页面中的公共部分进行封装，重用，是独立的，不受场景的变化，依然运行流畅，功能，性能优越。业界定义这称之为“组件”，比如：富文本编译器，时间控件等，而组件化是让你在开发过程中自由的封装DOM区域，形成一个组件的方式去操作内容块的封装。还有用几段代码来呈现以下比较直观：