www.webdeveloper.com
Results 1 to 14 of 14

Thread: JQuery - how does it's insides work??

  1. #1
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75

    JQuery - how does it's insides work??

    Hi,

    I want to learn more about JQuery. I've been on the JQuery website and looked at the How JQuery Works section. But I found that it is a rather weak explanation of how it works and would probably be better named How to Use JQuery. I want to know the basics of how it actually works. Like what is the programing Idea behind JQuery? What are it's main classes and objects and what function do they perform? I'd like also to hear a description/explanation of the JQuery architecture. How does JQuery interact with the DOM?

    Your probably wondering why I want to bother getting under the hood of JQuery and why I don't just shut up and use it. The answer is I don't know if I even need a Javascript framework all I want to do at the moment is one simple fade in animation so I figure I may well be better just writing my own short bit of code. But really I just want to improove my javascipt knowledge and coding ability and I figure looking at how JQuery does animations may well teach me what I want to know. But first I need to understand JQuery as a whole before I start to look at animations. I may end up deciding that JQuery is the best option and I shouldn't bother writing my own code but I can't decide that until I know something about JQuery..

    So does anybody know any good tutorial sites or books that really get under the hood of JQuery and explain it well?

    thanks,

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    JQuery is a shortcut for javascript as Dreamweaver is a shortcut to HTML, CSS and anything else one needs to know to craft a webpage. Using the shortcuts is like riding a bike while daddy runs alongside holding his kiddy up not to fall. Unfortunately, the tyke never learns how to ride the bike.

    The kid usually smartens up to see the crutch for what it is. But, not always.

  3. #3
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    That was a beautiful analogy justinbarneskin! I take it your saying that it is infact better to code custom javascript than use a library like JQuery!

    However I would still like to find resources to learn about JQuery and look under it's hood in order learn better javascript, I think It would be a good bike to learn on!

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    I wasn't too sharp on the analogy, its not quite right.
    javascript should be learned first before JQuery can be taken advantage of.
    I don't knock JQuery, its just that users get ahead of their selves with it.
    If you learn javascript, its not too hard to see what is going on in JQuery

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    you can buy the book "secrets of a javascript ninja", which details the inner-workings of parts of jQuery, and the programming principles the library uses.

    in one sentence, jQuery uses functional programming and a custom collection object to offer the user a chain-able syntax for accessing and applying native DOM commands and properties like getElementsByTagName, addEventListener, and element.style.

    broken into two halves: the left and right side of the dot.
    - the left side gathers elements using common CSS syntax.
    - the right side does things to those elements.

    inbetween the left and right is a custom Array-like object that has custom protoype methods.
    The methods of the custom prototype are available to all instances.
    The custom methods are the jQuery "commands" like .click, .data, .replaceWith, etc.
    The objects are basically arrays of elements matching the css selectors used to create the object.
    Last edited by rnd me; 02-06-2010 at 08:19 AM.

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    here is a jQuery-like tool i whipped up for you.
    it collects elements, and offers methods to use on the collection.

    you can pass it the name of a set of tags, or the ID a certain element using (#id).
    it's very simple (for this sorta thing), and i only cared about getting it to work in firefox.
    adding IE support would add bloat, and would not be helpful showing the principles involved. Unlike jQuery, I use an array instead of a custom collection object.

    there are only a few methods, but you can add more.

    Code:
    function X(css){ //dom utility
    
     //a couple of node harvesters, using id and tag name...
       function el(id){ return document.getElementById(id);}
       function tags(elm){return document.getElementsByTagName(elm);}
    
     //collect output:
       var out=[]; 
       if(css[0]=="#"){//id
          out.push(el(css.slice(1)));
       }else{//tags
          out=out.concat([].slice.call(tags(css)));
       };//end if id or tagName
      
     //define some methods for the utility:
        var meths={
            hide:function(a){a.style.display="none";},
            show:function(a){a.style.display="";},
            remove:function(a){a.parentNode.removeChild(a);},
            color:function(a){a.style.color=this||a.style.color;},
            size:function(a){a.style.fontSize=this||a.style.fontSize;}
        };//end meths
    
     //bind the methods to the collection array:
        for(var meth in meths)(function(n,m){
           out[n]=function(x){out.map(m,x); return out;}
        }(meth, meths[meth]));//next method
    
      return out;
    }//end X dom utility
    
    
    //some example uses:
    X("a").color("red").size("20px");
    X("#post_message_1066072").show();
    X("#post_message_1066072").color("red");
    X("img").remove();

  7. #7
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    Hey thanks very much for your extensive replys rnd me,

    sorry about the slow reply I've been getting my head around what you wrote.

    I've been having a play with the code you wrote and have got the general idea, it's been very informative! I've put the code into a html page and applied it to a div along with some css. added an onload event and added some timeouts to the examples uses. I've put it here..

    http://www.duncangravill.com/rnd_me_...ry_example.htm

    there are a couple of bits of the code I don't quite understand properly, perhaps you could explain for me?

    firstly i'm a little vague on this line..

    Code:
    out=out.concat([].slice.call(tags(css)));
    and secondly i'm not too sure about this for statement..

    Code:
    for(var meth in meths)(function(n,m){
           out[n]=function(x){out.map(m,x); return out;}
        }(meth, meths[meth]));//next method
    thanks,

    Duncan

  8. #8
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Quote Originally Posted by justinbarneskin View Post
    The kid usually smartens up to see the crutch for what it is. But, not always.
    Or you can waste your time writing cross browser code all day and worry about if you are doing it the fastest way for all browsers.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  9. #9
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by A1ien51 View Post
    Or you can waste your time writing cross browser code all day and worry about if you are doing it the fastest way for all browsers.

    Eric
    or you can use jQuery and be sure it's about the slowest performer in all browsers...

  10. #10
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Eschew Obfuscation!
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  11. #11
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by BrownWarrior View Post

    there are a couple of bits of the code I don't quite understand properly, perhaps you could explain for me?

    firstly i'm a little vague on this line..
    Code:
    out=out.concat([].slice.call(tags(css)));

    Quote Originally Posted by BrownWarrior View Post
    and secondly i'm not too sure about this for statement..
    Code:
    for(var meth in meths)(function(n,m){
           out[n]=function(x){out.map(m,x); return out;}
        }(meth, meths[meth]));//next method
    thanks,Duncan
    1. out is the collection of tags we want. [].slice.call turns array-like objects (like the return from .getElementsByTagName) into true arrays. the line as a whole reads: out becomes out plus the dom-collection of tags specified turned into an array. It's actually not needed in this tiny example to have to concat the array.
    i could just re-assign out to be [].slice.call(tags(css)). i had placed a .getElementsByClass() routine in there, which i took out. thats's the only reason the concat is in there at all...

    2. this is where i manually bind each method to the output array.
    for loops normally don't have scope, but functions do.
    i use the wrapper function as a scope gateway, creating the n and m variables from each key and value of the method-defining object.
    the name of each method (remove, hide, etc) becomes n, and it's the same property name i add to the output array, the actual function being directly copied from the method definition.

    the loops is normal except for the function wrapper.
    the reason i needed a function wrapper was that i needed to remember "meth" each time, meths[meth] to be exact.

    in a scope-less for loop, "meth" gets clobbered and re-clobbered; leaving 'meth' equal to the last element iterated. By using the function wrap, "m", unlike "meth" is original and permanent, even after the next loop iteration.


    i know it's a lot to take in, and javascript can be a bit terse at the library-level sometimes, but do these explanations make some sense?
    Last edited by rnd me; 02-08-2010 at 09:26 AM.

  12. #12
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    Thanks rnd me,

    I understand the first bit now but I still don't quite get the for statement. I have only just started getting back into javascript after about a year of not doing any so I think I need to brush up on my for loops a bit. What I don't get is how meth and meths becomes n and m, is that just what happens if you put a function in a for statement? And I don't understand where x comes from or what it does, does x just default to null or 0? Also I don't understand the little bit at the end (meth, meths[meth]) I think I'm failing to see how this variation of for loop is working.

  13. #13
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    it's an unusual for pattern.
    basically any statement (including a function call or the normal braced set of expressions) can be the body of a for loop.


    here is a slightly more conventional presentation, that should illustrate where n and m come from:

    Code:
    for(var meth in meths){
    
        function wrap(n, m){
           out[n] = function(x){ out.map(m, x); return out;}
        }
    
       wrap(meth, meths[meth]);
    
    };//next method
    x is a relay for any arguments you pass when you actually call the method, it defaults to undefined like all named arguments.

    when coding a method, that argument, "x", becomes "this" in the method code. ]
    that's a result of Array.map() more than anything. using [].map(), i fire the function, in this case a method, against every element in the output array.
    since [].map pre-defined the argument the method recieves, the only way to allow call-time adjustment is by over-riding "this", which [].map allows in it's 2nd argument.

  14. #14
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    Quote Originally Posted by rnd me View Post
    it's an unusual for pattern.
    basically any statement (including a function call or the normal braced set of expressions) can be the body of a for loop.


    here is a slightly more conventional presentation, that should illustrate where n and m come from:

    Code:
    for(var meth in meths){
    
        function wrap(n, m){
           out[n] = function(x){ out.map(m, x); return out;}
        }
    
       wrap(meth, meths[meth]);
    
    };//next method
    x is a relay for any arguments you pass when you actually call the method, it defaults to undefined like all named arguments.

    when coding a method, that argument, "x", becomes "this" in the method code. ]
    that's a result of Array.map() more than anything. using [].map(), i fire the function, in this case a method, against every element in the output array.
    since [].map pre-defined the argument the method recieves, the only way to allow call-time adjustment is by over-riding "this", which [].map allows in it's 2nd argument.

    Thanks I understand it a bit better now. This is about as advanced as I've got in javascript, there are a few new things there I haven't come accross before. I think I'll have to read it a few times and let it sink in before I'm totally clear on it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles