Publish Subscribe Pattern Javascript
Chào mọi người lâu quá mới viết bài lại hôm nay mình sẽ giới thiệu cho các bạn về cách xậy dựng 1 pub/sub events trong javascript.
Đầu tiên mình sẽ giời thiệu 1 chút về pub/sub pattern.
Đây là flow mô tả về pub/sub nhìn theo hình vẽ trên thì chúng ta có thể thấy rõ là khi chúng ta send out 1 thông tìn nào đó thì những Subscriber đều nhận được hết vậy ở đây Subcriber là gì và Publisher là gì.
+ Pusblisher: Là một đối tượng send out ra những thông tin của mình và muốn cho những người xung quanh mình biết.
+ Vi dụ: cũng như tính năng follow của Facebook khi bạn đang follow 1 fanpage nào đó thì những thông tin mà người chủ fanpage send out ra thì những người follow xung quanh đều được notification.
Vậy ở đây chúng ta tạm hiểu Pusblisher là người sẽ send oout những thông tin.
+ Subcriber: Là đối tượng nhận thông tin từ publisher.
+ Vi dụ: Cũng như tính năng follow Facebook ở trên mình đã nói thì khi có người send thì phải có người nhận, vậy Subcriber ở đây chúng ta hiểu như là những người follow fanpage.
Vậy là mình đã giới thiệu 1 chút khai niệm về pub/sub và bây giờ chúng ta sẽ bắt đầu xây dựng 1 pattern đơn giản về nó.
var pubsub = {
queue: {},
subscribe: function(eventName, fn) {
this.queue[eventName] = this.queue[eventName] || [];
this.queue[eventName].push(fn);
},
unSubscribe: function(eventName, fn) {
if(this.queue[eventName]) {
for(var i = 0; i < this.queue[eventName].length; i++) {
if(this.queue[eventName][i] === fn){
this.queue[eventName].splice(i, 1);
break;
}
}
}
},
publish: function(eventName, args){
if(this.queue[eventName]){
this.queue[eventName].forEach(function(fn){
fn(args);
});
}
},
};
Ở đây mình xây dựng 1 object gồm có các đối tượng sau.
- queue: Đây là nời mình store những events ==> (Subcriber).
- subscribe: Đây là method mình dùng để đăng ký event ==> (Subcriber).
- unSubscribe: Đây là method mình dùng để hủy event ==> (Subcriber).
- publish: Đây là method mình dùng để send out những thông tin của mình đến nhữngSubcriber.
Vậy là mình đã tạo xong pub/sub và bây giờ chúng ta bắt đầu sử dụng nó.
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<head>
<script src="pubsub.js"></script>
</head>
<body>
<script>
pubsub.subscribe("notify", function(args){
console.log(args, " user1!");
});
pubsub.subscribe("notify", function(args){
console.log(args, " user2 !");
});
pubsub.publish("notify", "Chào Bạn");
</script>
</body>
</html>
Mình hi vọng bài viết này sẽ giúp được cho máy bạn, nếu có chỗ nào không hiểu cần hoi thì các bạn cứ comment bên dười bài viết mình sẽ giải thích cụ thể hơn.
Nguồn: http://c-sharp.vn/
Comments
Post a Comment