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

大家好,今天是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>

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-06-18

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

第一章:NodeJS 概述

Node 概述 什么是 Node Node.js® is a JavaScript runtime built on Chrome's V8 JavaScrip...

4449
来自专栏后端技术探索

php7和HHVM的性能之争

根据“TIOBE编程语言排行榜”(榜单虽然统计方式有局限,但是仍然不失为一个比较好的参考),2010年PHP最高曾经在世界编程语言中排名第三。可见,PHP语言在...

3142
来自专栏我是攻城师

程序员最恐怖的梦魇是什么?

2614
来自专栏Java成长之路

mo9 2年java面试总结

mo9是一家做数字货币交易所的公司,在4月份的时候自己去mo9参加了java开发的面试。mo9的面试更加注重基础,问了很多java基础方面的知识。下面将面试的一...

1092
来自专栏牛客网

腾讯一面应用开发

最遗憾的,叫写冒泡排序都能写数组溢出,非科班面对算法题真的紧张。凉凉。 面试官是做php的,我用java。 问了http和https的区别。 答: 后者是前者的...

3016
来自专栏FreeBuf

国产指纹库平台 – 天蝎指纹库

前 言 信息收集为渗透测试环节一个非常重要的阶段,它关系到后序列策划攻击的成功性。快速收集目标服务信息则需要测试人员熟练运用指纹识别技术。 指纹识别概念 组...

54610
来自专栏CSDN技术头条

【问底】徐汉彬:PHP7和HHVM的性能之争

【导读】徐汉彬曾在阿里巴巴和腾讯从事4年多的技术研发工作,负责过日请求量过亿的Web系统升级与重构,目前在小满科技创业,从事SaaS服务技术建设。最近,PHP7...

2395
来自专栏逍遥剑客的游戏开发

C#脚本实践(六): 脚本相对于C++的优势

5883
来自专栏java工会

依赖注入原理---IoC框架

2314
来自专栏况鹰的专栏

obs源码分析第二篇:庖丁解牛

上一篇《obs源码分析第一篇--踏石留印》简单介绍了obs的由来和工程构成,这一篇我将剖析一下obs二代的代码内部,就不来文艺气息了,直接上猛料。本文将按照数据...

1.7K0

扫码关注云+社区

领取腾讯云代金券