自定义事件二

上篇文章中的自定义事件是采用观察者模式的思路来实现的。何谓观察者模式?

观察者模式(Observer)又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合。

举个例子,我想在网上买一个手机,但是买的时候发现缺货了,但是网站上可以添加到货通知,那么我填写了我的手机号,就相当于订阅了到货通知,如果这个商品到货了,卖家就会给我发送消息,告知我商品有货了,然后我就可以购买,不必我一直监视着这个商品的状态。

fire方法就是一个发布者,它负责将特定的消息发布出去,add可以看做是一个订阅,通过add方法,可以添加特定订阅,根据这些订阅来说明要触发哪些事件。

那么,到底怎么区分哪些模块是订阅消息,哪些模块应该是发布消息呢?

可以简单归纳为一句话,用户主动触发的部分,可以看做是观察者发布消息,被动触发的部分应该是去订阅消息。

例如一个简单的文章发布与删除的例子。

<button class="btn add" type="button">发布</button>
<button class="btn del hide" type="button">删除</button>
<textarea id="post" cols="30" rows="10"></textarea>
<article>
    <div class="content"></div>
</article>

包含发布删除与显示文章内容。当用户点击发布时,这是用户主动触发的事件,那么发布文章这个动作可以看做是观察者发布消息。

btnEl.addEventListener('click', function (e) {
    e.preventDefault();
    var postData = postEl.value;
    if (postData === '') return;
    eventUtil.fire('addPost', postData);
    postEl.value = '';
}, false);

然后文章内容的处理是被动触发的,那么文章处理的部分就可以添加文章发布的订阅,在文章发布的时候,就代表这个订阅就会被激活,在需要文章发布的地方添加addPost这个事件的订阅即可。

function addPostMessage(data) {
    contentEl.innerHTML = data;
    deleteEl.classList.remove('hide');
}

eventUtil.add('addPost', addPostMessage);

文章删除同理,不在赘述。

完整代码如下:

<body>
<button class="btn add" type="button">发布</button>
<button class="btn del hide" type="button">删除</button>
<textarea id="post" cols="30" rows="10"></textarea>
<article>
    <div class="content"></div>
</article>
</body>

<script src="./EventUtil.js"></script>
<script>
    (function (window, document) {

        var eventUtil = new EventUtil(),
            btnEl = document.querySelector('.btn.add'),
            deleteEl = document.querySelector('.btn.del'),
            postEl = document.getElementById('post'),
            contentEl = document.querySelector('.content');


        function addPostMessage(data) {
            contentEl.innerHTML = data;
            deleteEl.classList.remove('hide');
        }

        eventUtil.add('addPost', addPostMessage);

        function deletePostMessage() {
            contentEl.innerHTML = '';
            deleteEl.classList.add('hide');
        }

        eventUtil.add('deletePost', deletePostMessage);


        deleteEl.addEventListener('click', function (e) {
            e.preventDefault();
            eventUtil.fire('deletePost');
        }, false);

        btnEl.addEventListener('click', function (e) {
            e.preventDefault();
            var postData = postEl.value;
            if (postData === '') return;
            eventUtil.fire('addPost', postData);
            postEl.value = '';
        }, false);
    }(window, document));
</script>
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注