A point of view on JS's callback function

Forget about a few months have not written blog, recently busy with the company's Android project, so it is very little time to write something. As soon as I was idle, I turned over what I had seen before. After doing Android more feel the importance of mobile phone development, now do native app and web app is the mainstream, that is now a variety of browser-based web app framework will become more and more popular, JS is also more and more promising. I also decided from the back-end development gradually to the front-end development and mobile phone development closer, nonsense not to say, we have to cut the topic "JS callback function" related things.

Speaking of the callback function, many people know the meaning, but still smattering. As for how to use, still a little confused. Some of the relevant online also did not elaborate on what is going on, said the more one-sided. I'm just saying a little bit of personal understanding, Daniel do not spray. Let's take a look at a rough definition of "function A has a parameter, which is a function B, and executes function B after function a finishes." Then this process is called a callback. The meaning of this sentence is that function B passes in function A as a parameter and executes it in order to execute a and then execute the parameter b,b is called a callback function. Let's look at the following example first.

   function   A (callback) {      alert (' a ');      Callback.call (thiscallback  callback.apply), see person likes     }   function  B () {       alert (' B ');   }
   Call
   A (b);

The result is a pop-up ' a ' and then ' B '. So someone would ask, "What's the point of writing such a code?" It doesn't seem to have much effect! ”

Yes, I also think this is not the meaning of writing, "If you call a function directly inside the function call it is not OK." I'm just writing a small example for you to make a preliminary understanding. The process of actually writing code is rarely used in this way, because in most scenarios we pass parameters. Take a parameter:

function   C (callback) {      alert (' C ');      Callback.call (This, ' d ');    }    Call C (function(e) {    alert (e);});

This call does not seem familiar, here the e parameter is assigned to ' d ', we simply assign to the character channeling, in fact, can also be assigned to the object. Is there an e parameter in jquery, so let's talk about
How the E parameter in jquery is assigned by a callback.

jquery Framework I think everyone is not strange, came out for a long time, the development of all in use, relatively simple, the API online search is very convenient, quick to get started. In the jquery framework, we sometimes want to get some parameters in the event, such as I want to get the coordinates of the current click, click on the Element object. This requirement is well-done in jquery:

$ ("#id"). Bind (' click ', Function (e) {

E.pagex, E.pagey, E.target ..... Various data

});

It is very convenient to use, in fact, the assignment of the E parameter is also implemented by the callback function, this parameter is given a callback parameter to give it an object value, carefully studied jjquery source of the friend should find this.

and Ajax inside $.get (", {},function (data) {}) data this parameter is the same principle.

Let's take a look at how the callback function is applied to the jquery event object.

For the sake of convenience, I simply wrote some of the $ related implementations, previously written "Little Talk about jquery" There are more approaches to framework implementation, I just write a simple selector.

<div id= "Container" style= "Width:200px;height:200px;background-color:green;" ></div><script>var_$=function(ID) { This. element=document.getElementById (ID); } _$.prototype={bind:function(evt,callback) {varthat= This; if(document.addeventlistener) { This. Element.addeventlistener (EVT,function(e) {Callback.call ( This, That.standadize (e)); }  ,false); }                Else if(document.attachevent) { This. Element.attachevent (' on ' +evt,function(e) {Callback.call ( This, That.standadize (e));                }); }                Else                     This. element[' on ' +evt]=function(e) {Callback.call ( This, That.standadize (e));            }; }, Standadize:function(e) {varevt=e| |window.event; varPagex,pagey,layerx,layery; //PageX Horizontal axis pagey ordinate Layerx click on the horizontal axis of the element layery click on the element's ordinate point                 if(Evt.pagex) {PageX=Evt.pagex; Pagey=Evt.pagey; }                 Else{PageX=document.body.scrollleft+evt.clientx-Document.body.clientLeft; Pagey=document.body.scrolltop+evt.clienty-Document.body.clientLTop; }                 if(Evt.layerx) {Layerx=Evt.layerx; Layery=Evt.layery; }                 Else{Layerx=Evt.offsetx; Layerxy=evt.offsety; }                 return{Pagex:pagex, pagey:pagey, Layerx:layerx, Layery:layery} }} window.$=function(ID) {return  New_$ (ID); }        $(' container '). Bind (' click ',function(e) {alert (E.pagex);        }); $(' Container1 '). Bind (' click ',function(e) {alert (E.pagex); });</script>

View Code

This code we mainly look at the implementation of the Standadize function, compatibility code, not much to say, returned is an object

return {
Pagex:pagex,
Pagey:pagey,
Layerx:layerx,
Layery:layery
}

Then look at the code inside the Bind function Callback.call (This,that.standadize (e)), this code is actually assigned to the E parameter, is implemented with the callback callback.

An anonymous function is passed in when the callback function is called

Function (e) {

}

and Callback.call (This,that.standadize (e)) is equivalent to executing a piece of code

(function (e) {

}) (Standadize (e))

This is also the place where jquery uses the callback function as a classic, and the e parameter is so assigned, and you probably have an idea of how to use it.

Callbacks are used in a variety of frameworks, and sometimes they can be used to see when they write something.

If you think this article is not detailed enough, I can discuss it separately (see the top left corner of the blog), there is a lack of language expression ability. Thank you for visiting Bo friends, I will continue to enhance personal skills and language level, write a better blog, we learn from each other progress.

A point of view on JS's callback function