oobe

oobe is javascript view model library, focus data, event, collection and validate method.

---

Introduction

When business logic and user interface are entangled, change is hard; when logic doesn't depend on UI, your interface becomes easier to work with. --backbone.js

Our goal is build a vue library that focus on model processing, Not like backbone.js and vue-mc that overly powerful library.

Although oobe is written for the vue.js, but only for optimized not a vue.js plugin, it can run include nodejs anywhere.

---

Javascript Class Instance Pattern

// User.js
class User {
    constructor(source = {}) {
        this.name = source.name || ''
        this.phoneNumber = source.phoneNumber || ''
    }
}

<template>
    <div>
        <input v-model="user.name">
        <input v-model="user.phoneNumber">
    </div>
</template>
<script>
    import User from 'User.js'
    export default {
        data() {
            return {
                user: new User({
                    name: 'admin'
                })
            }
        }
    }
</script>

---

Use oobe

We can use oobe to achieve the same effect:

// profile.js
export default {
    body() {
        return {
            name: '',
            phoneNumber: ''
        }
    },
    born(source = {}) {
        // If source haven't body definition the key, use default.
        return source
    }
}

// oobe.js
import Oobe from 'oobe'
import profile from './profile.js'
let oobe = new Oobe()
oobe.join('User' {
    sprites: { profile }
})

<template>
    <div>
        <input v-model="user.name">
        <input v-model="user.phoneNumber">
    </div>
</template>
<script>
    import oobe from './oobe'
    export default {
        data() {
            return {
                user: oobe.make('User', 'profile').$born({
                    name: 'admin'
                })
            }
        }
    }
</script>

---

Sprite is Not A Normal Instance

Make() will create an instance via object factory bind some method and status, no need to complex the inheritance trees to get these capabilities, we called this product sprite.

System metohds

let user = oobe.make('User', 'profile').$born()
console.log(user.$isChange()) // false
user.name = 'test'
console.log(user.$isChange()) // true

Status

let user = oobe.make('User', 'profile').$born()
console.log(user.$error) // undefined
user.$setError('error')
console.log(user.$error) // 'error'

Event

let user = oobe.make('User', 'profile')
user.$on('$ready', () => {
    console.log('ready')
})
user.$born() // 'ready'

Collection

let users = oobe.collection('User', 'profile')
let items = []

items.push({
    user: 'admin'
})
items.push({
    user: 'guest'
})

users.batchWrite(items)
console.log(users.items[0].name) // admin

For Ajax

Not like the new keyword we often used, Sprite complete construction needs to call $born(), because ajax have null, success, error three status, we can use control to change with the current state.

let sprtie = oobe.make('User', 'profile')
axios
    .get('./user')
    .then(result => sprite.$born(result.data))
    .catch(error => sprite.$setError(error))

Container And Sprite

Here are two example tables of the classification pattern determined from the database association design:

users

name	phoneNumber
admin	[phone]

user-metadatas

name	key	value
admin	age	25

Result data

Server side echo maybe the following two format:

User

{
    "name": "admin",
    "phoneNumber": "[phone]",
    "metadatas": {
        "age": 25
    }
}

Metadata

{
    "name": "admin",
    "age": 25
}

This is the same series just bifurcation to two instances, therefore we decide the following data structure:

let user = {
    body() {
        return {
            name: '',
            phoneNumber: ''
        }
    },
    refs: {
        metadatas: 'metadatas'
    }
}

let metadatas = {
    body() {
        return {
            age: null
        }
    },
    methods: {
        isAdult() {
            return this.age > 18
        }
    }
}

let container = {
    sprites: {
        user,
        metadatas
    }
}

let oobe = new Oobe()

oobe.join('User', container)

// If api result data like this:
let result = {
    name: 'admin',
    phoneNumber: '[phone]',
    metadatas: {
        age: 25
    }
}

let sprite = oobe.make('User', 'user').$born(result)

console.log(sprite.metadatas.$fn.isAdult()) // true

---

Learn More

Example

Document

Getting started(TW)

---

Installation

Web

<script src="./dist/index.js"></script>
<script>
    let oobe = new Oobe()
</script>

Webpack

$npm i --save oobe

import Oobe from 'oobe'
let oobe = new Oobe()

Node

$npm i --save oobe

let Oobe = require('oobe')
let oobe = new Oobe()

---

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
Edge	support	support	support	support	support	support

In theory, it can be supported by IE11, but the defaultView will be ignored it is adopted.

---

Other

medium

versions