JavaScript external code for page and objects - Best practice

Question

I have a few questions about Best Practises using javascript in external files and namespacing .

Let's have a namespace MyCompany, global configuration stuff, code for individual pages and maybe some "API"s.

var MyCompany = {};

Global configuration in HTML MyCompany.root = "/";

Which approach is better

• First

   MyCompany.Page = {}; (function(ns} { ns.init = function() { var root = MyCompany.root; ajax(root+"somepage.html"); }; }(MyCompany.Page.Home = MyCompany.Page.Home || {}); 

  and in html use

   <script> $( function() { MyCompany.Page.Home.init(); }); </script> 

• Second (Page as an Class and its instance)

   MyCompany.Page.Home = function() { var root = MyCompany.root; this.init = function() { ajax(root + "somepage.html"); }; }; 

  in html

   <script> var page = new MyCompany.Page.Home(); $( function() { page.init(); }); </script> 

Submodules and Mixing API with Page javascript

If our Homepage has some reviews.

 MyCompany.Page.Home.Reviews = function() {
       this.init = function() {
            load_stuff();
       }
 };

And now inside Page init use

 MyCompany.Home.Page = function(data) {
     var reviews = new MyCompany.Home.Page.Reviews();

     this.init = function() {
            reviews.init();
     };
 };

Could that cause troubles?

It's obvious that Reviews extends MyCompany.Home.Page, but MyCompany.Home.Page requires Reviews.

It shouldn't cause troubles if instance on MyCompany.Home.Page is created after MyCompany.Home.Page.Reviews are loaded, right? Because Reviews in fact will extend the function object, is that right?

I guess this depends on answer to first question.

It also could be

(function(ns) {
     ns.init = function() { MyCompany.Page.Home.Reviews.init(); };
})(MyCompany.Page.Home = MyCompany.Page.Home || {} );

(function(ns) {
     ns.init = function() { load_stuff(); };
})(MyCompany.Page.Home.Reviews = MyCompany.Page.Home.Reviews || {});

Also should I somehow separate API of Page javascript?

Such as

 MyCompany.APIS.Maps = function(location) {
          /* Private variables */
          var _location = location; 

          /* Private functions */
          function search_address(address) { .. do search .. }

          /* Public interface */
          this.search = search_address; 

          do some initialization ...
 };

I'd be glad if anyone reads it all to leave some comment.

Thank you in advance.

Answer 1

Which approach is better? Revealing singleton module (first) or a constructor function/class and its instance (second)?

Depends on your use case. If you don't expect multiple page objects to exist at once (and you hardly seem to), the singleton (with an init function) is really fine. Everything else could be considered wrong or at least overkill.

Same thing holds true for your MyCompany.Page.Home.Reviews (or MyCompany.Home.Page.Reviews ?) class module, of which you seem to need only one instance.

It shouldn't cause troubles if instance on MyCompany.Home.Page is created after MyCompany.Home.Page.Reviews are loaded, right? Because Reviews in fact will extend the function object, is that right?

Yes.

 (function(ns) { ns.init = function() { MyCompany.Page.Home.Reviews.init(); }; })(MyCompany.Page.Home = MyCompany.Page.Home || {} ); 

If you have that ns shortcut available, you should use it:

(function(ns) {
    ns.init = function() { ns.Reviews.init(); };
})(MyCompany.Page.Home = MyCompany.Page.Home || {} );

Also should I somehow separate API of Page javascript?

For development: Yes, in every case. Each module should have its own file. When deploying, you might concatenate them together for faster loading, but that's a different question.