How to properly define a page's functionality in javascript
<p>I am currently writing all javascript functionality of a certain page in jQuery's <code>document.ready</code> handler:</p>

<pre><code>$(document).ready(function() {
    var one, two, three;
    function f1(par1) {}
    function f2() {}
        ...
});
</code></pre>

<p>I feel that this isn't optimal or according to javascript best practices. What I need is a <strong>private</strong> scope for the page's functionality, nothing needs to be called externally.</p>

<p>I've seen a number of different ways, getting inspiration from:</p>

<ul>
<li><a href="http://code.jquery.com/jquery-1.9.1.js" rel="nofollow">jQuery source</a></li>
<li><a href="https://github.com/marijnh/CodeMirror/blob/master/lib/codemirror.js" rel="nofollow">codemirror source</a></li>
<li><a href="http://stackoverflow.com/q/16496922/1313143">This question</a></li>
<li><a href="http://stackoverflow.com/q/881515/1313143">Javascript Namespace Declaration</a></li>
</ul>

<p>The different ways involve:</p>

<ul>
<li><code>(function(window) { anObj = {} ... window.functionality = anObj }(window));</code></li>
<li><code>window.functionality = (function() { return functionality }())</code></li>
<li><code>var functionality = {}; (function(obj) { obj.f1 = ... }(functionality))</code></li>
<li><code>var functionality = { f1: function(){}, f2: function(){} }</code>;</li>
</ul>

<p>But I wonder which is the right way to go for <strong>private functionality on a page</strong>? Which is "most correct" taking everything into account?</p>
