riot.js 학습 [2] 믹스인

黄舟원래의: 2017-01-16 16:01:511519검색

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>

작동 효과는 다음과 같습니다.

riot.js 학습 [2] 믹스인

이것을 통해 알 수 있습니다.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属性了

작은 함정

숫자에 주의하세요. 다음 속성은 이전 속성

을 덮어씁니다. mixin의 속성은 이

의 속성도 덮어쓰게 됩니다. opts, update, on, off, Trigger 등 riot.js에 포함된 속성과 메소드입니다.

위는 riot.js 학습 내용입니다[2] mixin, 더 많은 관련 컨텐츠 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

성명：

이전 기사：riot.js 학습 [1] 맞춤 태그다음 기사：riot.js 학습 [1] 맞춤 태그

riot.js 학습 [2] 믹스인

관련 기사