Heim > Artikel > Web-Frontend > riot.js lernt [2] Mixin
riot.js lernt [2] Mixin
- 黄舟Original
- 2017-01-16 16:01:511461Durchsuche
Mixin-Einführung
In riot.js gibt es ein sehr wichtiges Konzept, nämlich Mixin. Wie der Name schon sagt, ist seine ungefähre Funktion „Mischen“.
Mischen Sie die Eigenschaften und Methoden des Objekts in den aktuellen Kontext. Ein allgemeines Verständnis ist, dass es sich um dieses Objekt handelt.
Schauen Sie sich eine „Kastanie“ an:
[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>Der Laufeffekt ist wie folgt:
![riot.js lernt [2] Mixin](https://img.php.cn//upload/image/596/910/903/1484553651536638.png "1484553651536638.png")
Sie sehen, dadurch. mixin(mixinObj) ; Die Eigenschaften und Methoden von window.mixinObj spiegeln sich alle darin wider.
Hinweis: Mixin kopiert das Objekt nur oberflächlich. Wenn also mehrere benutzerdefinierte Tags das Mixin-Objekt gemeinsam nutzen, achten Sie auf gegenseitige Beeinflussung.
Deklaratives Mixin
Mixin-Parameter, nicht nur Objekte , aber auch Streicher. Wenn Sie jedoch Strings verwenden, müssen Sie im Voraus ein Mixin in Riot registrieren.
Registrierungsmethode:
[code]// 如果要跨项目共享 mixin，可以考虑在riot里注册一个，而不是使用window级对象
riot.mixin("defaultData", {
author: "da宗熊",
email: "1071093121@qq.com"
});Verwendung in benutzerdefinierten Tags:
[code]this.mixin("defaultData"); // 现在this拥有了author和email属性了Die Kleinen, denen Sie begegnen. Fallstricke
Achten Sie auf die Zahlenfolge des Mixins.Die Attribute des Mixins überschreiben sogar die Attribute dieses
Überschreiben Sie nicht die Eigenschaften und Methoden, die mit riot.js geliefert werden, wie zum Beispiel: opts, update, on, off, trigger usw.
Das Obige ist der Inhalt von riot.js Lernen [2] Mixin, mehr Für verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website (www.php.cn)!