如何用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 );
 ...
 ..
 }
}

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

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web编程技术分享

用jQuery 动画函数 animate 模拟豌豆发射

36790
来自专栏JadePeng的技术博客

10 款实用的jquery插件

jquery 的流行造就了诸多令人称奇的插件,这里选出10款实用插件供大家参考使用。 本文翻译自国外技术博客,欢迎热心ITer参与我们的翻译工作,提供更多...

52170
来自专栏MixLab科技+设计实验室

开发笔记:基于Electon的图片采集工具

题图,由ACE Land 人工智能设计师赞助。 ? 人这一辈子没法做太多的事情, 所以每一件都要做得精彩绝伦。 你的时间有限, 所以不要为别人而活。 不要被教条...

417120
来自专栏Android开发经验

工作中一些细小的经验总结随时继续记录

21530
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

38740
来自专栏小狼的世界

使用OmniGraffle制作原型图

原型图设计是一个艺术创作的过程,所以我们应当使用能够提高工作效率、激发创作灵感的工具,让工具为创作服务,而不是为创作去学习如何使用工具。从这一点上说,我觉得Ma...

48630
来自专栏大数据钻研

前端面试那些坑

HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有...

36760
来自专栏IT平头哥联盟

曾经面试踩过的坑,都在这里了~

  前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机率较高的提问/笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对...

29800
来自专栏企鹅号快讯

前端工程师面试题汇总

作者:@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用...

32480
来自专栏李蔚蓬的专栏

10.1.5 布局优化利器之 Hierarchy Viewer

无论是哪本讲解布局优化的参考书,它们都不得不提到Hierarchy Viewer。不过,通常情况下,Hierarchy( 英['haɪərɑːkɪ])Viewe...

10830

扫码关注云+社区

领取腾讯云代金券