这个题目是作业区里的一道题,大家都完成的很好。论坛里的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 );
...
..
}
}
反正就是这个套路,不写了,照这个情况写下去,得写明天去了。就现在文中这些内容基本也能明白组件是怎么个想法了。