riot.js 학습 [8] 관찰자-JS 튜토리얼-php.cn

riot.js 학습 [8] 관찰자

黄舟

풀어 주다： 2017-01-16 16:22:20

원래의

1257명이 탐색했습니다.

라이엇은 커스텀 태그 [컴포넌트]를 기반으로 개발되기 때문이죠. 태그 내부의 모든 속성과 메서드는 비공개이므로 외부에서 태그 내용에 접근하기 어렵습니다.

태그의 콘텐츠에 액세스하려면 다음과 같은 몇 가지 방법이 있습니다.

1. Window 전역 변수 방법

[code]<script type="riot/tag">
    <todo>
        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";
        // window.TODO劫持现在的this对象
        window.TODO = this;
    </todo>
</script>

로그인 후 복사

장점:

매우 폭력적이고 단순하며, 태그 내용의 모든 내용은 window.TODO를 통해 액세스할 수 있습니다.

단점:

페이지에 동일한 태그가 여러 개 있는 경우 적용 불가

2. riot.mount의 반환 값

[code]<script type="riot/tag">
    <todo>
        <h1>{ title }</h1>

        this.title = opts.title || "da宗熊";
    </todo>
</script>
<script>
    // 这个todo，返回的是个数组！！！
    var todo = riot.mount("todo");
    // todo = [tag];
</script>

로그인 후 복사

riot.mount에 의해 반환됨, 첫 번째 "todo" 태그의 내용을 가져오려면 다음을 수행해야 합니다. var todo1 = todo[0];

장점:

구별하는 방법이 있습니다. 다중 태그

단점:

사용자 정의 태그가 배치되는 순서에 대한 의존도가 높습니다. 그리고 스크립트의 src를 통해 다시 로드된 사용자 정의 태그의 반환 값은 null입니다.

로딩 메소드를 수동으로 호출하고 컴파일해야만 컨텍스트에 액세스할 수 있습니다:

[code]riot.compile("todo.tag", function(){ 
    /*才能获取到返回的内容*/
    var todo = riot.mount("todo")[0];
});

로그인 후 복사

riot.observable

위는 Riot에서는 왕이 아닙니다. Publisher에서는 간단한 코드만 사용하여 jQuery와 같은 게시자를 생성하면 됩니다.

[code]var opts = riot.observable({
    // some code...
});

로그인 후 복사

riot.observable을 통해 생성된 게시자는 on, off, Trigger, one과 같은 일반적인 메소드를 갖습니다. , 이름을 보면 무슨 일이 일어나고 있는지 알아야합니다].

opts를 예로 들어 보겠습니다. 각 방법에 대한 간략한 설명은 다음과 같습니다.

[code]// 监听事件
opts.on("event1", function(data1, data2){
    // 监听event1事件
    // data1和data2是trigger传入的参数
    // data1 = 1, data2 = 2
    console.log(data1, data2);
});

// 发布一个事件
// 该事件带有 1和2 作为参数
// 上面的on("event1")的回调fn将会执行
opts.trigger("event1", 1, 2);

// 解除event1 的所有监听，第二个参数可选
// 如果有第二个参数[function]，则只解绑该函数
opts.off("event1");

// one与on类似，只是one如果执行过一次，就自动解除绑定
opts.one("event1", function(data1){
    console.log(data1);
});
opts.trigger("event1", 1, 2);

로그인 후 복사

최종 출력은 다음과 같습니다.

[code]1 2
1

로그인 후 복사

Riot는 opts와 observable을 사용하여 다음을 수행할 것을 권장합니다. 내부 및 외부 의사소통 문제를 해결합니다. 예를 들어보겠습니다.

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Riot.js 事件监听</title>
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>
    <todo></todo>
</body>
<script type="riot/tag">
    <todo>
        <a href="javascript:;" onclick={ opts.login }>登录</a>

        opts.on("outside", function(value){
            console.log("outside value:" + value);
        });
    </todo>
</script>
<script type="text/javascript">
var opts = riot.observable({
    login: function(params){
        // 这里的this被todo更改了..
        opts.trigger("outside", "登录成功...");
    }
});
riot.mount("todo", opts);

</script>
</html>

로그인 후 복사

로그인을 클릭한 후의 효과는 다음과 같습니다.

riot.js 학습 [8] 관찰자

이벤트 모니터링 및 게시를 통해 좋은 결과를 얻을 수 있습니다. 내부 및 외부 의사소통 문제에 대해 문의하는 동시에

특정 데이터에 대한 액세스를 크게 제한할 수도 있습니다.

그러나 opts는 대부분 태그와 결합됩니다.

태그는 opts가 "외부"를 게시하고 수신한다는 것을 알아야 합니다.

opts는 태그가 로그인 메소드를 호출한다는 것을 알아야 합니다.

좋은 팀 Norm, 이것은 재앙이 될 것입니다.

SO:

어떤 모드나 방법에 관계없이 적용 가능한 시나리오가 있습니다. 올바르게 사용하면 마무리가 되고, 잘못 사용하면 한 단계도 달성하기 어렵습니다. 행동하기 전에 더 생각해보세요

위 내용은 riot.js 학습[8] 옵저버 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!