如何用JS写一个table组件 | 作业讲解

这个题目是作业区里的一道题，大家都完成的很好。论坛里的wenacy虽然没有成功的完成此作业，但这种努力的尝试才是最有价值的。

以下的内容是我个人的主观理解，偏见，阅读时请注意姿势。

组件，它是模块，但又不是模块。

在我的理解中模块有二种，一是组成页面的结构，它是不带逻辑的。例如一个HTML结构的空的窗口、容器。

第二种，从JavaScript的模块化开发角度来讲，一个function就是一个模块，例如：

function isGet(){
 //get...
}

这个函数就是一个JS模块，它是有逻辑的。

一个组件可以说它是一个JS模块，但一个JS模块，却未必是一个组件。这是因为但凡组件无论大小都是要实现页面上的一个功能，而一个完备的功能却会有好几个功能点、判断、方法来组件，这些东西是不能写在一个函数里的，而要拆分为好多函数、方法。所以你会看到一个组件里面包含了许多函数、方法或是许多JS文件。

这就引出下一个问题，组件的组织。也就是单一功能的再细分，用笔先写出一个个的点。。

就说这个 table组件吧，

--自定义行；

--自定义列；

--自定义左侧是否有单选按钮；

--自定义右侧是否有删除按钮；

--自定义每行是否可展开下拉；

--自定义每列标题是否有下拉按钮；

--自定义表头标题

...

..

用JS来表示：

var config={
 title:[
 {title:'员工', field:'yuangong'},
 {title:'姓名', field:'name'},
 {title:'部门', field: 'bumen'},
 {title:'状态',field:'userStat'}
 ],
 data:{
 data: getData()
 },
 isCheck:{
 isCheckStatus:1
 },
 isDel:{
 isDelStatus:0
 },
 isWidth:500
 ...
 ..
}

这个config定义了这个表格，它有4列：员工，姓名，部门，状态；它有几行要看getDate()返回多少数据了；ischeck是否有单选按钮；isdel是否有删除按钮，对，还要考虑是否分页。

然后定义一个函数，createTableUI()，，，

（写这东西真累，这么多字了，开头还没写完，还不一定有人爱看。还是写吐槽文舒服啊，一会就写完了)

简短节说啊，，把刚才的config进来，就这样：createTableUI(config)

然后createTableUI的伪代码：

createTableUI(c){
 var config = $.extend(true,{},c);
 var tab = $('<table>',{})...
 if( config.isWidth != undefined ){
 tab.css('width',...)
 }
 var tabBody = $('<tbody/>', {}).appendTo(tab)...
 for(var i in title){
 $('<tr/>',{}).html( title[i] ).appendTo( tabBody );
 ...
 ..
 }
}

反正就是这个套路，不写了，照这个情况写下去，得写明天去了。就现在文中这些内容基本也能明白组件是怎么个想法了。