ホームページ > 記事 > ウェブフロントエンド > riot.js 学習 [2] ミックスイン

riot.js 学習 [2] ミックスイン

黄舟オリジナル: 2017-01-16 16:01:511498ブラウズ

Mixin の紹介

riot.js には mixin という非常に重要な概念があり、その名前が示すように、そのおおよその機能は「ミキシング」です。

オブジェクトのプロパティとメソッドを現在のコンテキストに混ぜる共通の理解は、それが this オブジェクトであるということです。

「栗」を見てください:

[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>

操作の効果は次のとおりです:

riot.js 学習 [2] ミックスイン

this.mixin(mixinObj); を通じて、window.mixinObj のプロパティとメソッドがすべて this に反映されます。

注: Mixin はオブジェクトを浅くコピーするだけなので、複数のカスタムタグが mixin オブジェクトを通じて共有される場合、相互影響に注意してください

宣言型 mixin

mixin のパラメータはオブジェクトだけでなく文字列も含まれます。ただし、文字列を使用する場合は、事前にriotにmixinを登録する必要があります。

登録方法:

[code]// 如果要跨项目共享 mixin，可以考虑在riot里注册一个，而不是使用window级对象
riot.mixin("defaultData", {
    author: "da宗熊",
    email: "1071093121@qq.com"
});

カスタムタグでの使用:

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

小さな落とし穴があります

ミックスインの番号の順序に注意してください、後の属性は前の属性を上書きします

ミックスイン属性は、たとえそれが上書きされてもこの属性

opts、update、on、off、trigger など、riot.js に付属する属性とメソッドを上書きしないでください。

上記は riot を学習するための mixin です。 js [2] コンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：riot.js 学習 [1] カスタムタグ次の記事：riot.js 学習 [1] カスタムタグ

続きを見る

riot.js 学習 [2] ミックスイン

関連記事