先行者计划群视频 每周一课 -- 什么是前端组件？（文字简版）

在今天同学们发我的作业中，我给一个同学回复说，你这不是组件化，只是一个效果的实现。他问我，那还要什么呢？我不是特别理解。

今天咱们先聊一下，什么是组件。这个东西其实没有一个正式的定义，说什么什么样就是组件，别的样的不是组件。没有的，没有这样的一个说法，一般来讲，我个人认为有以下这几种情况，

1，着重于具体业务的封装，不强调复用性。就是比如一个大方法，大函数吧，一个动画，一个购物车，一个页面路由，这都是针对具体业务的，拿到其它网站就没法用了。这些对于业务的组件化封装，目的为了可维护性。

2，第二个就是对于页面UI结构的封装，强调可复用性，可移植性，并且要求随插随用，例如一些JQ插件之类的。组件还有许多不同的分类方法，因为而异。但这二大方向却是不变的。

总体来讲，组件，就是一种对于DOM结构的封装，使用形式就是对外公开一些自定义的标签，在内部通过tpl定义的HTML模板，通过JS控制内部资源依赖的一个包。

这不是定义，只是说，关于组件你可以这么理解。为什么说刚才那个同学的作业，只是一个效果呢。因为第一它完全没有可移植性；第二他没有对UI结构进行一个封装；第三它的也没什么内部可言，它的资源的依赖都是完全暴露在外的。简单来讲，没有把它包起来，自然就称不上组件。

组件一般来讲，还是比较强调复用性，主要从以下几点来考虑，

1，基础逻辑功能。例如字符串处理，去空格，转义；

2，公共样式，模板，什么bootstrap之类的

3，调用方式标签化

4，数据中间件

5，组件的核心是DATA

1，这种组件基本都是UI层面的，它一般由模板和函数组成。

2，模板，就是用HTML来拼成无数据时的页面DOM结构，然后用JS函数插入数据的方法，拼接HTML字符串来生成真正的HTML。这期间还有各种事件的自动绑定。操作DOM无非增删除改查这些重复，这些都要自动处理，当data变动时，DOM也要跟着变动。未来的大方向就是把对DOM的直接操作变为一种调用组件的配置项。

3，一个可复用性强的组件，它在使用之前必然要经过一个配置的过程，配置的就是它自身与所处的网页的数据之间的对应关系。然后按照各种设计，与加载的数据关联之后，再通过数据的变化来更新自身的DOM结构。这就是所以的mvvm，双向绑定。

从现在看未来，以后应该是页面模板化，加载的是模块和组件。模块和组件再来加载数据，数据变化后去重新生成模块和组件，这样的一个双向改变的过程。当然这是我个人看法。以后很可能很多时候是在写各种组件的配置。

4，如果同一个组件，在同一个页面中出现多次，那它的数据加载方式怎么解决？例如一个地址加载下载列表页，你一个页面有多个，在不刷新页面的情况睛，它们之间的数据一致性怎么解决？这些下拉列表之间如何通讯？不能每个组件发起一个AJAX请求，这就只能是加一个store的数据中间层。在DATA和VIEW之间，所有的component都通过它去加载数据，然后让store去和服务端同步数据

5，刚才我们提了组件有各种实现方式，但核心依然是，“组织view层和data层之间的对应关系”。而不是关注DOM结构的实现。组件不是一个下拉列表的另存为。