riot.js 学習 [2] ミックスイン-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-01-16 16:01:51

オリジナル

1464 人が閲覧しました

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) に注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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