suchen

Heim >Web-Frontend >js-Tutorial >riot.js lernt [1] Benutzerdefinierte Tags

riot.js lernt [1] Benutzerdefinierte Tags

黄舟
黄舟Original
2017-01-16 15:59:441317Durchsuche

Die leistungsstärkste Funktion von Riot.js sind benutzerdefinierte Tags. Nehmen wir zunächst einen Code, um den Effekt zu sehen: 

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>

    <!-- 调用自定义标签 -->
    <timer start="10"></timer>

</body>

<!-- 最前面一定要有空格或TAB，留意它的type -->
<script type="riot/tag">
    <timer>
        <h3>Times: { index }</h3>
        this.index = opts.start || 0;

        var self = this;
        tick(){
            // 每个1秒，index自增
            this.index++;
            // 调用this.update更新UI【最欣赏这个了，能自己控制】
            this.update();
        }
        var timer = setInterval(this.tick, 1000);
    </timer>
</script>

<!-- 调用riot，启动自定义标签timer -->
<script type="text/javascript">
    riot.mount("timer");
</script>
</html>

Der Effekt ist wie folgt [Jede Sekunde wird der Wert von mal ist + 1]:

riot.js lernt [1] Benutzerdefinierte Tags

Lassen Sie uns über die Fallstricke sprechen, auf die Neulinge stoßen:

script type=“riot/tag“

Der Compiler durchläuft alle Elemente mit dem Skripttyp = „riot/tag“. Wenn das Skript über src verfügt, wird die externe Datei geladen. Wenn kein src vorhanden ist, wird der Inhalt im Skript kompiliert.

PS: Der im Skript geschriebene Inhalt muss mit einem Leerzeichen oder Tabulator beginnen. Wenn direkt darauf ein „
Dies hängt mit dem internen Parser zusammen [Es war beim ersten Mal ziemlich verwirrend...]

tick()

Das Objekt this dieser Funktion ist die aktuelle Anpassung Der Kontext des Etiketts, solange die Funktion wie xx(){} deklariert ist, wird der Kontext als Kontext des Etiketts angegeben

Auf die Tick-Funktion kann über this.tick zugegriffen werden

this.update

This.update(); muss aufgerufen werden, bevor der Inhalt der Benutzeroberfläche aktualisiert wird.

Sie haben vielleicht das Gefühl, dass es keine andere MV*-Motorautomatisierung gibt, aber die manuelle Steuerung der Rückkehr wird flexibler sein

wählt

Im Code gibt es etwas sehr Seltsames Variable opts:

[code]this.index = opts.start || 0;
Tatsächlich ist ihr Wert this.opts, das vom benutzerdefinierten Tag übergebene Attribut.
Zum Beispiel: 
[code]<timer start="10"></timer>
Dann ist this.opts.start/opts.start gleich 10
{ index }
riot.js ist eine leistungsstarke Methode zum Lesen von Werten, die einfache unterstützt Ausdrücke Formel, ternäres Urteil. Aber es gibt eine Falle. In {} müssen Sie einfache Anführungszeichen ' anstelle von doppelten Anführungszeichen verwenden, sonst kann es sehr leicht zu Analysefehlern kommen.
Wie { index || 10 }, { index > 10 ? 'alter Mann': 'kleines Kind'}, kann

unterstützen und die Referenzierung externer Tag-Definitionsdateien 

[code]<script src="todo.tag" type="todo/tag"></script>

unterstützen

Der Inhalt und die Zusammenstellung von todo.tag können gemäß dem obigen Beispiel geschrieben werden.

Das Obige ist der Inhalt von riot.js lernen [1] Benutzerdefinierte Tags, mehr. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)



Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kapselung der Beschleunigungsfunktion im JS-KarusselldiagrammNächster Artikel：Kapselung der Beschleunigungsfunktion im JS-Karusselldiagramm

In Verbindung stehende Artikel

Mehr sehen