SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    understanding this bit of code from Modernizr

    Hello

    Code:
    window.Modernizr = (function(window,document,undefined){
    
    //... full code goes here
    
    })(this,this.document);
    A few things I would like to understand:

    1) why the whole code is not simply wrapped into an anonymous function?

    2) why use window.Modernizr instead of var Modernizr = function()

    3) why pass arguments to the function that would be available inside of it anyway? -> function(window,document,undefined)

    4) why end the code with this bit: (this,this.document). I really don't understand what is going on here

    Well, if someone can help make sense out of it, I'm pretty sure I will have made some progress today!


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Hello

    Code:
    window.Modernizr = (function(window,document,undefined){
    
    //... full code goes here
    
    })(this,this.document);
    A few things I would like to understand:
    These are good questions. Let's see what answers we can find.

    Quote Originally Posted by rhgiant View Post
    1) why the whole code is not simply wrapped into an anonymous function?
    The main reason why an anonymous function isn't used, is so that the variables for window/document/undefined can be passed in to the function.

    Quote Originally Posted by rhgiant View Post
    2) why use window.Modernizr instead of var Modernizr = function()
    Using window.Modernizr provides a clear intent that you want it to be a global variable. Using var doesn't make that as clearly understood.

    Quote Originally Posted by rhgiant View Post
    3) why pass arguments to the function that would be available inside of it anyway? -> function(window,document,undefined)
    We don't know if those values have been redefined as something else before our code starts to run, so passing them in allows all of the code within tyhe function to use them from a more trusted local source.

    Quote Originally Posted by rhgiant View Post
    4) why end the code with this bit: (this,this.document). I really don't understand what is going on here
    The this keyword refers to the window object, and this.document is for the document object. Notice how a third argument is not provided, yet one is defined for the function called undefined? Not passing a variable for that third argument results in it being automatically assigned to undefined, even if someone else has redefined undefined previously.

    To overcome such issues, undefined is declared as a local variable to the function, so that a more trusted version of it can be used.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul.

    Is undefined a regular javascript object? Why would you use it for?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Thank you so much Paul.

    Is undefined a regular javascript object? Why would you use it for?
    Commonly scripts check for the existence of things by checking of something is undefined. Since it's possible for the undefined variable can be reassigned to be something, you don't want to rely on the global undefined variable which might be mucked up by someone else, which is why the function created its own undefined variable so that they can guarantee that the correct things is being checked for.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    I have a new question related to the same subject, so, I'll post it in the same thread.
    I have a hard time using an object that looks like that:
    Code:
    window.SomeObject = (function(window,document,undefined){
    
    
    function alertSomeString(someString) {
    alert(someString);
    }
    
    })(this,this.document);
    
    SomeObject.alertSomeString("hello");

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On a related note: how would you pass "window,document,undefined" to a literal object within an anonymous function?

    Code:
    (function() {
    
    var myObject = {
      
     init: function(window,document,undefined){
     //...
     }
    
    }
    
    })();
    
    myObject.init(this,this.document)

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    On a related note: how would you pass "window,document,undefined" to a literal object within an anonymous function?

    Code:
    (function() {
    
    var myObject = {
      
     init: function(window,document,undefined){
     //...
     }
    
    }
    
    })();
    
    myObject.init(this,this.document)
    You would pass them to the outer function, where they can then become accessible by all of the inner ones.

    Code javascript:
    (function (window, document, undefined) {
        var myObject = {
            init: function() {
                //...
            }
        };
    }(this, this.document));
     
    myObject.init()

    Why that works is that all functions retain with them a copy of their parents environment. So if you had this:

    Code javascript:
    function handler(index) {
        var value = 'something or other';
        return function () {
            ...
        };
    }

    That inner function that's returned will retain knowledge about both the index and the value, even though those variables aren't declared within that inner function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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