Study on js custom message mechanism (1) -- View Baidu search input prompt

Once in order to do a similar to Google, Baidu input prompt, grilled Baidu code (now the address http://www.baidu.com/js/bdsug.js? V = 1.0.3.0, format it again) After some research, we found that Baidu's message mechanism is concise and effective, and then we wrote a set of our own message mechanism based on it, it is applied in a web ajax chat program. After discussing with friends, I improved it and implemented an event-like event mechanism (simulating dom event custom events on common objects ), now we have applied a similar mechanism to the current ERP project to implement a js plug-in mechanism and iframe communication mechanism. (I am so ashamed to be so lazy that I have not learned how to use the ready-made js framework, I made another wheel myself). Now I am working hard to make everyone happy. I am mainly engaged in background development. js is just a hobby. Thank you for your correction.

 

 

 

 

 

Let's talk about Baidu's code and core things as follows:

 

 

Baidu Code

Var J = (function () {function C (B) {var Z = this. _ MSG_QS __; if (! Z [B]) {Z [B] = []} for (var a = 1, X = arguments. length, Y; a <X; a ++) {Z [B]. push (arguments [a])} function G (Y) {var Z = this. _ MSG_QS _ [Y. type]; if (Z = null) {return} for (var a = 0, X = Z. length; a <X; a ++) {Z [a]. rm (Y) }}return {ini: function (X) {X. _ MSG_QS _ = {}; X. on = C; X. dm = G; return X }}) (); the Code is compressed. I'm too lazy to guess its original name.

 

This is a lightweight message mechanism. After executing this code, we get the J object. We can see from the code that J = {ini: function (){......}}

 

 

 

Study the ini functions:

 

View Code

Function (X) {X. _ MSG_QS _ = {}; X. on = C; X. dm = G; return X} binds an object:

 

One attribute _ MSG_QS __

 

Two Functions on (= C), dm (= G)

 

_ MSG_QS _ is used to store message queues. It is a json object, so multiple message queues can be stored in a format similar to {"click": [], "blur": []}

 

 

 

 

On is to add listeners.

 

View Code

Function C (B) {var Z = this. _ MSG_QS __; if (! Z [B]) {Z [B] = []} for (var a = 1, X = arguments. length, Y; a <X; a ++) {Z [B]. push (arguments [a])} is responsible for adding the listening message object to _ MSG_QS _

 

 

 

 

Dm is a trigger message.

 

View Code

Function G (Y) {var Z = this. _ MSG_QS _ [Y. type]; if (Z = null) {return} for (var a = 0, X = Z. length; a <X; a ++) {Z [a]. rm (Y)} If a message listening queue exists, dm cyclically calls the listener's rm Function

 

 

 

 

 

 

Write a simple example:

 

View Code

Var dataLayer = J. ini ({getData: function () {this. dm ({type: "data", data: 1}) }} var controlLayer = J. ini ({rm: function (Y) {switch (Y. type) {case "data": Y. data ++; this. dm ({type: "show", data: Y. data}) ;}}) var viewLayer = J. ini ({rm: function (Y) {switch (Y. type) {case "show": alert (Y. data) ;}}); dataLayer. on ("data", controlLayer); controlLayer. on ("show", viewLayer); dataLayer. getData (); dataLayer. getData () will generate a data (which can be imagined to be returned by the server) and trigger the "data" message.

 

After the controlLayer object receives the message, it processes the data (+ 1) and then triggers the "show" message.

 

After the viewLayer object is received, it simply pops up the data

 

 

 

 

 

 

This is just a simple example. You can regard dataLayer, controlLayer, and viewLayer as independent js files (modules) and codes.

 

View Code

DataLayer. on ("data", controlLayer); controlLayer. on ("show", viewLayer); dataLayer. getData (); as in the page (or a main. js), so these modules can easily implement message transmission, and it is low-coupling

 

 

 

 

 

 

For example, if we do not like alert and want it to be displayed in the page elements, add a module code:

 

View Code

Var viewLayer1 = J. ini ({rm: function (Y) {switch (Y. type) {case "show": document. getElementById ("show "). innerHTML = Y. data ;}}); modify the so-called main. js, as shown below

 

View Code

DataLayer. on ("data", controlLayer); controlLayer. on ("show", viewLayer1); dataLayer. getData (); isn't it flexible. The Code of dataLayer and controlLayer does not need to be modified at all (assuming they are independent js files, many related js files, or a long and long piece of code, you will be very happy)

 

 

 

 

 

 

Another feature of the message mechanism is multicast. For example, if the requirement is changed and alert is required and displayed on the page, you will be more happy to modify the code.

 

View Code

DataLayer. on ("data", controlLayer); controlLayer. on ("show", viewLayer, viewLayer1); dataLayer. getData ();

 

 

 

 

Messages can also have many sources, such:

 

View Code

Var dataLayer1 = J. ini ({getData: function () {this. dm ({type: "data", data: 10}) // ************ dataLayer is omitted. on ("data", controlLayer); dataLayer1.on ("data", controlLayer); controlLayer. on ("show", viewLayer, viewLayer1); dataLayer. getData (); dataLayer1.getData (); from these examples, we can see the flexibility of the message mechanism.

 

 

 

 

Supplement: (re: alexpolicy) It is difficult to spread knowledge ...... If you think you understand it, it's hard to understand it .......

 

In fact, the specific principle can be referred to the observer mode.

 

The so-called message or event is also called. The basic idea is that when the object changes, it will notify you of the changed object. Weibo is very popular, I believe everyone should be familiar with this word.

 

Let's take a look at several concepts of a message:

 

1. Follow (or listen)

 

2. messages are our data and information carriers. It contains information that we are interested in.

 

3. trigger a message, package the data into a message, and then send it to each consumer.

 

4. Receive and process messages

 

For example

 

Suppose we now have two objects: her (a beautiful girl) and me (even). This beautiful girl often sends a picture and talks about something, and me wants to pay attention to her now, you have to use the attention feature (on) on her page, but you don't want to pay attention to what she says, just want to see her meitu

 

If she sends a meitu, I will receive it. How to implement it?

 

First, use her. on ("pic", me) to follow the message sent by her. This follow operation will put me in the list of her image senders. (The list is _ MSG_QS _ ["pic"]. Beauty also has many other types of messages, such as _ MSG_QS _ ["say)

 

Every time a beauty sends an image, she will be called. dm ({type: 'pic ', picUrl: ''}); then the message mechanism converts {type: 'pic', picUrl:.

 

On the me side, you must have a method to receive the image message, that is

 

Me. rm (obj)

 

First of all, rm will receive a lot of messages, like mailboxes and emails. First, we need to determine what messages we receive?

 

Obj. type

 

If obj. type = 'pic ', then I did it myself ......

 

 

 

 

 

Summary:

 

Advantages of message mechanism:

 

1. Low coupling modules transmit data through messages, so there is basically no call to other modules

 

2. flexible modules can be assembled only when used. modules can be assembled as needed.