简单粗暴，以小见大 -- 实现一个按钮的前端组件

按钮，一个button，一个div,一个a标签，都可以做成按钮。现在要把它做成一个前端组件，那前端组件是什么？

定义很多，我随便网上查一个，“指一些设计为通用性的，用来构建较大型的web应用的”。

组件化的一些特点：

按需加载只加载必要的前端资源

对应关系非常清晰组件所需要的前端资源都在同一目录，

职责明确且唯一，对应关系显著

这类定义网上有很多，说的不尽相同，但基本上都对。因为组件化的思想，就是分而治之。只要表达的是这个意思，那么就基本不会错。

////////

在现在的前端大环境下，为了适应复杂的页面业务需求，很多框架都选择了生命周期方式，来组织自己的事件和方法。就这样的，

一个组件的完整生命周期包括但不限于：

1、init，初始化组件根节点和配置

2、fetch [fɛtʃ]，加载 css 和 js 资源

3、render，内容渲染，

4、ready， 进行数据绑定等操作

5、update，数据更新

6、destroy [dɪˈstrɔɪ]，解除所有事件监听，删除所有组件节点

前端的完整的生命周期，我们自己手动现实现很困难，也没必要。但为了学习前端组件的开发，我们可以把组件的生命周期“简单粗暴”化的理解，就是“在不同阶段执行的js方法”。

怎么样，这个理解够简单粗暴吧。但它的好处在于，我们可以手动实现了。先分析一下吧，把这些生命同期的英文词，分散放置在“属性、事件、方法、数据、tpl、公共方法...”之中，就这样，

然后用我最喜欢的工厂模式：“构造器 + prototype”，来进行js的填空游戏。就这样的，

把那些方法分别挂在prototype上，这样，就实现了一个简单粗暴的前端组件。

////////

不管怎么样，从结构上它至少是有一些通用性的，不是么？刚开始的时候，不要追求精致与宏大。先实现一个小目标，写一个东西出来再说。不管它是不是前端组件，你都当它是前端组件来写，这样等积累到一定程度，你写出来的，自然就是前端组件了。