Mixin 소개
riot.js에는 매우 중요한 개념이 있는데 이름에서 알 수 있듯이 대략적인 기능은 "mixing"입니다.
객체의 속성과 메서드를 현재 컨텍스트에 혼합합니다. 일반적인 이해는 이것이 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>
작동 효과는 다음과 같습니다.
이것을 통해 알 수 있습니다.mixin( mixinObj); window .mixinObj의 속성과 메서드가 모두 여기에 반영됩니다.
참고: mixin은 객체를 얕게 복사만 하므로 여러 맞춤 태그가 mixin 객체를 공유하는 경우 상호 영향에 주의하세요.
선언적 mixin
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.js 학습 내용입니다[2] mixin, 더 많은 관련 컨텐츠 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!