riot.js apprenant [2] mixin-js tutoriel-php.cn

riot.js apprenant [2] mixin

黄舟

Libérer： 2017-01-16 16:01:51

original

1568 Les gens l'ont consulté

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>

Copier après la connexion

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"
});

Copier après la connexion

Utilisation dans les balises personnalisées :

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

Copier après la connexion

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) !