Maison > Article > interface Web > riot.js apprenant [2] mixin

riot.js apprenant [2] mixin

黄舟original: 2017-01-16 16:01:511524parcourir

Introduction à Mixin

Dans riot.js, il existe un concept très important, qui est mixin. Comme son nom l'indique, sa fonction approximative est "mixing".

Mélanger les propriétés et les méthodes de l'objet dans le contexte actuel. Une compréhension commune est qu'il s'agit de l'objet this.

Regardez un "marron" :

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

L'effet de course est le suivant :

riot.js apprenant [2] mixin

Vous voyez, à travers cela. mixin(mixinObj) ; Les propriétés et méthodes de window.mixinObj y sont toutes reflétées.

Remarque : mixin ne copie que superficiellement l'objet, donc lorsque plusieurs balises personnalisées partagent l'objet mixin, faites attention à l'influence mutuelle

Mixin déclaratif

paramètres mixin, pas seulement des objets , mais aussi des chaînes. Mais lorsque vous utilisez des chaînes, vous devez enregistrer un mixin dans riot à l'avance.

Méthode d'inscription :

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

Utilisation dans les balises personnalisées :

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

Les petits que vous rencontrez

Faites attention à la séquence numérique du mixin. Les attributs ultérieurs écraseront les attributs précédents

Les attributs du mixin écraseront même les attributs de ce

N'écrasez pas les propriétés et les méthodes fournies avec riot.js, telles que : opts, update, on, off, trigger, etc.

Ce qui précède est le contenu de riot.js apprendre [2] mixin, plus Pour le contenu associé, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：riot.js apprentissage [1] Balises personnaliséesArticle suivant：riot.js apprentissage [1] Balises personnalisées

Articles Liés

Voir plus