The communication between JS components

Application Scenarios:

1. In the brush micro bo, slide to a picture, will appear a usercard (User business card), Weibo list area has this Usercard, recommended list also has this usercard, comment area also has.

2. When shopping online, the shopping cart stays quietly in the corner of the page, quietly. You bought a snack on the page, bought a book, the shopping cart is still quiet, suddenly opened a look, quiet shopping cart has been lying full.

The above two, in the modular flying today, of course, it is not possible to process one by one development, you can not in the Micro-blog list, micro-blog recommendations and comments on the user's business card function to develop once. In fact, common

is to use Usercard as a component, and of course, comment is also a component. The shopping cart is also a component. How can you do the mouse on the comment and reply to the user picture on the display card? This involves the mechanism of communication between components.

There are many communication methods for components, and API watchers can. The best scenario I think is using the event mechanism.

Information can be interacted between all components through a common component called Eventbus.

1. In the Usercard component, you can listen for a usercard:show event of the Eventbus.

2. In the component that needs to show usercard, you can trigger this event of Eventbus and pass in the corresponding parameter if necessary.

In fact, before the time also often contact with such usage, this time from a blog to see, have their own hands-on ideas, a write under the discovery is also very simple, do not know if there is still a lot of what they do not think, first recorded.

Let's take a look at this event mechanism component (code under AMD spec)

Definefunction(require) {varConfig = {}; //for the storage of events;Config.eventlist = {}; /** Event Definition * @param name of {string} event; * @param {function} function*/Config.on=function(Name, func) {varme = This; if(!Me.eventlist[name]) {Me.eventlist[name]=func; }        Else{alert (' This method name has been used, please change a name ');    }    }; /** Event Trigger * @param {string} event name; * Parameters in the @param {obj} event*/Config.emit=function(name, data) {varme = This; if(Me.eventlist[name]) {Me.eventlist[name] (data); }        Else{alert (' No corresponding method found ');    }    }; returnconfig;});

One is the definition and one is the trigger. It looks very simple to look like. Now write two components to try it out

The first component, Usercard, needs to define the Usercard:show event here.

Definefunction(require) {varEventbus = require (' Eventbus ')); varConfig = {}; Config.add=function () {        varobj ={name:' Usercard ', type:' MouseOver '        }; //this defines Eventbus events.Eventbus.on (' Usercard:show ',function(data) {obj=$.extend (obj, data); Data.node.title=Data.sid; Data.node.style.backgroundColor= ' Red ';    });    }; returnconfig;})

Then write a component comment to trigger the Eventbus.

Definefunction(require) {varEventbut = require (' eventbut ')); varConfig = {}; varDomEvent = {    }; functiondomevents () {$ ("#commentList"). Delegate (' DT ', ' click ',function(e) {vartarget =E.target; varSid = Target.getattribute (' Sid ')); //Triggering EventsEventbut.emit (' Usercard:show ', {sid:sid, node:target});    }); } config.init=function() {domevents (); }    returnconfig;});

Write a page to load

<Script>require (['Comment', 'Usercard'], function(Comment, usercard) {usercard.add ();    Comment.init (); })</Script>

Test it is possible ~ ~

The communication between JS components