Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Normally, the <code>ready</code> event jQuery function is called like this</p> <pre><code>$(function() { /* ... */ }); // or jQuery(function() { /* ... */ }); // or jQuery(document).ready(function() { /* ... */ }); </code></pre> <p>Bottom line, the function is not given a particular context; the actual context given by jQuery to the function is the <code>HTMLDocument</code> element, regardless of the argument (in the last example, <code>document</code>). Why is this so is another subject. </p> <p>Generally, each of these functions are called later, after everything has been loaded, but not necessarily. In your case, there is a reference to <code>MyNameSpace</code> before the <code>ready</code> event happens. Even if Javascript is a <a href="http://en.wikipedia.org/wiki/LALR_parser" rel="nofollow noreferrer">LALR</a>-type language, and it will find the symbol declared later, this is not a good practice. What if <code>MyNameSpace</code> would be set to something else later on, before jQuery triggers the <code>ready</code> callback functions? Your <code>ready</code> callback would not get that new reference. Unless intentional, the reference should be made <em>inside</em> the <code>ready</code> callback, when everything is.... ready.</p> <p>Then, inside the <code>ready</code> callback, there are other techniques to assign a context to a function. <a href="https://stackoverflow.com/users/417562/lonesomeday">lonesomeday</a> have pretty much given the correct way to accomplish what you are trying to do.</p> <pre><code>(function() { // this == MyNamespace }).call(MyNamespace); </code></pre> <p>The above code executes an anonymous function right away, where <code>this == MyNameSpace</code></p> <p><strong>note</strong> : the difference between <em>apply</em> and <em>call</em> is decribed <a href="http://trephine.org/t/index.php?title=JavaScript_call_and_apply" rel="nofollow noreferrer">here</a></p> <p>Now, comes the bottom part of the code you provided :</p> <pre><code>//load the additional files that are needed and fire onReadyCallback MyNameSpace.Util.loadFiles(defaultJsFiles,function(){ MyNameSpace.Util.require(['My.App','My.Theme','My.DomHandler'], function(){ onReadyCallback.apply(window); }); }); </code></pre> <p>This is problematic, and unnecessary. Is the function <code>onReadyCallback</code> only needed there, or will it be called several times? If it needs to be called only once, spare the global namespace, and simply do :</p> <pre><code>//load the additional files that are needed and fire onReadyCallback MyNameSpace.Util.loadFiles(defaultJsFiles,function(){ MyNameSpace.Util.require(['My.App','My.Theme','My.DomHandler'], function(){ // if everything is done loading, the function will be executed, otherwise // it's execution will be postponed later jQuery(function() { // create our nicely wrapped anonymous function now (function() { if(!this.loggedIn()){ return; } // ...Lots of Code referring to MyNameSpace using "this" })(MyNameSpace); // grab our most recent reference of `MyNameSpace` }); }); }); </code></pre> <p>If you don't like the indentation (it's merely a developer's taste), replace everything in the <code>ready</code> callback with (something like) :</p> <pre><code> initMyNameSpace.apply(MyNameSpace); </code></pre> <p>and create your function outside, on the global space :</p> <pre><code> function initMyNameSpace() { if(!this.loggedIn()){ return; } // ...Lots of Code referring to MyNameSpace using "this" }; </code></pre> <p>But I would recommand, at least, to put it in the <code>require</code> callback function so it...</p> <ol> <li>...does not pollute the global namespace with a run-once function</li> <li>...is not accessible from anywhere (keep it private)</li> <li>...can be found quickly when editing the source code</li> <li>etc.</li> </ol> <p><strong>note</strong> : usually, <em>apply</em> and <em>call</em> are used to avoid repeatedly accessing objects like <code>some.thing.pretty.deep = value;</code> or when one function needs to be applied to many but not all objects, and thus extending the object's prototype is just not a good idea.</p> <p>This is my opinion anyway, and how I would do things, without any more knowledge of your code or what you are doing.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload