diff --git a/.gitignore b/.gitignore index ab05030..75981ef 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,77 @@ node_modules -*.log \ No newline at end of file +*.log + +### SublimeText template +# cache files for sublime text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# workspace files are user-specific +*.sublime-workspace + +# project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using SublimeText +# *.sublime-project + +# sftp configuration file +sftp-config.json + +# Package control specific files +Package Control.last-run +Package Control.ca-list +Package Control.ca-bundle +Package Control.system-ca-bundle +Package Control.cache/ +Package Control.ca-certs/ +bh_unicode_properties.cache + +# Sublime-github package stores a github token in this file +# https://packagecontrol.io/packages/sublime-github +GitHub.sublime-settings +### Windows template +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk +### JetBrains template +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + +.idea/ + + +## File-based project format: +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + diff --git a/README.md b/README.md index 7d7eb57..183c8d5 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ### In a browser -Download [eventbus.min.js](https://raw.githubusercontent.com/krasimir/EventBus/master/lib/eventbus.min.js) and add it to your page. +Download [eventbus.min.js](https://raw.githubusercontent.com/bonashen/EventBus/master/lib/eventbus.min.js) and add it to your page. ### In Node @@ -27,6 +27,17 @@ var EventBus = require('eventbusjs'); // @callback - function // @scope - the scope where the @callback is defined EventBus.addEventListener(type, callback, scope) +//or +EventBus.on(type,callback,scope) +//or +EventBus.bind(type,callback,scope) +//or +EventBus.once(type,callback,scope) +//or +//support regex and multi event types +EventBus.on(['click','change',/\w_click/],function(event,value) { + +}); ``` ### `removeEventListener` @@ -36,6 +47,10 @@ EventBus.addEventListener(type, callback, scope) // @callback - function // @scope - the scope where the @callback is defined EventBus.removeEventListener(type, callback, scope) +//or +EventBus.off(type,callback,scope) +//or +EventBus.unbind(type,callback,scope) ``` ### `hasEventListener` @@ -45,6 +60,8 @@ EventBus.removeEventListener(type, callback, scope) // @callback - function // @scope - the scope where the @callback is defined EventBus.hasEventListener(type, callback, scope) +//or +EventBus.has(type,calback,scope) ``` ### `dispatch` @@ -54,24 +71,67 @@ EventBus.hasEventListener(type, callback, scope) // @target - the caller // @args - pass as many arguments as you want EventBus.dispatch(type, target, args ...) +//or +EventBus.trigger(type,target,args...) +//or +EventBus.emit(type,target,args...) ``` -### `getEvents` +### redirect +```javascript +//@origin is event type or event type array +//@endpoint is target event type or event type array +//@condition redirect condition check +//@processor reset trigger endpoint event arguments +EventBus.redirect(origin,endpoint); -For debugging purpose, it prints out the added listeners. +EventBus.redirect(origin,endpoint,condition); -```js -EventBus.getEvents() +EventBus.redirect(origin,endpoint,condition,processor); + +``` +### flow +```javascript +EventBus.flow({from:'click',to:'onClick'}); +EventBus.flow({from:'click',to:'onClick'},{from:'onClick',to:'labelClick'}); +EventBus.flow({from:'click',to:'onClick'},{from:'onClick',to:'labelClick',processor:function(event) { + event.setEmitArgs(EventBus.slice(arguments,1)); +}}); +EventBus.flow({from:'click',to:'onClick'},{from:'onClick',to:'labelClick',where:function(event) { + return event.getLevel()>0;//only receive redirect +}}); ``` + ## Usage ```js function myFunction(event) { console.log("myFunction type=" + event.type); + //can stop event + event.stop(); + //can obtain listener arguments + console.log(event.args); + + //can access scope by this + console.log(this); + } -EventBus.addEventListener("my_function_event", myFunction); +var scope ={ + +}; +EventBus.addEventListener("my_function_event", myFunction,scope,1,2,3...); +//or +EventBus.on("my_function_event",myFunction,scope,1,2,3...); + +// dispatch event EventBus.dispatch("my_function_event"); +//or +EventBus.trigger("my_function_event"); +//or +EventBus.emit("my_function_event"); +//or +EventBus("my_function_event"); ``` ## Keeping the scope @@ -141,3 +201,126 @@ var handler = function() { EventBus.addEventListener('EXAMPLE_EVENT', handler); EventBus.removeEventListener('EXAMPLE_EVENT', handler); ``` +## Example of usage EventBus.redirect +```javascript +var TestClass1 = function() { + this.className = "TestClass1"; + this.doSomething = function(event, param1, param2) { + console.log(this.className + ".doSomething"); + console.log("type=" + event.type); + console.log("params=" + param1 + param2); + console.log("coming from=" + event.target.className); + } +}; + +var TestClass2 = function() { + this.className = "TestClass2"; + this.ready = function() { + EventBus.dispatch("custom_event", this, "javascript events", " are really useful"); + } +}; + +var t1 = new TestClass1(); +var t2 = new TestClass2(); + +EventBus.redirect("custom_event","ready"); + +EventBus.on("ready",t1.doSomething,t1); + +t2.ready(); + +``` +## Example of usage EventBus.flow +**flow** method like **redirect**,this method objective for quick and intuitive configuration event flow. +```javascript + +var printEventStack = function (event) { + var p = event; + console.log("==>current stage:",event.type," event id:",event.id); + console.log("event flow :",event.flow.getEventIdsPath()); +}; + +EventBus.on("start",function(event) { + console.log("The game is start..."); + }) + .on("chase",function(event) { + console.log("overtaken"); + printEventStack(event);//event flow : ready#1012==>start#1013==>chase#1015 + EventBus.emit("overtaken"); + }) + .flow( + {from:"ready",to:"start"}, + {from:"start",to:"take-flight"},{from:"start",to:"chase"}, + {from:"overtaken",to:"end"} ) + .on("end",function(event) { + printEventStack(event);//event flow : ready#1012==>start#1013==>chase#1015==>overtaken#1016==>end#1017 + console.log("The game is end."); + }); + +EventBus.emit("ready"); + +``` + +## Example of Error event handling +focus all error event handling. +```javascript +EventBus.on(EventBus.DEFAULT.ERROR_EVENT_TYPE,function(event,error,listener,triggerArguments) { + console.log(error); +}); + +EventBus.on("click",function(event) { + throw "We are not ready!"; +}); + +EventBus.emit("click"); +``` + +## Example of usage event object +For debugging purpose, print event objects tree. +```javascript +EventBus.redirect("click","onClick"); +EventBus.on("onClick",function(event) { + var e = event; + while(e){ + console.log(e.getLevel()," event id:",e.id," event object:",e); + e.stop(); // stop event dispatch. + e = e.flow.getClosestEvent();//get prior event. + } +}); + +EventBus.emit("click"); +``` + +## Example of usage EventBus.plugin +EventBus support define plugin. +```javascript +EventBus.plugin(function(eBus) { + eBus.fn.newFeature = function() { + return this; + }; + + //define static method + eBus.newStaticMethod = function() { + + }; + +}); +``` + +## Example of usage EventBus aspect +EventBus support before after and around aspect. The aspect code from dojo/aspect module. +```javascript +EventBus.plugin(function(eBus){ + //advice EventBus emit + eBus.before("emit",function(event){ + if(event=="ready") + return eBus.slice(arguments).concat([{name:"new object"}]);//append new object to emit + }); +}); +//aspect utils example +var scope = {name:"bona",sayHello:function(message){console.log(this.name,message)}}; +var handler = EventBus.aspect.before(scope,"sayHello",function(message) { + return [[",",message,"!"].join("")]; +}); +scope.sayHello("hello world"); +``` \ No newline at end of file diff --git a/example/browser/example.html b/example/browser/example.html index 44aae0b..4cbc546 100644 --- a/example/browser/example.html +++ b/example/browser/example.html @@ -5,10 +5,10 @@ - +