집 >웹 프론트엔드 >JS 튜토리얼 >riot.js 학습 [1] 맞춤 태그

riot.js 학습 [1] 맞춤 태그

黄舟원래의: 2017-01-16 15:59:441320검색

Riot.js의 가장 강력한 기능은 맞춤 태그입니다. 먼저 효과를 확인하기 위해 코드를 살펴보겠습니다.

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>

    <!-- 调用自定义标签 -->
    <timer start="10"></timer>

</body>

<!-- 最前面一定要有空格或TAB，留意它的type -->
<script type="riot/tag">
    <timer>
        <h3>Times: { index }</h3>
        this.index = opts.start || 0;

        var self = this;
        tick(){
            // 每个1秒，index自增
            this.index++;
            // 调用this.update更新UI【最欣赏这个了，能自己控制】
            this.update();
        }
        var timer = setInterval(this.tick, 1000);
    </timer>
</script>

<!-- 调用riot，启动自定义标签timer -->
<script type="text/javascript">
    riot.mount("timer");
</script>
</html>

효과는 다음과 같습니다. is +1] :

riot.js 학습 [1] 맞춤 태그

신규 사용자가 직면하게 될 함정에 대해 이야기해 보겠습니다.

script type=”riot/tag”

컴파일러 스크립트 유형="riot/tag"를 사용하여 모든 요소를 순회합니다. 스크립트에 src가 있으면 외부 파일이 로드됩니다. src가 없으면 스크립트의 내용이 컴파일됩니다.

PS: 스크립트에 작성된 내용은 공백이나 탭으로 시작해야 합니다. 바로 뒤에 "
내부 파서 관련입니다. [처음에는 꽤 헷갈렸는데...]

tick()

이 함수의 this 개체는 현재 사용자 정의입니다. 라벨의 컨텍스트는 xx(){}와 같이 선언된 함수인 한, 컨텍스트는 라벨의 컨텍스트로 지정됩니다

틱 함수는 this.tick
this.update

This.update(); UI 내용이 업데이트되기 전에 호출되어야 합니다.

다른 MV* 엔진 자동화가 없다고 느끼실 수도 있지만, 복귀를 수동으로 제어하는 것이 더 유연할 것입니다

opts

코드에 아주 이상한 부분이 있습니다 변수 opts:

[code]this.index = opts.start || 0;

실제로 해당 값은 사용자 정의 태그에 의해 전달된 속성인 this.opts입니다. 예:

[code]<timer start="10"></timer>

그러면 this.opts.start/opts.start는 10과 같습니다{ index }
riot.js는 간단한 표현식을 지원하는 강력한 값 읽기 방법입니다. .3차원 판단. 하지만 {}에는 큰따옴표 " 대신 작은따옴표 '를 사용해야 합니다. 그렇지 않으면 구문 분석 오류가 발생하기 매우 쉽습니다.
{ index || 10 } 처럼 { index > 10 ? 'old man' : 'little kid' },

외부 태그 정의 파일 참조 지원

[code]<script src="todo.tag" type="todo/tag"></script>

지원 가능

위의 예에 따라 todo.tag의 내용과 컴파일을 작성할 수 있습니다.

위는 riot.js의 내용입니다. 학습 [1] 커스텀 태그 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：JS 캐러셀 차트에 여유 기능 캡슐화다음 기사：JS 캐러셀 차트에 여유 기능 캡슐화

riot.js 학습 [1] 맞춤 태그

관련 기사