您的位置：首页 > 大数据 > 物联网

riot.js学习【二】mixin

2015-06-11 20:37 232 查看

Mixin 介绍

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

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

看个“栗子”：

<!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>


运行效果如下：



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

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

声明式的mixin

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

注册方式：

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


在自定义标签中使用：

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


遇到的小坑

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

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

不要覆盖掉riot.js自带的属性和方法，例如: opts, update, on, off, trigger等
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航