自定义事件二
上篇文章中的自定义事件是采用观察者模式的思路来实现的。何谓观察者模式？
观察者模式（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>
- 本博客所有文章除特别声明外，均可转载和分享，转载请注明出处！
- 本文地址：https://www.leevii.com/?p=1023