Thursday, April 26, 2012

My Learning from jQuery internals became nQuery for demo

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 (...); 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