Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Javascript: what is the difference in coding method

Expand Messages
  • Satyam
    The purpose of the function wrapper is to make all variables and functions within it private. The variables become local to the wrapper function and are
    Message 1 of 4 , Jan 31, 2008
    • 0 Attachment
      The purpose of the function wrapper is to make all variables and functions
      within it private. The variables become local to the wrapper function and
      are visible to all code inside it but, as regular local variables, they are
      not visible outside.

      The wrapper makes no difference in the working of the code inside, it only
      avoids collisions in the global namespace. You may use JSLint to check the
      same code with and without the wrapper and you will see that without it, all
      variables (such as move) will show as global variables. Should your page
      ever include some extra code from an external source, hiding variables from
      the global namespace is safer than just hoping there will be no coincidence
      in names.

      The other alternative is to define all variables and functions under your
      own namespace under YAHOO, but that makes long and tedious names.

      Satyam


      ----- Original Message -----
      From: "matt.pettis" <matthew.pettis@...>
      To: <ydn-javascript@yahoogroups.com>
      Sent: Friday, February 01, 2008 5:49 AM
      Subject: [ydn-javascript] Javascript: what is the difference in coding
      method


      > Hi,
      >
      > I was wondering if someone might explain the difference in a
      > javascript construction.
      >
      > In the example shown at
      >
      > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
      >
      > the page source code has the javascript logic wrapped in a function:
      > ---------------------------------------------------------------
      > (function() {
      > var move = function(e) {
      > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
      > };
      >
      > YAHOO.util.Event.on(document, "click", move);
      >
      > YAHOO.log("The example has finished loading; as you interact with
      > it, you'll see log messages appearing here.", "info", "example");
      >
      > })();
      > ---------------------------------------------------------------
      >
      > However, the code explained in the examples for the very same example at:
      >
      > http://developer.yahoo.com/yui/examples/dom/setxy.html
      >
      > does not wrap this code in a function.
      >
      > Also, I took the first example and removed the function wrapper and
      > just stuck the function body inside the 'script' tags and the code ran
      > the same way.
      >
      > So, my question... what does the '(function(){...})()' construct do
      > and why is it removable?
      >
      > links to explanations of the use of this construct would be happily
      > accepted.
      >
      > thanks for all of your help so far,
      > matt
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      >
      >
      >
      >
      > --
      > No virus found in this incoming message.
      > Checked by AVG Free Edition.
      > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
      > 30/01/2008 20:51
      >
      >
    • matt.pettis
      OK, thanks, that makes sense... This is because Javascript does not have the concept of a bareblock lexical scope like Perl has, correct? And so this is a
      Message 2 of 4 , Feb 1, 2008
      • 0 Attachment
        OK, thanks, that makes sense... This is because Javascript does not
        have the concept of a bareblock lexical scope like Perl has, correct?
        And so this is a funky but effective workaround for making a
        lexically scoped environment...?

        Matt

        --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
        >
        > The purpose of the function wrapper is to make all variables and
        functions
        > within it private. The variables become local to the wrapper
        function and
        > are visible to all code inside it but, as regular local variables,
        they are
        > not visible outside.
        >
        > The wrapper makes no difference in the working of the code inside,
        it only
        > avoids collisions in the global namespace. You may use JSLint to
        check the
        > same code with and without the wrapper and you will see that without
        it, all
        > variables (such as move) will show as global variables. Should your
        page
        > ever include some extra code from an external source, hiding
        variables from
        > the global namespace is safer than just hoping there will be no
        coincidence
        > in names.
        >
        > The other alternative is to define all variables and functions under
        your
        > own namespace under YAHOO, but that makes long and tedious names.
        >
        > Satyam
        >
        >
        > ----- Original Message -----
        > From: "matt.pettis" <matthew.pettis@...>
        > To: <ydn-javascript@yahoogroups.com>
        > Sent: Friday, February 01, 2008 5:49 AM
        > Subject: [ydn-javascript] Javascript: what is the difference in coding
        > method
        >
        >
        > > Hi,
        > >
        > > I was wondering if someone might explain the difference in a
        > > javascript construction.
        > >
        > > In the example shown at
        > >
        > > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
        > >
        > > the page source code has the javascript logic wrapped in a function:
        > > ---------------------------------------------------------------
        > > (function() {
        > > var move = function(e) {
        > > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
        > > };
        > >
        > > YAHOO.util.Event.on(document, "click", move);
        > >
        > > YAHOO.log("The example has finished loading; as you interact with
        > > it, you'll see log messages appearing here.", "info", "example");
        > >
        > > })();
        > > ---------------------------------------------------------------
        > >
        > > However, the code explained in the examples for the very same
        example at:
        > >
        > > http://developer.yahoo.com/yui/examples/dom/setxy.html
        > >
        > > does not wrap this code in a function.
        > >
        > > Also, I took the first example and removed the function wrapper and
        > > just stuck the function body inside the 'script' tags and the code ran
        > > the same way.
        > >
        > > So, my question... what does the '(function(){...})()' construct do
        > > and why is it removable?
        > >
        > > links to explanations of the use of this construct would be happily
        > > accepted.
        > >
        > > thanks for all of your help so far,
        > > matt
        > >
        > >
        > >
        > >
        > > Yahoo! Groups Links
        > >
        > >
        > >
        > >
        > >
        > > --
        > > No virus found in this incoming message.
        > > Checked by AVG Free Edition.
        > > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
        > > 30/01/2008 20:51
        > >
        > >
        >
      • Satyam
        I couldn t have said it better, or worst or anything close. I don t have a clue what a lexically scoped environment could possibly be. I guess yes would
        Message 3 of 4 , Feb 2, 2008
        • 0 Attachment
          I couldn't have said it better, or worst or anything close. I don't have a
          clue what a 'lexically scoped environment' could possibly be. I guess "yes"
          would be a fitting answer, or perhaps not. Sorry


          ----- Original Message -----
          From: "matt.pettis" <matthew.pettis@...>
          To: <ydn-javascript@yahoogroups.com>
          Sent: Friday, February 01, 2008 11:04 PM
          Subject: [ydn-javascript] Re: Javascript: what is the difference in coding
          method


          > OK, thanks, that makes sense... This is because Javascript does not
          > have the concept of a bareblock lexical scope like Perl has, correct?
          > And so this is a funky but effective workaround for making a
          > lexically scoped environment...?
          >
          > Matt
          >
          > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
          >>
          >> The purpose of the function wrapper is to make all variables and
          > functions
          >> within it private. The variables become local to the wrapper
          > function and
          >> are visible to all code inside it but, as regular local variables,
          > they are
          >> not visible outside.
          >>
          >> The wrapper makes no difference in the working of the code inside,
          > it only
          >> avoids collisions in the global namespace. You may use JSLint to
          > check the
          >> same code with and without the wrapper and you will see that without
          > it, all
          >> variables (such as move) will show as global variables. Should your
          > page
          >> ever include some extra code from an external source, hiding
          > variables from
          >> the global namespace is safer than just hoping there will be no
          > coincidence
          >> in names.
          >>
          >> The other alternative is to define all variables and functions under
          > your
          >> own namespace under YAHOO, but that makes long and tedious names.
          >>
          >> Satyam
          >>
          >>
          >> ----- Original Message -----
          >> From: "matt.pettis" <matthew.pettis@...>
          >> To: <ydn-javascript@yahoogroups.com>
          >> Sent: Friday, February 01, 2008 5:49 AM
          >> Subject: [ydn-javascript] Javascript: what is the difference in coding
          >> method
          >>
          >>
          >> > Hi,
          >> >
          >> > I was wondering if someone might explain the difference in a
          >> > javascript construction.
          >> >
          >> > In the example shown at
          >> >
          >> > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
          >> >
          >> > the page source code has the javascript logic wrapped in a function:
          >> > ---------------------------------------------------------------
          >> > (function() {
          >> > var move = function(e) {
          >> > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
          >> > };
          >> >
          >> > YAHOO.util.Event.on(document, "click", move);
          >> >
          >> > YAHOO.log("The example has finished loading; as you interact with
          >> > it, you'll see log messages appearing here.", "info", "example");
          >> >
          >> > })();
          >> > ---------------------------------------------------------------
          >> >
          >> > However, the code explained in the examples for the very same
          > example at:
          >> >
          >> > http://developer.yahoo.com/yui/examples/dom/setxy.html
          >> >
          >> > does not wrap this code in a function.
          >> >
          >> > Also, I took the first example and removed the function wrapper and
          >> > just stuck the function body inside the 'script' tags and the code ran
          >> > the same way.
          >> >
          >> > So, my question... what does the '(function(){...})()' construct do
          >> > and why is it removable?
          >> >
          >> > links to explanations of the use of this construct would be happily
          >> > accepted.
          >> >
          >> > thanks for all of your help so far,
          >> > matt
          >> >
          >> >
          >> >
          >> >
          >> > Yahoo! Groups Links
          >> >
          >> >
          >> >
          >> >
          >> >
          >> > --
          >> > No virus found in this incoming message.
          >> > Checked by AVG Free Edition.
          >> > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
          >> > 30/01/2008 20:51
          >> >
          >> >
          >>
          >
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
          > --
          > No virus found in this incoming message.
          > Checked by AVG Free Edition.
          > Version: 7.5.516 / Virus Database: 269.19.18/1254 - Release Date:
          > 31/01/2008 20:30
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.