Back-end data are objects, that front-end need not need it, very need!! In fact, we’ve been using this library for two years now.

We defined all the business data models used by the front end. How does that work in practice? Countless redundant code has been reduced and a lot of bugs have been avoided.

We have not had any problems with the submission interface and date forgetting to convert? There were no errors due to missing data, such as: {{user.org.title}} display.

Without further ado, throw out the model tool:

javascript model

You can install it in the following ways

npm install js-model --save
Copy the code

Share the link address:

  • npm: js-model
  • github: vvpvvp/model

At the same time, the date format tool used here is MANBA, and the date format can be referred to the document of MANBA.

  • npm: manba
  • github: vvpvvp/manba

But first of all, let’s talk about our application.

The following scenario uses VUE as an example

Scenario 1: Details page

The original page

<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>
Copy the code

Problem: Lack of initial definition of object value.

Using the model

Detail.js

export default new Model({
    a: {
        b: String
    },
    c: Number
})
Copy the code
<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>
Copy the code

Among them

// the result of obj is
{
    a: {
        b: null
    },
    c: null
}
Copy the code

IO/VVPVVP /pen/…

Scenario 2: Editing data

The original page

<script>
let a = {int: 1}  
// Using this method of assignment, vUE will have no way to update data such as A. date and A. money
</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>wan</div>
</tempalte>
Copy the code

Using the model

Edit.js

export default new Model({
    int: Number.date: {
        type: Date.format: 'YYYY-MM-DD'  // Use the manBA date tool here
    },
    money: {
        type: Number.unit: Model.W
    }
})
Copy the code
<script>
import Edit from './Edit' 
let a = Edit.parse({int: 1});  
// In vue's V-model or elsewhere, you can directly reference data such as a.date.

</script>

<template>
    <div>
        <input v-model="a.int"/>
        <DatePicker v-model="a.date"/>
        <input v-model="a.money"/>wan</div>
</tempalte>
Copy the code

Among them

// the result of a is
{
    int: 1.date: null.money: null
}
Copy the code

Scenario 3: Data transformation

The original page

<script>
//js
let a = {int: 1.date: 1522302335544.money: 10000};
if (a.data) {
    a.date = format(a.date); // For editing purposes
}
if(a.money){
    a.money = a.money / 10000;
}
 // For editing units, by the way, our amounts in data are stored in units of pixels.

// When submitting
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"/>wan</div>
</tempalte>
Copy the code

Using the model

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

// When submitting
let data = Edit.dispose(a);
</script>

//template
<div>
    <input v-model="a.int"/>
    <DatePicker v-model="a.date"/>
    <input v-model="a.money"/>wan</div>
Copy the code

Among them

<script>
// The parse result of a is= = = = = = = = = = = = = {int: 1.date: "2018-03-29".money: 1} = = = = = = = = = = = = =// When submitting
let data = Edit.dispose(a);
// Remove null values, convert standardized data according to format, and more configuration options are available.
{int: 1, date: 1522302335544, money: 10000}
{int: "1", date: null, money}
// The int above will be edited into a String by the input box
</script>
Copy the code

Seeing the three scenarios above, you should have a good idea of what our javascript data model does.

Js – model method

  • parse:

    • Create complete object data that lets you get rid of {{a&&a.b? A.B.C: “}}
    • When data is transferred from the background, the date is a timestamp and the amount is in yuan. The parse method converts the timestamp to the time string, the amount is converted in a certain unit, and it can help you complete all fields.

  • dispose:

    • Convert dates to timestamps, amounts to dollar amounts, standardize data formats, and delete empty data before you send it to the background.

    Example: Dispose converts the value modified from input to String.

The last

We hope you can support our component library HeyUI

HeyUI, 🎉UI Toolkit for Web, Vue2.0

www.heyui.top