DuelJS 是什么？

DuelJS是一个快速和小型的JavaScript库，可以帮助实现浏览器tab页主从关系的切换。使用它可以优化你浏览器和服务器之间的通信，以及你浏览器内部tab页之间的通信。

对于我而言，我关注的就是它可以帮助实现同域名下不同窗口（tab）之间通信，可以广播消息。

简言

DuelJS中的基本元素是channel。Channel为同一个站点的不同浏览器tab之间提供了一个特有的共享空间。

var channel = duel.channel('example'); // build your channel

每一个窗口只有连个可能的状态：核心方和从属方。核心方窗口是指当前活动的窗口（也就是获得焦点的窗口）。

检测当前窗口是否是核心方窗口的方法是：

window.isMaster()

你可以使用它来判断，并获取聊天信息，例如：

if (window.isMaster()) {
    updateChatWindow(); // user function
}

越多越好

你想要更多的功能吗？是的，我们是有的。广播功能是系统向所有channel（窗口）广播消息的功能，举例如下：

 1 <script type="text/javascript">
 2     var channel = duel.channel('test');
 3     document.title = 'Master ' + duel.getWindowID();
 4 
 5     channel.on('demo_trigger', function (message) {
 6         console.info((new Date).getTime(), message)
 7     });
 8 
 9     setInterval(function () {
10         document.title = (window.isMaster() ? 'Master ' : 'Slave ') + duel.getWindowID();
11     }, 100);
12 </script>
13 <button onclick="channel.broadcast('demo_trigger', 'hello world')">
14     channel.broadcast('demo_trigger', 'hello world')
15 </button>

功能

• 独立于其他的库（例如jQuery/Underscore等等）
• 完全兼容
• 容易使用
• 稳定而且经受过检验

支持Bower

通过Bower安装

bower install duel --save

支持NPM

通过NPM安装

npm install dueljs --save

ES6导入

如果你借助babel/webpack来使用ES6，你只需要像下面这样导入dulejs：

import duel from 'dueljs'

Online demo

在线示例

在线示例地址

文档

文档地址dueljs.readthedocs.org

TabNinja

现在你可以指定任何一个tab作为超级核心方tab。测试版本的插件已经可以安装，github地址是github.com/studentIvan/tabninja

bower install tabninja --save

参考资料

http://dueljs.studentivan.ru

http://dueljs.readthedocs.io/en/latest/getting_started.html

https://github.com/studentIvan/dueljs

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有