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 :
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édentsN'é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) !