前端组件“可编辑表格”，怎么设计才好呢？先得有思路

大家好，今天是0618，今天的先行者计划的主题是“可编辑表格”的第一次课。

既然是一个前端组件，那么就涉及到如何设计的问题。我们不是单纯的要实现一个可编辑表格的效果，而是要实践一个组件化的方案。

总体的方向：

第一，view层，需要分层设计；

第二，model层，需要让数据来控制view层；

思路的话，可以参考react的生命周期概念:

1，插入dom；

2，获得新数据，重新渲染dom；

3，删除dom；

咱们也一样给这三种状态各提供二种处理函数，

will是事前调用；

did是事后调用；

还要有公开出来的set\get方法

那么画的结构图就是这样，

根据这个图，可以看出在本次课程中，我的思路是“重新造轮子”。为什么不选择开源的框架呢？因为我们做这个东西，是为了锻炼自己的组件设计能力，而不是要学习某个框架。当你能自己着手设计一个组件、一个库、一个框架的时候，你才会仔细的考虑这其中的许多问题。

那么，我们按着比较笨的思路来“想”这个组件吧，

首先，它每个表格td，至少有二个方法，

1，获得焦点；

2，失去焦点；

当触发1时，要调用'获取当前td数据'的方法；

当触发2时，要调用'提交新td数据'的方法；

而这些方法，每个td都要有，那只能是在生成dom的时候就绑定这些相关的方法了。

换个视角，更抽象一些来看待这些方法，

可以把它们暂且当成“回调”来看待，

就是“发生了什么之后，做什么”的方法。

在以前，这些方法基本都是命令式的，就是所谓的写死在js中。

但现在以ng\vue\react等为代表的这些框架，它们的大方向都是把命令式的dom操作变为“配置式”的。

就是你希望某个东西生成之后，它有什么方法可以用，那么都是写在这个组件之外的相关的config的配置项之中的。

就这样，

<script type="text/javascript">
 var config = {
 callback:{
 a:function(){
 console.log('a')
 },
 b:function(){
 console.log('b')
 },
 c:....
 }
 }
 new 组件().set( config );
 </script>

xMind图中的结构已经画的差不多了，

接下来可以写一些js来体现思路。

咱们的组件在生成之后，必然要有一个在页面上的“落脚点”，

那么就是要有一个div做为初始的组件容器，

<script type="text/javascript">
 var config = {
 el:"#idname",
 table:[3,4], //3行4列
 title:['a','b','c','d']
 }
 new TableObj(config);//初始化时
</script>

<!-- js 在new 的过程中只做了三件事

1，创建一个新对象

3，将这个新对象的 proto 指向 构造函数的 prototype 成员对象

4，将 构造函数的 this 指针 指向 这个新创建的对象 -->

////////

接下来设计它的代码的结构，在使用的时候肯定是要new一个对象出来，

所以它得有一个构造器，

<script type="text/javascript">
 function TableObj( _config ){
 <!--  -->
 this.mounting = function..
 this.updating = function..
 this.unmounting = function..
 this.init(_config);
 }
 TableObj.prototype = {
 init:function( _con ){
 createTable( _con.table )
 }
 createTable:function(){
 }
 }
</script>

今天主要是跟大家讲一下，如何去构思一个组件。刚开始的时候肯定是没什么想法，多想多思考，慢慢的就会有想法啦。