DuelJS 介绍

2018-06-24 02:17:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用JavaScript编写气泡

下一篇:Array,prototype.concat.apply与[].conat.apply.