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

41912Re: Execution Scope and Functions/Objects/Classes/etc

Expand Messages
  • Caridy Patino
    Dec 3, 2008
    • 0 Attachment
      Hello Alex,

      Sorry for the delay. I will try to explain you why... but you have two
      different questions here. I will try to explain YOUR particular
      problem with the namespace, and then I will try to explain the
      class/object approach.

      Let's start for the namespace, here is the code:

      > this.rootLayout= new YAHOO.widget.Layout({ });

      > YAHOO.au.com.company.SomeWidget.rootLayout= new
      YAHOO.widget.Layout({ });

      As you can see, the right part of the sentences are exactly the same,
      which is the instantiation process. The left part is the variable that
      will hold the new object reference. Depending of the execution scope
      you can do this:
      this.rootLayout = ABC;
      or this:
      YAHOO.au.com.company.SomeWidget.rootLayout = ABC;

      The execution scope is the one that introduces the confusion here.
      Normally the functions/methods defined for the object
      YAHOO.au.com.company.SomeWidget uses the object itself as the
      execution scope, but not always, depending of the call.

      Let me show you an example:

      YAHOO.au.com.company.SomeWidget.myFunc = function () {
      this.myObj = new YAHOO.widget.Layout({ });
      }

      This example should work fine... but here is another option:

      YAHOO.au.com.company.SomeWidget.myFunc = function () {
      YAHOO.util.onDOMReady(function() {
      this.myObj = new YAHOO.widget.Layout({ });
      }
      }

      Now we want to wait until the DOM get ready, and executing the same
      code, but there is an error in the code... this is not longer
      "YAHOO.au.com.company.SomeWidget", because you use an inline function,
      and because in JS all the elements are object, even the functions, the
      inline function defines a new object scope, and this is a reference to
      the inline function itself, which mean that you have to use the full
      namespace, of use the THAT trick:


      YAHOO.au.com.company.SomeWidget.myFunc = function () {
      YAHOO.util.onDOMReady(function() {
      YAHOO.au.com.company.SomeWidget.myObj = new YAHOO.widget.Layout({
      });
      }
      }

      OR

      YAHOO.au.com.company.SomeWidget.myFunc = function () {
      var that = this;
      YAHOO.util.onDOMReady(function() {
      that.myObj = new YAHOO.widget.Layout({ });
      }
      }

      So, you need to keep an eye in the scope for each function, and you
      will be fine... for sure... hehehe.

      Now, about the object/class/etc. As I said, everything is a object in JS.

      In your case:

      > -------------------------------------------------------------------
      > YAHOO.au.com.company.SomeWidget = new function(){
      > this.rootLayout=null;
      > this.renderLayout=function(){
      > YAHOO.au.com.company.SomeWidget.rootLayout= new
      > YAHOO.widget.Layout({ });
      > .....
      > }
      > }
      > -------------------------------------------------------------------
      > YAHOO.au.com.company.SomeWidget = {
      > renderLayout: function(){
      >
      > }
      > }

      Both definitions are the same... you are creating a new object, and
      setting some properties/methods to that object. The second sintax is
      more likely, and widely used.

      And the other approach is the prototype approach, but you can get more
      ACADEMIC definitions from the Douglas trilogy in the YUI theater:

      http://developer.yahoo.com/yui/theater/

      My 2 cents, hope this helps to understand this better.

      Best Regards,
      Caridy


      --- In ydn-javascript@yahoogroups.com, "Alex Wibowo" <alexwibowo@...>
      wrote:
      >
      > Hi Caridy,
      >
      > Thanks heaps. That explains the whole thing! :)
      >
      >
      >
      >
      > Sorry for this fundamental Javascript question... but I'm hoping
      that you
      > will be able to assist me (or to point to where I can learn more
      about it):
      >
      > What is the difference between:
      >
      > -------------------------------------------------------------------
      > YAHOO.au.com.company.SomeWidget = new function(){
      > this.rootLayout=null;
      > this.renderLayout=function(){
      > YAHOO.au.com.company.SomeWidget.rootLayout= new
      > YAHOO.widget.Layout({ });
      > .....
      > }
      > }
      > -------------------------------------------------------------------
      >
      > and
      > -------------------------------------------------------------------
      > YAHOO.au.com.company.SomeWidget = {
      > renderLayout: function(){
      >
      > }
      > }
      > -------------------------------------------------------------------
      >
      > I tried to find some reference... but cant find any clear
      explanation. My
      > understanding at the moment is that the second one is creating an
      array of
      > function.... while the first one is creating a class (not really a
      class..
      > but a variable that holds both variable & function?).. While we are
      looking
      > at the first one... why cant I call:
      >
      > this.rootLayout= new YAHOO.widget.Layout({ });
      >
      > and instead I have to use:
      >
      > YAHOO.au.com.company.SomeWidget.rootLayout= new
      YAHOO.widget.Layout({ });
      >
      > (I'm a Java programmer, and the notation above confuses me a bit)
      >
      >
      > I'm really sorry for this fundamental question... but I cant really find
      > useful reference on the web.
      >
      >
      >
      >
      >
      > On Tue, Dec 2, 2008 at 8:08 AM, Caridy Patino <caridy@...> wrote:
      >
      > > Hey Alex, as I mentioned in my previous post, unit.body is a DOM
      > > reference, you can not do this:
      > >
      > > unit.body = XX;
      > >
      > > but you can do this:
      > >
      > > unit.body.innerHTML = xx;
      > >
      > > If you want to use the fetch method, you can do this:
      > > YAHOO.plugin.Dispatcher.fetch(unit.body, '/some-url.html');
      > >
      > > If you want to use the Bubbling 2.0 beta, you can do this:
      > > YAHOO.plugin.Dispatcher.addUnit(unit, layout, {uri:
      '/some-url.html'});
      > >
      > > :-)
      > >
      > >
      > > Best Regards,
      > > Caridy Patino (caridy at yahoo-inc.com)
      > > Yahoo! LATAM
      > >
      > > --- In ydn-javascript@yahoogroups.com
      <ydn-javascript%40yahoogroups.com>,
      > > "Alex Wibowo" <alexwibowo@>
      > > wrote:
      > > >
      > > > ANyway... thx for that guys... I'll try the debugger; statement (i
      > > dont know
      > > > of this before!! so thanks for it!)...
      > > >
      > > > and i'll try to figure out whats wrong with my code that makes the
      > > > unit.body = XX doesnt work...
      > > >
      > > > I tried by simply doing:
      > > >
      > > >
      > > > unit.body = 'blallballa' (which should replace the content of the
      > > center
      > > > unit by text 'blalblalba, shouldnt it?)
      > > > or maybe i _have_ to use DOM reference (i..e not simple text)? i.e.
      > > should
      > > > it work if I do:
      > > >
      > > > unit = layout.getUnitByPosition ('center');
      > > > unit.body = YAHOO.plugin.Dispatcher.fetch('some url');
      > > >
      > > > I remember I've tried this before, and it didnt work. The content
      > > didnt get
      > > > replaced by the fetched URL content....
      > > > But again.... maybe I did something wrong...
      > > >
      > > >
      > > >
      > > >
      > > >
      > > > On Tue, Dec 2, 2008 at 7:37 AM, Alex Wibowo <alexwibowo@> wrote:
      > > >
      > > > > Hi Caridy...
      > > > >
      > > > > Thats what I thought too! I tried to get unit by the position, and
      > > replace
      > > > > the body attribute. But it doesnt render the fetched content.
      > > > >
      > > > > Maybe I was doing something wrong???
      > > > >
      > > > >
      > > > >
      > > > >
      > > > > On Tue, Dec 2, 2008 at 4:45 AM, Caridy Patino <caridy@> wrote:
      > > > >
      > > > >> Hey Alex,
      > > > >>
      > > > >> What do you mean with "why you cant replace the content of center
      > > unit
      > > > >> in the YUI layout"???? You can do that... If you have a
      reference to
      > > > >> the unit, or a reference to the layout object, you can do that...
      > > > >>
      > > > >> unit = layout.getUnitByPosition ('center');
      > > > >> unit.body -> DOM reference
      > > > >>
      > > > >> Best Regards,
      > > > >> Caridy Patino (caridy at yahoo-inc.com)
      > > > >> Yahoo! LATAM
      > > > >>
      > > > >> --- In
      ydn-javascript@yahoogroups.com<ydn-javascript%40yahoogroups.com>
      > > <ydn-javascript%40yahoogroups.com>,
      > >
      > > > >> "Alex Wibowo" <alexwibowo@>
      > > > >> wrote:
      > > > >>
      > > > >> >
      > > > >> > Hi Satyam..
      > > > >> >
      > > > >> > Another question for you (as you are the YUI developer
      team).... is
      > > > >> there
      > > > >> > any reason why you cant replace the content of center unit in
      > > the YUI
      > > > >> > layout?
      > > > >> >
      > > > >> >
      > > > >> >
      > > > >> > On Tue, Dec 2, 2008 at 12:17 AM, Alex Wibowo <alexwibowo@>
      wrote:
      > > > >> >
      > > > >> > > Hi Satyam,
      > > > >> > >
      > > > >> > >
      > > > >> > > What did u mean by that? The fetched code is not
      available at all
      > > > >> in the
      > > > >> > > 'script' tab in firebug.... so how can i put the
      breakpoint ??
      > > > >> > > Did I miss something obvious here??
      > > > >> > >
      > > > >> > >
      > > > >> > >
      > > > >> > >
      > > > >> > > On Mon, Dec 1, 2008 at 9:51 PM, Satyam <satyam@> wrote:
      > > > >> > >
      > > > >> > >> You can place a 'debugger' statement in the loaded code and
      > > > >> that will
      > > > >> > >> act as a breakpoint.
      > > > >> > >>
      > > > >> > >>
      > > > >> > >> Alex Wibowo wrote:
      > > > >> > >> > Hi Caridy,
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > As I mentioned... I'm trying to find the most
      effective way to
      > > > >> debug
      > > > >> > >> > the Javascript that is executed inside the fetched page.
      > > > >> > >> > As you have pointed, this is not possible using Firebug
      > > (i.e. in
      > > > >> > >> > firebug, the javascript debugger will go as far as the
      call to
      > > > >> fetch()
      > > > >> > >> > or addUnit()).
      > > > >> > >> > My alternative strategy, is to make the fetched page as
      > > > >> > >> > 'self-contained' as possible. i.e. so that it is
      possible to
      > > > >> visit the
      > > > >> > >> > fetched page by itself - so that I can do my javascript
      > > > >> debugging there.
      > > > >> > >> > However, this has a problem.
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > Say the parent page includes yuiloader-min.js ,
      container.js,
      > > > >> etc, and
      > > > >> > >> > the same javascript files are needed in the fetched page.
      > > > >> > >> > I have to include it twice. Hence , the browser will
      try to
      > > > >> fetch them
      > > > >> > >> > twice. This is bad, isnt it?
      > > > >> > >> > But i dont know how to solve it otherwise...
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > On Mon, Dec 1, 2008 at 9:05 AM, Caridy Patino
      > > > >> <caridy@<caridy%40gmail.com>
      > > > >>
      > > > >> > >> > <mailto:caridy@ <caridy%40gmail.com>>> wrote:
      > > > >> > >> >
      > > > >> > >> > Hey Alex,
      > > > >> > >> >
      > > > >> > >> > Here are the differences these methods:
      > > > >> > >> >
      > > > >> > >> > YAHOO.util.Dispatcher.fetch: uses the YUI Connection
      > > Manager to
      > > > >> load
      > > > >> > >> > the content and places the result with in the specified
      > > element
      > > > >> (ID).
      > > > >> > >> >
      > > > >> > >> > YAHOO.util.Dispatcher.addUnit: leaves the AJAX routine
      to the
      > > > >> Layout
      > > > >> > >> > Manager, and handles the response, executing the
      scripts, and
      > > > >> placing
      > > > >> > >> > the result inside the specified unit (unit reference or
      > > position).
      > > > >> > >> >
      > > > >> > >> > YAHOO.util.Dispatcher.delegate: leaves the AJAX
      routine to the
      > > > >> > >> > Tabview, and handles the reponse, executing the
      scripts, and
      > > > >> placing
      > > > >> > >> > the result inside the specified tab (tab reference).
      > > > >> > >> >
      > > > >> > >> > So, you should use the addUnit all the time with your
      layouts,
      > > > >> but if
      > > > >> > >> > you want to use the fetch, it's fine, you just need to get
      > > the Unit
      > > > >> > >> > DOM Element before that, to call the fetch method using
      > > the DOM
      > > > >> > >> > Reference.
      > > > >> > >> >
      > > > >> > >> > About the errors, all these method supports error
      handling,
      > > > >> using the
      > > > >> > >> > property "error" in the configuration object,
      referencing to a
      > > > >> > >> > function that handles the error. But there is not way
      to get
      > > > >> the real
      > > > >> > >> > error because we use an anonymous function. But we can
      get the
      > > > >> chunk
      > > > >> > >> > that generates the error, that certainly will help us to
      > > figure it
      > > > >> > >> > out.
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > Best Regards,
      > > > >> > >> > Caridy Patino (caridy at yahoo-inc.com
      <http://yahoo-inc.com>)
      > > > >> > >> > Yahoo! LATAM
      > > > >> > >> >
      > > > >> > >> > --- In
      > > > >> ydn-javascript@yahoogroups.com
      <ydn-javascript%40yahoogroups.com><ydn-javascript%
      > > 40yahoogroups.com>
      > > > >> <ydn-javascript%40yahoogroups.com>
      > > > >> > >> >
      > > > >>
      > >
      <mailto:ydn-javascript%40yahoogroups.com<ydn-javascript%2540yahoogroups.com>
      > > <ydn-javascript%2540yahoogroups.com>
      > > > >> <ydn-javascript%2540yahoogroups.com>>,
      > > > >> > >> "Alex Wibowo"
      > > > >> > >> > <alexwibowo@>
      > > > >> > >> > wrote:
      > > > >> > >> >
      > > > >> > >> > >
      > > > >> > >> > > Totally separate question....
      > > > >> > >> > > With all this Dispatcher.addUnit & Dispatcher.fetch.....
      > > what
      > > > >> is the
      > > > >> > >> > best
      > > > >> > >> > > way to do debugging? I'm using Firefox + Firebug for my
      > > > >> development,
      > > > >> > >> > and the
      > > > >> > >> > > fetched page (or added unit) wont get displayed in the
      > > Firebug
      > > > >> > >> > javascript
      > > > >> > >> > > debugger. Hence I cant put any breakpoints, etc.
      > > > >> > >> > >
      > > > >> > >> > >
      > > > >> > >> > >
      > > > >> > >> > > Thanks again, and sorry for the spam...
      > > > >> > >> > >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > --
      > > > >> > >> > Best regards,
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > WiB
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > ----------------------------------------------------------
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >> > No virus found in this incoming message.
      > > > >> > >> > Checked by AVG - http://www.avg.com
      > > > >> > >> > Version: 8.0.176 / Virus Database: 270.9.12/1821 - Release
      > > Date:
      > > > >> > >> 30/11/2008 17:53
      > > > >> > >> >
      > > > >> > >> >
      > > > >> > >>
      > > > >> > >>
      > > > >> > >
      > > > >> > >
      > > > >> > >
      > > > >> > > --
      > > > >> > > Best regards,
      > > > >> > >
      > > > >> > >
      > > > >> > > WiB
      > > > >> > >
      > > > >> > >
      > > > >> >
      > > > >> >
      > > > >> > --
      > > > >> > Best regards,
      > > > >> >
      > > > >> >
      > > > >> > WiB
      > > > >> >
      > > > >>
      > > > >>
      > > > >>
      > > > >
      > > > >
      > > > >
      > > > > --
      > > > > Best regards,
      > > > >
      > > > >
      > > > > WiB
      > > > >
      > > > >
      > > >
      > > >
      > > > --
      > > > Best regards,
      > > >
      > > >
      > > > WiB
      > > >
      > >
      > >
      > >
      >
      >
      >
      > --
      > Best regards,
      >
      >
      > WiB
      >
    • Show all 25 messages in this topic