codecamp

MorJS aComponent/wComponent Mixins 支持

小程序在 Component 的维度上支持的 mixins,使用 mixins 能够解耦业务可复用逻辑,因此 MorJS 在 Component 的维度上也同样支持 mixins 的机制,使用上基本与 Component 一致,提供 { mixins: [mixin1, mixin2] }mixin 数组即可。有以下的注意点:

  • mixin 必须是一个对象,里面是希望给 aPage / wPage 合并的各种属性
  • dataObject 类型的对象属性均会合并
  • 生命周期的钩子函数会合并依次执行,aPage / wPage 选项的生命周期最后执行
  • Object 类型的属性(如:函数)会被同名的属性覆盖,aPage / wPage 选项的属性优先级最高
import { aComponent } from '@morjs/core'

const mixinA = {
  data: {
    x: 1
  },
  didMount() {
    console.log('mixina', 'didMount')
  },
  methods: {
    foo() {
      console.log('mixina', 'foo')
    }
  }
}

const mixinB = {
  data: {
    y: 2
  },
  didMount() {
    console.log('mixinb', 'didMount')
  },
  methods: {
    foo() {
      console.log('mixinb', 'foo')
    }
  }
}

aComponent({
  mixins: [mixinA, mixinB],
  didMount() {
    // 生命周期依次打印 mixina didMount -> mixinb didMount -> component didMount
    console.log('component', 'didMount')
    // 执行的是 mixinB 的 foo 方法
    this.foo()
    // { x: 1, y: 2, z: 3 } mixinA 和 mixinB 的 data 会合并
    console.log(this.data)
  }
})


MorJS aComponent/wComponent 生命周期拓展
MorJS aComponent/wComponent $eventListener 语法糖
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }