如何规划一个前端组件：单&复选按钮

一个自定义的单选和复选按钮，这其实就是一个前端组件。为什么它不被称为模块呢？因为它不处理数据，没有业务逻辑，它只是一个事实上的样式，在操作交互上，是一个开关类的东西。在规模上，几乎已经是一种最小粒度的组件。在视图层面上，它的渲染是独立于业务数据的。它是一个独立展示和交互的最小单元，所以非常的易于测试。这是它的静态的展现和特征。

在外部，它要有一些接口暴露出来，以供外部调用。这样可以适合多种多样的业务环境，而且这些接口最好是写在组件之外的配置config文件中，以回调函数的形式存在。当然，这样的结构有些过于偏向兼容性了，而且在结构上会复杂些。

它的生命周期一般来讲，会有：

1，初始化；

2，加载必要资源；

3，渲染前检查；

4，内部DOM渲染；

5，绑定事件监听；

6，添加到BODY中；

7，获取和更新数据；

8，删除事件监听、数据；

9，从页面中删除所有DOM节点；

10，删除对象；

在它的各个阶段，都应该有相应的方法，去启动相应的步骤，如果某一步返回false，则可以判断是哪一步出了问题，这样便于对组件整个生命周期进行内部控制和管理。

它的目录结构大体是这样：

www/component/customCheck
|--customCheck.css
|--customCheck.js
|--customCheck.tpl
|--customCheck.temp.data
|--test //测试
|--|--test.js
|--|--test.data

在调用上，一般采用实例化之后，以匿名函数传参的形式，

customCheck( $('#checkDiv'), {
 'id':'checkId',
 'class':'checkClass'
});

在调用的时候只是这么写就OK，但在此组件的整个生命周期之中，它的启动过程至少是这样，伪代码：

//1,2
var _customCheck = new customCheck();
_customCheck.beforeInit('init',function(){
 //3,4
 if( cssJs.load() ){
 return false;
 }
 if( htmlDom.load() ){
 return false;
 }
 _customCheck.start();
});
//5,6,7
_customCheck.afterInit('load',function(){
 eventList.forEach(function(){
 })
 .getData( dataUrl )
 .appendTo( DomEvent );
});

大家听到这里可能会有些晕，但是晕也要听，听不懂也要听。学习就是这样，必须要有一种啃硬骨头，打硬仗的勇气和决心。有同学可能会认为，老尚这里讲的不清楚，所以 我听不懂。那我告诉你，培训班根本就不会讲这些，这个层面上我不客气的说，那些培训班老师未必有我理解的深入。而那些理解前端组件生命周期的人，你指望他们像培训班老师那样给你讲到明明白白，那是不可能的。所以，先听，听不懂硬听。听了再说，以后慢慢理解。就这样，咱们继续进行啊。