Heim > Artikel > Web-Frontend > riot.js lernt [8] Beobachter

riot.js lernt [8] Beobachter

黄舟Original: 2017-01-16 16:22:201223Durchsuche

Weil Riot auf der Grundlage benutzerdefinierter Tags [Komponenten] entwickelt wird. Alle Eigenschaften und Methoden innerhalb des Tags sind privat und es ist schwierig, von außen auf den Tag-Inhalt zuzugreifen.

Wenn Sie auf den Inhalt im Tag zugreifen möchten, gibt es mehrere undankbare Methoden:

1. Fenster-Global-Variablen-Methode

[code]<script type="riot/tag">
    <todo>
        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";
        // window.TODO劫持现在的this对象
        window.TODO = this;
    </todo>
</script>

Vorteile:

Sehr gewalttätig und einfach, auf alle Inhalte des Tag-Inhalts kann über window.TODO zugegriffen werden.

Nachteile:

Nicht anwendbar, wenn die Seite mehrere identische Tags hat

2. riot.mount Rückgabewert

[code]<script type="riot/tag">
    <todo>
        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";
    </todo>
</script>
<script>
    // 这个todo，返回的是个数组！！！
    var todo = riot.mount("todo");
    // todo = [tag];
</script>

riot.mount Was ist zurückgegeben wird ein Array. Um den Inhalt des ersten „todo“-Tags zu erhalten, müssen Sie Folgendes tun: var todo1 = todo[0];

Vorteile:

Es gibt eine Möglichkeit dazu Unterscheiden Sie mehrere Tags

Nachteile:

hängt stark von der Reihenfolge ab, in der benutzerdefinierte Tags platziert werden. Und der Rückgabewert des benutzerdefinierten Tags, das über den Quellcode des Skripts zurückgeladen wird, ist null.

Nur durch manuelles Aufrufen der Lademethode und Kompilieren können Sie auf den Kontext zugreifen:

[code]riot.compile("todo.tag", function(){ 
    /*才能获取到返回的内容*/
    var todo = riot.mount("todo")[0];
});

riot.observable

Keines der oben genannten ist King In Riot, With Als integrierter Herausgeber müssen wir nur einfachen Code verwenden, um einen jQuery-ähnlichen Herausgeber zu erstellen:

[code]var opts = riot.observable({
    // some code...
});

Zu den durch riot.observable generierten Herausgebern gehören „on“, „off“, „trigger“, „one“ usw. Häufig verwendete Methoden [Studenten, die mit jq vertraut sind, sollten anhand des Namens wissen, was los ist.]

Nehmen Sie Opts als Beispiel:

[code]// 监听事件
opts.on("event1", function(data1, data2){
    // 监听event1事件
    // data1和data2是trigger传入的参数
    // data1 = 1, data2 = 2
    console.log(data1, data2);
});

// 发布一个事件
// 该事件带有 1和2 作为参数
// 上面的on("event1")的回调fn将会执行
opts.trigger("event1", 1, 2);

// 解除event1 的所有监听，第二个参数可选
// 如果有第二个参数[function]，则只解绑该函数
opts.off("event1");

// one与on类似，只是one如果执行过一次，就自动解除绑定
opts.one("event1", function(data1){
    console.log(data1);
});
opts.trigger("event1", 1, 2);

Die endgültige Ausgabe lautet:

[code]1 2
1

Riot empfiehlt die Verwendung opts und observable lösen das Problem der internen und externen Kommunikation. Nehmen wir ein Beispiel:

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Riot.js 事件监听</title>
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>
    <todo></todo>
</body>
<script type="riot/tag">
    <todo>
        <a href="javascript:;" onclick={ opts.login }>登录</a>

        opts.on("outside", function(value){
            console.log("outside value:" + value);
        });
    </todo>
</script>
<script type="text/javascript">
var opts = riot.observable({
    login: function(params){
        // 这里的this被todo更改了..
        opts.trigger("outside", "登录成功...");
    }
});
riot.mount("todo", opts);

</script>
</html>

Nachdem Sie zum Anmelden geklickt haben, ist der Effekt wie folgt:

riot.js lernt [8] Beobachter

Durch Ereignisüberwachung und -veröffentlichung können Sie Folgendes tun ein gutes Verständnis für interne und externe Kommunikationsthemen, gleichzeitig können Sie

den Zugriff auf bestimmte Daten weitgehend einschränken.

Opts sind jedoch weitgehend an Tags gekoppelt.

Das Tag muss wissen, dass opts „außen“ veröffentlicht und zuhört.

opts muss wissen, dass das Tag seine Anmeldemethode aufruft Gutes Team Norm, das wäre eine Katastrophe.

SO:

Egal welcher Modus oder welche Methode, es gibt seine eigenen anwendbaren Szenarien. Bei richtiger Anwendung ist es der letzte Schliff; bei falscher Anwendung ist es schwierig, auch nur einen einzigen Schritt zu erreichen. Denken Sie mehr nach, bevor Sie Maßnahmen ergreifen

Das Obige ist der Inhalt des Lernbeobachters von riot.js [8] 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：riot.js learning [7] Skript zum Erstellen von TagsNächster Artikel：riot.js learning [7] Skript zum Erstellen von Tags

In Verbindung stehende Artikel

Mehr sehen