Riot.js riot.mixin源码解析

有时候不知道真相，不了解本质的人，是快乐的。而能够假装不知道真相，不了解本质的人，却是幸福的。《七月与安生》

介绍

riot.mixin()功能介绍：用于把一系列通用的方法【混入(minxin)】到你指定的tag中。譬如一个通用方法A，四个tag: B C D E，但是其中只有B C需要用到A，那么可以先在最顶层执行

riot.mixin({
    A: function() {...}
})

然后在B和C中执行

this.minxin('A')

方法一

方法二

demo

写个很简单的demo:

import riot from 'riot';
import './mixin.tag';
window.necooIndex = 0;
var OptsMixin = {
    on: function() {
        // 这个方法虽然和riot里tag实例上的on方法重合了，但是并不会复写它，因为是Object.defineProperty方法定义的方法(配置了)不可被修改。
    },
    init: function(opts) {
        this.on('updated', function() { console.log('Updated!') })
    },
    getOpts: function() {
        return this.opts
    },
    setOpts: function(opts, update) {
        this.opts = opts
        if (!update) this.update()
        return this
    }
};
riot.mixin('hello', OptsMixin);
riot.mount('#app', 'mixin-tag');

mixin.tag:

<mixin-tag>
    <div>mixin usage</div>
    // 这里表示把那个"全局变量"上的叫hello的对象里的方法拷贝到当前这个tag上，这样就可以执行this.getOpts了
    this.mixin('hello');
</mixin-tag>

代码轨迹图：

这里我觉得应该分为2部分：

第一部分：riot.mixin('hello', OptsMixin);

这里其实就是把对象先存到一个全局变量上，其中全局变量globals或者mixins的区别就是mixins多了一个__global_mixin属性：

存完之后：

第二部分：在mixin.tag中：this.mixin('hello');

注意

• riot.mixin有个顺序的问题，如果在mount的时候还没执行riot.mixin，那么后面mixin进去的方法在前面mount的那个tag是不能被访问到的。
• 如果mixin一个叫on/off/mount等方法进来是不能生效的，因为这是tag实例上的固有方法（Object.defineProperty定义），无法修改。
• mixin进去的对象中如果有一个方法名叫init的话，这个方法会在执行this.mixin的时候被自动执行。