淘宝小程序使用mixins

以下都是前边在学习实践中查阅和总结得到的结论，可能会有差错，如果各位遇到的话还希望大家不吝赐教。

mixins

何为mixins

mixins是Extjs4的新特性，直译就是“混入”，可以复用一些公共逻辑的代码，从而减少代码量。

开发者有时可能会实现多个自定义组件，而这些自定义组件可能会有些公共逻辑要处理，应用提供 mixins 用于解决这种情况。

mixin在javascript里可以看作是一种从别的对象"借用"功能的方法。每一个新定义的对象都有一个 prototype属性，其他的对象就可以从这里"借用"功能。这里的功能可以是一个属性，也可以是一个方法。——cnblogs Mr 布鲁斯

机制

本质上类似于import一个js类，生命周期初始化顺序为 page(onLoad)—> mixins(onInit) —> components(onInit)

构造

与组件的js类似，拥有data、onInit和deriveDataFromProps等生命周期、method等。基本上就可以当成component来用啦！

使用示例

官方文档
我自己的测试demo目录结构如下

• components
• • testComponent
• • • testComponent.js/.axml/.acss/.json
• • testComponent2
• • • testComponent2.js/.axml/.acss/.json
• • • mixinTest.js
• • mixinTest
• • • mixinTest.js
• pages
• • index
• • • index.js/.axml/.acss/.json

// mixinTest.js
export default {
  data: {
    mixinData: 'mixinData',
    counter: 3
  },
  onInit(){
    console.log('init');
  }, 
  deriveDataFromProps(nextProps){},
  didMount(){},
  didUpdate(prevProps,prevData){},
  didUnmount(){},
  methods: {
  	onTapHandler() {
      const {counter} = this.data;
      this.setData({
        counter: 1 + counter
      })
      console.log('onTapHandler', this.data.counter);
    },
  },
};

// testComponent.js
import mixinTest from '../mixinTest/mixinTest';
  const initialState = {
  data: {
    isLogin: false,
    componentCounter: 0
  },
};
const defaultProps = {
  props: {
    age: 30,
  },
};
Component({
  mixins: [
    mixinTest,
    initialState,
    defaultProps,
    // methods
  ],
  data: {
    name: 'alipay'
  },
  props: {},
  onInit() {
    console.log('component init')
  },
  methods: {
    componentTap () {
      const {counter, componentCounter} = this.data;
      const {counter:mixinCounter} = mixinTest.data;
      console.log(counter + 1, mixinCounter, componentCounter + 1);
      this.setData({
        counter: counter + 1,
        componentCounter: componentCounter + 1
      })
    }
  },
});

<!-- testComponent -->
<view>
  <test-component2 />
  {{name}}: {{age}}:counter:{{counter}}
  <view onTap="onTapHandler" style="width:100vw;height:40rpx;background:royalblue;">tap place</view>
  <view onTap="componentTap"  style="width:100vw;height:40rpx;background:rosybrown;">component place</view>
</view>

其他js就是在onInit和onLoad里加入了console.log，界面如下


可以看到，执行初始化的顺序是 onLaunch(app.js) -> onLoad(page/index.js) -> onInit(mixins component) -> onInit (component)
另外，在onTapHandler和componentTap点击事件中可以看到:

1. mixin中的变量较为独立，混入后外部更改同个变量名的值并不会影响其模板中的值。
2. 可以直接调用mixin中的函数，十分方便。