riot.js 학습 [2] 믹스인-JS 튜토리얼-php.cn

riot.js 학습 [2] 믹스인

黄舟

풀어 주다： 2017-01-16 16:01:51

원래의

1464명이 탐색했습니다.

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)를 주목해주세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

riot.js 학습 [2] 믹스인