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

riot.js lernt [2] Mixin

黄舟

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

Original

1509 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 (www.php.cn)!

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

riot.js lernt [2] Mixin