前端组件化演进之路

组件

在一个页面中我们可以把页面的一部分拆成一个组件，可以是一个按钮或者是一个导航栏。在一开始编写代码的时候还没有组件这一说，慢慢地我们从开始编写面向过程的代码到面向对象的代码再到组件化的代码，一步步进化到组件。

面向过程

以一个Todo List为例：

代码示例：

这是一开始实现的jquery代码，将button和li的click事件的回调函数抽出来单独成为一个函数。当页面的代码量增长为上千行时，代码的维护性会很差，需要先理解上千行代码才敢继续增加代码。这时候可以用面向对象的编程方式来解决这个问题。

面向对象

将input和button拆成todoList对象，ul为todoItem对象；
html页面里面使用todoList对象：

todoList对象：

todoItem对象：

每个对象只管理自己的属性和方法，只做自己这个对象的dom渲染和绑定事件；各个对象之间不会互相影响，大大降低了耦合性。将页面上的两个部分拆成两个对象，那其实这两个对象就是两个组件。在对象的代码中有dom展示、有js逻辑代码,还可以在其中加入css样式，这就相当于事一个组件了。

jQuery实现组件化编程

在jquery类上扩展一个继承方法：

有一个组件类Component为父类，这个父类有init、render、bind的空方法：

紧接着在todoList和todoItem里去继承Component并且去覆盖父类里的render和bind方法，在子类的构造函数里去调用父类的构造函数。

React组件

从React官网上的截图我们可以看到代码中也有继承，也有render函数，其实在写组件的都是要去继承类并且去实现类里的方法，就是在写面向对象的代码。