Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including mdel with all npm packages installed. Try it out:

var mdel = require("mdel")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mdel v5.0.0

数据管理器

mdel

npm package

数据管理器

安装

使用

import {Model} from 'mdel';

class UserModel extends Model{
    constructor(){
        super({
            uid:0
        });
    }
    login(){
        this.setData({
            uid:1
        })
    }
}

const userStore = new UserModel();
const unSubscribe = userStore.subscribe(function(){
    if(userStore.data.uid > 0 && userStore.prevData.uid === 0){
        console.log('您已登录');
    }
});
userStore.login();
unSubscribe();

  • es5
var Model = mdel.Model;
var userStore = createUserStore();

const unSubscribe = userStore.subscribe(function(){
    if(userStore.data.uid > 0 && userStore.prevData.uid === 0){
        console.log('您已登录');
    }
});

userStore.login();
unSubscribe();

function createUserStore() {
  var store = new Model({
    uid:0
  });
  
  store.login = function(){
    store.setData({
      uid:1
    });
  };
  
  return store;
}

在react中使用

详细文档 链接

  • 类组件
///list-model.js
import {Model} from 'mdel';

export default class ListModel extends Model{
  constructor(){
      super({
        loading:false,
        list:[]
      })
  }
  setLoading(status){
      this.setData({loading:status})
  }
  setData(data){
     this.setData({
        loading:false,
        list:data
     }) 
  }  
}

///login-log.jsx
import React from 'react'
import {observe} from 'mdel-react'
import ListModel from '../model/list-model'

@observe
class UserLoginLog extends React.Component{
    sUser = userStore;
    sList = new ListModel();
    
    async componentDidMount(){
        this.sList.setLoading(true);
        
        try{
            const data = await getRequest('/api/user....');
            
            this.sList.setData(data)
        }
        catch (e) {
          this.sList.setLoading(false)
        }
    }
    
    render(){
        if(this.sUser.data.uid < 1){
            return <div>你还没有登录</div>
        }
        
        if(this.sList.data.loading){
            return <div>loading</div>
        }
        return this.sList.data.list.map(function(item,index) {
          return <div key={index}>{item.date}</div>
        })
    }
}

export default UserLoginLog;

  • 无状态组件
import React from 'react'
import {observe} from 'mdel-react'

const LoginLogList = observe(function({sUser,sList}) {
   if(sUser.data.uid < 1){
        return <div>你还没有登录</div>
   }
   
   if(sList.data.loading){
        return <div>loading</div>
   }     
   return sList.data.list.map(function(item,index) {
        return <div key={index}>{item.date}</div>
   })
});

class UserLoginLog extends React.Component{
     sUser = userStore;
     sList = new ListModel();
     
     render(){
         return <LoginLogList sUser={this.sUser} sList={this.sList}/>
     }
}

export default UserLoginLog;

API

Model

const store = new Model(initData:object,name?:string = '')

数据模型

实例属性

name

返回名称(只读),在构造时定义

data

返回数据(只读)

  • 必须使用 setData 方法来修改data
  • 建议data的数据结构在初始的时候时确定
  • typescript中可通过泛型来约束data
class UserModel extends Model<IData>{}
prevData

返回修改前的数据(只读)

实例方法

setData
interface ISetData {
  (data: Partial<D>):void
}

设置数据,会 浅拷贝 到实例data中

subscribe
interface ISubscribe {
  (listener: () => void):IUnSubscribe
}

订阅数据的修改,返回取消订阅

getIsStore

interface IGetIsStore {
  (target:any):boolean
}

获取是否是数据容器,也就是数据模型的实例

更新日志

5.0.0

  1. 新增prevData,取消subscribe中prevData参数
  2. 新增setData方法,废弃change方法

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free