Intro:
I know that "How does this code work?" type questions are frowned upon and I'll look about as clever as a brick reading "The Sun" for asking such a question but... here goes.
I am trying to understand prototyping in JavaScript, now this isn't the problem, I understand the basics of the prototyping structure in that you write a function and then extend that function's parameters through the use of the prototype.
(Yes before I get flames I HAVE read through the community wiki and posts on SO about this particular subject so don't just fob me off to them, as well as that I have gone through John Reisg's notes on the subject too which helped a great deal. (the most confusing aspect was understanding this
and its DOM referencing methods.))
But here's the thing:
I wrote a simple API parser for the SO API that would pull a variety of data, chuffed with myself and my first venture into JS I posted a link up in the SO JS Chatroom to see if they thought this could be done more efficiently and @IvoWetzel suggested I change to a prototyped wrapper to create the API URL queries, so I looked into it and he posted this example code up base开发者_运维百科d on mine:
//API Handling for asynchronicity
function API(site, key, ...) {
this.site = site;
this.key = key;
this.schedule = new Scheduler(this);
}
API.prototype = {
lookup: function(resource, callback) {
// build the url etc here
this.request(url, callback);
},
request: function(url, callback) {
// build a request here and send it
request.on('finished', function() {
callback();
});
}
};
function Scheduler(api) {
return function(method, options, interval) {
var id = null;
function request() {
api[method](options...);
id = setTimeout(function() {
request();
}, interval);
}
return {
stop: function(attribute) {
clearTimeout(id);
}
}
}
}
Obviously this is not finished and only a shell, but to be honest with you aside from the API
function at the top I have NO clue how the code works, in particular the lookup:
, request:
and how a return function
can be inside another with variables that aren't defined anywhere or even passed to it!
And the Scheduler
function just has me plain old baffled...
Conclusion:
So, could someone explain in simple terms (think explaining why not to put a harmonica in a toilet to a 3 year old child) how the code above do the same as the code in my GitHub repo (lines 176-210, 243-245 and 277-365).
N.B: I am doing this as a JS learning exercise if you say use JQuery.parseJSON / libraryX.whatever I will scalp you :)
Thanks all!
Lets break it down into it's parts
//create function API which is meant to be instantiated into an object using
///var foo = new API();
function API(site, key, ...) {
this.site = site;
this.key = key;
this.schedule = new Scheduler(this);
}
//create two prototype functions on the API function called lookup & request
//these two functions will be available as public functions on all
//instantiated API objects and can be called like this
//foo.lookup(resource, callback); / foo.request(url, callback);
API.prototype = {
lookup: function(resource, callback) {
// build the url etc here
this.request(url, callback);
},
request: function(url, callback) {
// build a request here and send it
request.on('finished', function() {
callback();
});
}
};
//define function Scheduler
function Scheduler(api) {
//when called, imidiately return a reference to an
//anonymous function that can be called later with
//the three arguments method, options & interval
return function(method, options, interval) {
// define a local variable id for this anonymous function
var id = null;
//create a private function inside the anonymous function call request
function request() {
//private function requests internals
api[method](options...);
id = setTimeout(function() {
request();
}, interval);
}
//when anonymous function is called return
//an object with a function called stop as property
return {
stop: function(attribute) {
clearTimeout(id);
}
}
}
}
In the end you'd do something like this:
var foo = new API();
var scheduler = foo.schedule('lookup', {some options object I presume}, some_interval);
scheduler.stop();
how a return function can be inside another with variables that aren't defined anywhere or even passed to it!
And the Scheduler function just has me plain old baffled...
- http://eloquentjavascript.net/chapter3.html
- How do JavaScript closures work?
精彩评论