前端组件“可编辑表格”,怎么设计才好呢?先得有思路
大家好,今天是0618,今天的先行者计划的主题是“可编辑表格”的第一次课。
既然是一个前端组件,那么就涉及到如何设计的问题。我们不是单纯的要实现一个可编辑表格的效果,而是要实践一个组件化的方案。
总体的方向:
第一,view层,需要分层设计;
第二,model层,需要让数据来控制view层;
思路的话,可以参考react的生命周期概念:
1,插入dom;
2,获得新数据,重新渲染dom;
3,删除dom;
咱们也一样给这三种状态各提供二种处理函数,
will是事前调用;
did是事后调用;
还要有公开出来的setget方法
那么画的结构图就是这样,
根据这个图,可以看出在本次课程中,我的思路是“重新造轮子”。为什么不选择开源的框架呢?因为我们做这个东西,是为了锻炼自己的组件设计能力,而不是要学习某个框架。当你能自己着手设计一个组件、一个库、一个框架的时候,你才会仔细的考虑这其中的许多问题。
那么,我们按着比较笨的思路来“想”这个组件吧,
首先,它每个表格td,至少有二个方法,
1,获得焦点;
2,失去焦点;
当触发1时,要调用'获取当前td数据'的方法;
当触发2时,要调用'提交新td数据'的方法;
而这些方法,每个td都要有,那只能是在生成dom的时候就绑定这些相关的方法了。
换个视角,更抽象一些来看待这些方法,
可以把它们暂且当成“回调”来看待,
就是“发生了什么之后,做什么”的方法。
在以前,这些方法基本都是命令式的,就是所谓的写死在js中。
但现在以ngvuereact等为代表的这些框架,它们的大方向都是把命令式的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>
今天主要是跟大家讲一下,如何去构思一个组件。刚开始的时候肯定是没什么想法,多想多思考,慢慢的就会有想法啦。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Java8新特性】03 Stream流式数据处理
- 慎用JSON.stringify
- 【Java8新特性】04 详解Lambda表达式中Predicate Function Consumer Supplier函数式接口
- ubuntu下的进程控制系统————Supervisor
- 如何高效、快速、准确地完成ML任务,这4个AutoML库了解一下
- [译]如何用 Typescript 写一个完整的 Vue 应用程序
- Docker上手系列:Docker入门hello world
- 前端应该知道的 HTTP 知识
- React 学习笔记(基础篇)
- 前端性能优化《一》——Chrome Performance 页面性能调试
- 【Vue 进阶】从 slot 到无渲染组件
- 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
- Vue 3 任意传送门——Teleport
- @JsonCreator自定义反序列化函数-JSON框架Jackson精解第5篇
- 不靠谱的 console