//jslet a = { a: 1, ds: [{a: {c: "12"}}]}//template {{a.a}} {{a.b.c}} {{d.a&&a"> javascript数据模型,前台开发必备 - 送码网

javascript数据模型,前台开发必备

  • 时间:2018-06-23 23:38 作者:前端小学生 来源:前端小学生 阅读:436
  • 扫一扫,手机访问
摘要:以下场景用vue为示例场景1 :介绍页面,展现非常多信息。原始页面pre class="brush:js;toolbar:false">//jslet a = { a: 1, ds: [{a: {c: "12"}}]}//template {{a.a}} {{a.b.c}} {{d.a&&a

以下场景用vue为示例

场景1 :介绍页面,展现非常多信息。

原始页面

pre class="brush:js;toolbar:false">//jslet a = { a: 1, ds: [{a: {c: "12"}}]}//template
{{a.a}} {{a.b.c}} {{d.a&&d.a.b}} {{d.a&&d.a.c}} {{e.a&&e.a.b}}

问题:后台不传递没有值的数据,或者者深层的对象没有值。

用model

pre class="brush:js;toolbar:false">//jslet Detail = new Model({ a: Number, b: { c: String }, ds: [ { a: { b: String, c: String } } ], es: [ { a: { b: String } } ]})let a = Detail.parse({a: 1});//a的结果为============={ a: 1, b: { c: null}, ds: [ { a: { b: null, c: "12" } } ], es: []}=============//template
{{a.a}} {{a.b.c}} {{d.a.b}} {{d.a.c}} {{e.a.b}}

场景2: 编辑数据

原始页面

pre class="brush:js;toolbar:false">//js//返回数据1let a = {int: 1} //用这种方式赋值,vue会没有办法升级a.date这样的数据,我不知道大家是怎样处理的。//返回数据2let a = {int: 1, date: 1522302335544, money: 10000};a.date = format(a.date); //为了编辑的展现a.money = a.money / 10000; //为了编辑的单位,顺便说一下,我们的金额在数据都是存储以元为单位的。//以上转换还需要判断能否为空值//提交的时候//以下转换还需要判断能否为空值a.int = parseInt(a.int)a.date = new Date(a.date);a.money = a.money * 10000submit//template

用model

pre class="brush:js;toolbar:false">//jslet Edit = new Model({ int: Number, date: { type: Model.DATE, format: 'YYYY-MM-DD' //此处用manba日期工具 }, money: { type: Model.MONEY, unit: Model.W }})//返回数据1let a = Edit.parse({int: 1});//a的结果为============={ int: 1, date: null, money: null}=============//在vue的v-model或者者其余地方,能直接引使用a.date等数据。//返回数据2let a = Edit.parse({int: 1, date: 1522302335544, money: 10000});//a的结果为============={ int: 1, date: "2018-03-29", money: 1}=============//提交的时候let data = Edit.dispose(a);// 将空值删除,按照格式转换出标准化的数据,还有更多的配置选项能选择。// 假如数据无变更,将转换为:{int: 1, date: 1522302335544, money: 10000}// 假如编辑的数据为{int: "1", date: null, money},将转换为:{int: 1}// 上面的int会通过输入框编辑变成Stringsubmit//template

看到上面两个场景,相信你应该清楚我们的javascript数据模型是做什么使用的了。 以下,我们就开始详情了。

js-Model

通过以下方式就可安装用

pre class="brush:js;toolbar:false">npm install js-model --save

分享一下链接地址:

  • npm: js-modelgithub: vvpvvp/model

同时,这里使用到的日期格式工具是manba,也是我自己写的哦,编写format格式能参考manba的文档。

  • npm: manbagithub: vvpvvp/manba

方法

parse

当数据从后端传输过来的时候,日期是时间戳,金额是以元为单位,数据是不全的,由于只传递了有值的数据。 parse方法是帮你转换时间戳至时间字符串,金额以肯定单位转换好,并帮你补全好所有的字段。

补全了所有数据,让你摆脱{{a&&a.b&&a.b.c}}这种无聊的判断了

dispose

当你需要把数据传送至后端之前,把日期转换成时间戳,把金额转换为以元为单位的数额,标准化数据格式,删除为空的数据。

例:通过input修改的数值为String, 通过dispose转换成数字格式。

javascript数据模型,前台开发必备

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部