Rumah  >  Artikel  >  hujung hadapan web  >  riot.js学习【二】mixin

riot.js学习【二】mixin

黄舟
黄舟asal
2017-01-16 16:01:511518semak imbas

Mixin 介绍

riot.js中,有个很重要的概念,就是mixin,顾名思义,大约的作用就是“混合”。

把对象的属性、方法,混合进当前的context上下文哈,俗点的理解,就是this对象中。

看个“栗子”:

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Riot.js测试02, Mixin</title>
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>
    <todo title="da宗熊"></todo>
</body>
<script type="riot/tag">
    <todo>
        <h1>{ title || "" }</h1>
        <p>年龄: { this.getAge() } </p>
        <p>身高:{ height }cm</p>

        // 这里可以省略script标签
        this.title = opts.title || "";
        // 调用mixin,mixin拿到的,是window.mixinObj
        // 也可以混合多个 this.mixin(a, b...);
        this.mixin(mixinObj);
    </todo>
</script>
<script type="text/javascript">
    var mixinObj = {
        age: 10,
        height: 180,
        getAge: function(){
            return this.age;
        }
    };
    riot.mount("todo");
</script>
</html>

运行效果如下:

168.png

You see,通过 this.mixin(mixinObj); window.mixinObj的属性和方法,都体现在了this上。

注意: mixin只是将对象浅复制,所以多个自定义标签共享通过mixin对象时,小心相互影响

声明式的mixin

mixin的参数,不仅仅是对象,还能是字符串。但使用字符串时,必须事先在riot中,注册一个mixin。

注册方式:

[code]// 如果要跨项目共享 mixin,可以考虑在riot里注册一个,而不是使用window级对象
riot.mixin("defaultData", {
    author: "da宗熊",
    email: "1071093121@qq.com"
});

在自定义标签中使用:

[code]this.mixin("defaultData"); // 现在this拥有了author和email属性了


遇到的小坑

注意mixin的数序,后面的属性,会覆盖前面的属性

mixin的属性,甚至会覆盖掉this的属性

不要覆盖掉riot.js自带的属性和方法,例如: opts, update, on, off, trigger等

以上就是riot.js学习【二】mixin的内容,更多相关内容请关注PHP中文网(www.php.cn)!



Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn