创建前端数据模型,vue开发必备__Vue.js__JavaScript__前端__NPM
发布于 3 年前 作者 banyungong 1318 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

后端的数据都是有对象的,那前端需不需要呢,非常需要!!!
其实,这个库,我们已经用了2年了。

我们将前端所有使用的业务数据模型都定义出来了。
那在实际应用中,有什么用处呢?
减少了无数的冗余代码,避免了非常多容易产生的bug。

我们已经没有出现过什么提交接口,日期忘记转换的问题了?
也没有出现过什么因为数据缺失,导致页面报错的问题,比如一些:{{user.org.title}}这种展示。

话不多说,把模型工具甩出来吧:

javascript model

通过以下方式即可安装使用

npm install js-model --save

分享一下链接地址:

同时,这里用到的日期格式工具是manba,日期format格式可以参考manba的文档。

其他先不说,先把我们的应用说一下吧。

以下场景使用vue为示例

场景1 :详情页面

原始页面

<script>
export default {
  data () {
    return {
      obj: null,
    }
  }
}
</script>

<template>
    <div>
        <span v-if="obj">{{obj.a}}</span>
        <span v-if="obj&&obj.a">{{obj.a.b}}</span>
        <span v-if="obj.c">{{obj.c}}</span>
    </div>
</tempalte>

问题:对象值初始定义欠缺。

使用model

Detail.js

export default new Model({
    a: {
        b: String
    },
    c: Number
})


<script>
import Detail from './Detail' 

let obj = Detail.parse({});
</script>

<template>
    <div>
        <span>{{obj.a}}</span>
        <span>{{obj.a.b}}</span>
        <span>{{obj.c}}</span>
    </div>
</tempalte>

其中

//obj的结果为
{
    a: {
        b: null
    },
    c: null
}

vue简单的demo: https://codepen.io/vvpvvp/pen/jpEjwW

场景2: 编辑数据

原始页面

<script>
let a = {int: 1}  
//使用这种方式赋值,vue会没有办法更新a.date, a.money这样的数据
</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

使用model

Edit.js

export default new Model({
    int: Number,
    date: {
        type: Date,
        format: 'YYYY-MM-DD'  //此处使用manba日期工具
    },
    money: {
        type: Number,
        unit: Model.W
    }
})


<script>
import Edit from './Edit' 
let a = Edit.parse({int: 1});  
//在vue的v-model或者其他地方,可以直接引用a.date等数据。

</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

其中

//a的结果为
{
    int: 1,
    date: null,
    money: null
}

场景3:数据转换

原始页面

<script>
//js
let a = {int: 1, date: 1522302335544, money: 10000};
if (a.data) {
    a.date = format(a.date); //为了编辑的展示    
}
if(a.money){
    a.money = a.money / 10000;
}
 //为了编辑的单位,顺便说一下,我们的金额在数据都是存储以元为单位的。

//提交的时候
if (a.int) {
    a.int = parseInt(a.int)
}
if (a.data) {
    a.date = new Date(a.date).getTime();  
}
if(a.money){
    a.money = a.money * 10000
}
//submit
</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>万
    </div>
</tempalte>

使用model

<script>
import Edit from './Edit';
let a = Edit.parse({int: 1, date: 1522302335544, money: 10000});

//提交的时候
let data = Edit.dispose(a);
</script>

//template
<div>
    <input v-model="a.int"/>
    <DatePicker v-model="a.date"/>
    <input v-model="a.money"/>万
</div>

其中

<script>
//a的parse结果为
=============
{
    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会通过输入框编辑变成String
</script>

看到上面三个场景,相信你应该清楚我们的javascript数据模型是做什么用的了。

js-model方法

  • parse:

    • 创建完整对象数据,让你摆脱{{a&&a.b?a.b.c:’’}}这种无聊的判断了
    • 数据标准化转换,当数据从后台传输过来的时候,日期是时间戳,金额是以元为单位,parse方法是帮你转换时间戳至时间字符串,金额以一定单位转换好,并且可以帮助你补全好所有的字段。
  • dispose:

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

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

最后

希望大家多多支持我们的组件库HeyUI

HeyUI,🎉UI Toolkit for Web, Vue2.0

http://www.heyui.top

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: vvpvvp 原文链接:https://juejin.im/post/6844903635537625095

回到顶部