This was written quit sometimes ago, about an year or so, but I thought of blogging it now.
So if there is someone who would like to know how $.each() is different from $('#selector').each(), this tutorial might be helpful.
To understand this fully I would recommend another blog of mine http://javascriptstolenideas.blogspot.com/,
Where there is a little description of javascript prototypes, javascipt objects and simulation of javascript classes and inheritance.
(function(global){
//1. nQuery object is actually nQuery.fn.init class's object
var nQuery = function(selector,context){
return new nQuery.fn.init(selector,context);
};
nQuery.fn = nQuery.prototype = { //nQuery.prototype seems to be
//optional = what is this for?
init : function(selector,context){
alert("here in init selector=" + selector);
}
};
//the below line is like nQuery.fn.init.prototype.newfn where jQoery
//object is actually its constructor
//nQuery.fn.init is class and newfn is its member function so it can
//be called by its object not directly
nQuery.fn.newfn = function(){
alert('fn.newfn()');
}
//this line works if nQuery.fn.init.prototype = nQuery.fn; is
//commented or else the next line overwrited the
//object nQuery.fn.init.prototype
nQuery.fn.init.prototype.wow = function(){
alert("in fundtion init.prototype.wow()");
}
//this is a function of the object not class. It is just a property of object
nQuery.sayHello = function(){
alert('sayHello()');
}
//nQuery.fn.x means x is a prototype method or variable of nQuery [1]
//nQuery.fn.init.prototype = nQuery.fn;
nQuery.fn.init.constructor = 'nQuery';
alert('compiled');
global.nQuery = nQuery;
})(window);
This is how to use this little piece of code.
In javascript anything that appears to the compiler as
Those who couldn't see the anonymous function, this is what I was referring to
(...); is assumed to be a function and javascript engine calls it;
in place of we can pass an object which is similar to function pointers in c/c++.
The code snippet is actually an anonymous function called with an argument "window" object.Those who couldn't see the anonymous function, this is what I was referring to
( function....closure )(window);function....closure is actually an anonymous function.
Our anonymous function is function(global){}. My way of interpretation of a closure is a function pointer which we can pass around like objects/variables, and where ever it gets passed it can be executed there. There is subtle difference of anonymous functions as compared to closures, mostly on the variable scoping.
I dont know if this will work but the essence of function pointers vs anonymous functions can be found here:
In "c/c++"
int x =10;
int (*myfntpr)(int arg1);
int callingFn(){
int x = 100;
(*myfntpr)(x); //--> prints 100
}
int ptr(int arg1){
printf("%d", x);
}
In javascript
var x = 10;
function myClosure(p){
console.log(p);
}
function callingFn(clos){
var x = 100;
clos(x);
}
callingFn(myClosure); //--> prints 100
Here is our nQuery in action
nQuery.sayHello();
//nQuery.newfn(); -->does not work
nQuery().newfn(); //-->works
nQuery('someselector').newfn(); //---> works
nQuery().wow(); //-->works
//nQuery.wow(); //--> does not work
No comments:
Post a Comment