[Открытый исходный код] Выпущен Tencent omi-mp-create

Минимальная, но деликатная структура апплета, почти нулевое вмешательство в апплет→ Гитхаб

Как и omio, omi-mp-create использует obaa в пакетах omi для отслеживания изменений данных и автоматического обновления представлений. По сравнению с ранее выпущенным westore нет необходимости в diff, после изменения данных автоматически вылезет кратчайший путь setData, и производительность будет на более высоком уровне.

Освоение omi-mp-create за 5 минут

API

create.Page(option)Создать страницу
create.Component(option)Создание компонентов
create.mitt()Отправка событий и слушатели
create.emitterОтправка событий и слушатели
this.oDataМанипулировать данными страницы или компонента (представление будет обновляться автоматически)
this.storeМагазин, внедренный страницей, страницей и всеми компонентами страницы можно получить

настоящий бой

страница

import create from '../../utils/create'

const app = getApp()

create.Page({
  store: {
    abc: '公共数据从页面注入到页面的所有组件',
    //事件发送和监听器,或者 create.mitt()
    emitter: create.emitter
  },
  data: {
    motto: 'Hello World',
    userInfo: { },
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  ...
  ...
  onLoad: function () {

    ...
    ...
    ...
     //监听事件
    this.store.emitter.on('foo', e => console.log('foo', e) )
    
    setTimeout(() => {
      this.oData.userInfo = {
        nickName: 'dnt',
        avatarUrl: this.data.userInfo.avatarUrl
      }
    }, 2000)


    setTimeout(() => {
      this.oData.userInfo.nickName = 'dntzhang'
    }, 4000)
  }
})

Здесь следует отметить, что oData должен напрямую манипулировать данными, определенными в data, для непосредственного обновления представления, напримерnickNameОн не определен в начале, и его обновление не приведет к обновлению представления.Только после выполнения следующего кода никнейм может быть обновлен, потому что изменения в userInfo будут автоматически отслеживать все атрибуты в userInfo:

this.oData.userInfo = {
  nickName: 'dnt',
  avatarUrl: this.data.userInfo.avatarUrl
}

Конечно, вы также можете объявить это непосредственно в данных:

  data: {
    motto: 'Hello World',
    userInfo: { nickName: null },
    ...

компоненты

import create from '../../utils/create'

create.Component({
  data: {
    a: { b: Math.random() }
  },

  ready: function () {
    //这里可以或者组件所属页面注入的 store
    console.log(this.store)
    //触发事件
    this.store.emitter.emit('foo', { a: 'b' })
    setTimeout(()=>{
      this.oData.a.b = 1
    },3000)
  },
})

множество

import create from '../../utils/create'
import util from '../../utils/util'

create.Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.oData.logs = (wx.getStorageSync('logs') || []).map(log => {
      return util.formatTime(new Date(log))
    })

    setTimeout(() => {
      this.oData.logs[0] = 'Changed!'
    }, 1000)

  }
})

Здесь следует отметить, что изменение длины массива не приведет к обновлению представления, вам нужно использовать метод размера:

this.oData.yourArray.size(3)

разное

this.oData.arr.push(111) //会触发视图更新
//每个数组的方法都有对应的 pureXXX 方法
this.oData.arr.purePush(111) //不会触发视图更新

this.oData.arr.size(2) //会触发视图更新
this.oData.arr.length = 2 //不会触发视图更新

синтаксис рукавицы

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

Подробности смотрите на mitt github.