Some views on the callback function in JS _javascript skills

I've been working on my company's Android project recently, so I rarely have time to write anything. When I was idle, I turned over what I had seen before. After doing Android more feel the importance of the development of mobile phone, 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, do JS also more and more promising. I also decided to develop from the back end to the front-end development and mobile phone development closer to the end, nonsense, we come to the point of "JS callback function" related things.

Talking about the callback function, many people know the meaning, but still a smattering. As for how to use, or a little confused. Some of the relevant online also did not say in detail what is going on, said more one-sided. Let me just say a little bit of personal understanding, Daniel, don't spray. Let's take a look at a rough definition "function A has a parameter, which is a function B, which executes function B when function A is done." Then the process is called a callback. This means that function B passes in function A in the form of a parameter and executes, in the order that a is executed first, then the parameter b,b is called a callback function. Let's take a look at the following examples first.

Function A (callback) {
   alert (' a ');
   Callback.call (this);/or callback (), callback.apply (this), see a person liking

  }
  function B () {
    alert (' B ');
  }
  Call
  A (b);

The result is to eject ' a ' and then eject ' B '. So someone would ask, "What does it mean to write such a code?" It doesn't seem to have much effect! ”

Yes, but I also think it doesn't mean anything, "if you call a function, you call it directly in the function." I'm just writing a little example for you to make a preliminary understanding. There is very little in the process of writing code that has no parameters, because in most scenarios we pass parameters. Come with a parameter:

Function C (callback) {
   alert (' C ');
   Callback.call (this, ' d ');

  }
  
Call
C (function (e) {

  alert (e);
});

This call seems to be déjà vu, where the e parameter is assigned to ' d ', and we simply assign it to a character channeling, which can actually be assigned to an object. Is there an e parameter in jquery, so let's talk about
how the E parameter in jquery is assigned by the callback.

jquery Framework I think we are not unfamiliar, came out for a long time, the development of the use, relatively simple, the API online search is very convenient, start fast. In the jquery framework, we sometimes get some of the parameters in the event, such as I want to get the coordinates of the current click, and 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, this e-parameter assignment is also through the callback function to implement, this parameter is given a callback parameter to give it an object value, carefully studied the jjquery source of friends should find this point.

There is also the same principle of $.get (", {},function (data) {}) data in Ajax."

Let's look at how the callback function is applied inside the jquery event object.

For convenience, I simply wrote a few of the relevant implementation of the $, previously written "Small Talk jquery" inside there are relatively close to the framework implementation of the method, 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) {var that=this; if (Document.addeventlistener) {This.element.addEventListener (evt, function (e) {callback.cal
          L (This,that.standadize (e));
        }, False); else if (document.attachevent) {this.element.attachEvent (' on ' +evt,function (e) {cal
          Lback.call (This,that.standadize (e));
        });
          Else this.element[' on ' +evt]=function (e) {Callback.call (This,that.standadize (e));
      }; }, Standadize:function (e) {var evt=e| |
         window.event;
         var pagex,pagey,layerx,layery;
 Pagex Horizontal axis Pagey ordinate Layerx Click at the horizontal axis of the element Layery click on the ordinate of the element 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>

This piece of code we mainly look at the implementation of the Standadize function, the code of compatibility, not much said, returned an object

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

Then look at the code callback.call in the Bind function (This,that.standadize (e)), which is actually assigning a value to the E parameter, which is implemented with a callback callback.

The callback function was called with an anonymous function.

Function (e) {

    }

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

(function (e) {
 
}) (Standadize (e))

This is also where jquery uses callback functions where the e parameter is so assigned, and you probably have an understanding and how to use it.

Callbacks are used in a variety of frameworks, and sometimes when you write something, you can use it to look at the actual situation.

The above in the JS callback function of some of the views are small to share the entire content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.