AJAX驱动的单页应用-Pub/Sub

前端之家收集整理的这篇文章主要介绍了AJAX驱动的单页应用-Pub/Sub前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有三样东西对AJAX驱动的单页应用很关键:时间委托、历史管理和通信模式(Pub/Sub)。


首先让我们介绍一下Pub/Sub是个什么东西。我们可以把这个东西叫做广播,大概的意思就是当你发布了一个东西,那么其他的人就都能收到了。你可以想一下,一般说来在单页应用中,是高度模块化。那么就会涉及到一个通信的问题,按照以往的方式,我们会声明一个特定的对象,这个对象是专门用来作为模块之间的通信的。在使用了Pub/Sub之后,模块之间的通信就会是直接的通信,这样就能使结构变得清晰。


PS:这种机制在angularjs中是集成的,angularjs中功能更全。


下面的代码可以直接集成到自己的项目中,也可以稍加改造:

varevents=(function(){
vartopics={};

return{
//接收
subscribe:function(topic,listener){
//首先从要接收的地方获取标示,在topics中生成队列
if(!topics[topic])topics[topic]={queue:[]};

//将监听器放到队列中
varindex=topics[topic].queue.push(listener)-1;
	
//提供一个用于移除的函数
return{
remove:function(){
deletetopics[topic].queue[index];
}
};
},//推送
publish:function(topic,info){
//如果没有要接收的地方,那么就不用推送了
if(!topics[topic]||!topics[topic].queue.length)return;

//挨个执行接收函数,如果没有要传的信息,那么就传一个空对象
varitems=topics[topic].queue;
items.forEach(function(item){
	item(info||{});
});
}
};
})();


当要推送一个消息的时候:

events.publish('/page/load',{
url:'/some/url/path'//发送的信息
});

第一个参数是标示,也可以说是订阅号。

接收的方式是这样的:

varsubscription=events.subscribe('/page/load',function(obj){	
//处理获得的信息
});

//也可以使用remove来取消接收
subscription.remove();

根据标示来监听数据

via:http://davidwalsh.name/pubsub-javascript

原文链接:https://www.f2er.com/ajax/164595.html

猜你在找的Ajax相关文章