riot.js lernt [2] Mixin-js-Tutorial-php.cn

riot.js lernt [2] Mixin

黄舟

Freigeben： 2017-01-16 16:01:51

Original

1557 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Laufeffekt ist wie folgt:

riot.js lernt [2] Mixin

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"
});

Nach dem Login kopieren

Verwendung in benutzerdefinierten Tags:

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

Nach dem Login kopieren

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 (m.sbmmt.com)!