DuelJS 介绍

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（窗口）广播消息的功能，举例如下：

<script type="text/javascript">
    var channel = duel.channel('test');
    document.title = 'Master ' + duel.getWindowID();

    channel.on('demo_trigger', function (message) {
        console.info((new Date).getTime(), message)
    });

    setInterval(function () {
        document.title = (window.isMaster() ? 'Master ' : 'Slave ') + duel.getWindowID();
    }, 100);
</script>
<button onclick="channel.broadcast('demo_trigger', 'hello world')">
    channel.broadcast('demo_trigger', 'hello world')
</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