事件 PubSub
npm install @achrinza/event-pubsub
超轻快 用于节点和浏览器的可扩展的ES6+事件系统,在节点中工作的相同文件将在浏览器中工作而没有任何修改. 如果您必须支持旧浏览器, 您可以转录模块 .
方法
| 方法 | 参数 | 说明 |
|---|---|---|
| 打开 | 类型 :string,处理器 :function,一次:boolean | 将绑定 handler 函数到 type 活动。 碞钩 addEventListener 在浏览器中。 如果一次被设定为真实的话,在被调用一次后,手递者将被移除. |
| 一次 | 类型 :string,处理器 :function | 将绑定 handler 函数到 type 事件并解开 一个 执行。 碞钩 addEventListener 在浏览器中使用 once 选项集 |
| 关 | 类型/*数字 :string,处理器/*数字 :function | 将 无绑定 handler 从 type 活动。 如果 handler 实值 *,所有事件类型的处理器将被删除。 碞钩 removeEventListener 在浏览器中,但也可以删除该类型的所有事件处理器. |
| 发射 | 类型 :string, (中文(简体) ), ...data 参数 | 将呼叫所有 handler 绑定在 * 事件和事件 type 活动。 它会通过所有的 ...data arguments 给那些处理者 * 事件,第一个参数将是 type 您可以过滤事件 |
| 重设 | 删除所有类型事件,包括 * |
成员
| 成员 | 类型 | 说明 |
|---|---|---|
| 列表 | 对象 | 列出所有约束事件的代表,主要用于能见度. |
这个 * 事件类型
这个 * 将触发事件类型 任意 emit这些也先运行。 处理者 * 应期望第一个参数是: type 之后的所有参数都是数据参数.
地方网站
npm start 实际开始 a 节点- http- 服务器。所以,如果您想要快速链接到示例和测试网页,则本模块根部会有一个有链接的页面。 你可以通过去 本地主页 : http://localhost:8000 (英语)
如果您的路由器和防火墙没有屏蔽您的 IP/ ports, 您也可以去 http://[your-ip-here]:8000/ 在任何设备上,包括您的移动设备,只要它在同一网络上.
数字海洋静态App
我们使用免费的数字海洋静态Apps来托管本地服务器的版本. 这跟你从机器上开始的一样 也可以像CDN一样使用,因为它每次更新分支时都会自动从主/主重建. @achrinza/event-pubsub CDN 家 页:1
基本实例
//relative paths will let your code work in both node and the browser without transpiling unless you want to.
import EventPubSub from './node_modules/@achrinza/event-pubsub/index.js';
events=new EventPubSub
events.on(
'hello',
(data)=>{
console.log('hello event recieved ', data);
}
);
events.emit(
'hello',
'world'
);
基本连锁
events.on(
'hello',
someFunction
).on(
'goodbye',
anotherFunction
).emit(
'hello',
'world'
);
events.emit(
'goodbye',
'humans'
).off(
'hello',
'*'
);
基本事件发送和/或扩展活动
//relative paths will let your code work in both node and the browser!
import EventPubSub from './node_modules/@achrinza/event-pubsub/index.js';
class Book extends EventPubSub{
constructor(){
super();
//now Book has .on, .off, and .emit
this.words=[];
}
add(...words){
this.words.push(...words);
this.emit(
'added',
...words
);
}
read(){
this.emit(
'reading'
);
console.log(this.words.join(' '));
}
}
const book=new Book;
book.on(
'added',
function(...words){
console.log('words added : ',words);
this.read();
}
);
book.add(
'once','upon','a','time','in','a','cubicle'
);
严格类型检查
@achrinza/event-pubsub 使用该 strong-type 提供测试方法的类 全部 建在js 初选,物体,类, 甚至花花花公子 功能和发电机。 这应该有助于确保你的代码不会做出乎意料的事情.
对于节点
既然我们对节点和浏览器使用相同的文件,我们需要模仿一个制作 npm i @achrinza/event-pubsub 在示例文件夹中,请确定:
第一次运行 npm run emulate
然后运行以下任何示例
node ./example/basic.js
node ./example/miltiple.js
node ./example/extending.js
node ./example/once.js
对于浏览器
运行 npm start 这将自动运行 npm run emulate 你也一样.
那就去那边 本地服务器 :http://localhost:8000 从这里可以看到例子和测试. 还是直接去 本地实例 : http://localhost:8000/example/ (中文(简体) ). 它实际上将节点实例导入到浏览器中并运行,同样准确的文件,没有转录或自定义的浏览器代码. 如果你想转写,你可以.
我是如何模仿模块内部的制作装置的?
其实我很满意这有多容易 在您的项目中使用同类型的脚本, 请随意 。 您甚至可以复制粘贴并只需修改 repo/模块名称即可. 这是我的包裹的密码 使用qq很重要 否则您的命令会平行运行, 您真的需要它们进行解剖运行 .
之所以需要这样做,是因为我们在ES6+模块中使用了相对路径,允许相同的精确j在节点和浏览器中工作. 我们一直在等待的!
"scripts": {
"test": "npm run emulate && node ./test/CI.js",
"start": "npm run emulate && node-http-server port=8000 verbose=true",
"emulate": "npm i && copyfiles -V \"./!(node_modules)/*\" \"./**!(node_modules)\" \"./example/node_modules/@achrinza/event-pubsub/\" && copyfiles -V \"./node_modules/**/*\" \"./example/\" && copyfiles -V \"./!(node_modules)/*\" \"./**!(node_modules)\" \"./test/node_modules/@achrinza/event-pubsub/\" && copyfiles -V \"./node_modules/**/*\" \"./test/\""
},
用香草测试完成测试
@node-ipc/ vanilla- test 是一个非常甜美, 最小化的ES6+测试套件, 用于浏览器和节点。 你可以用 npm test
另外,如果运行,测试可以在浏览器中运行 npm start 然后,然后去 本地服务器 : http://localhost:8000并点击测试链接. 另外,请记住,您应该能够通过http://[您-ip:8000]访问它们,前提是您的纤维墙和路由器没有屏蔽您的ip或端口.
参见 C8 代码覆盖
节点香草测试截图
Chrome 香草测试截图
Chrome 示例截图
边缘示例屏幕截图
FireFox 夜行示例截图
截至2020年2月11日 仍然不支持私人田地 或方法在js班, 然而,夜建 包含在一面旗帜后。 随着私人领域和方法旗被设定成真,"火狐"夜行像魅力.
