How should I think of my JavaScript application namespaces?

Question

I am creating an application that has one global namespace:

var myApp = {};

Then I have a bunch of different reusable “modules” consisting of models, views, and controllers.

//Bar chart module code
org.example.chart.bar.module
org.example.chart.bar.model
org.example.chart.bar.view
org.example.chart.bar.controller

I also have a great syntax for dataSource and dataManager for loading data into dataSource:

org.example.data.dataSource
org.example.data.dataManager //populates the dataSource with CSV data

And finally, the translation strings and settings that should be available in the application:

org.example.static.translations
org.example.static.settings

How would you (reconfigure) this so that I have easy access to application-level singles (e.g. dataSource, dataManager, translations, etc.) and can easily create reusable modules that fall under the current application instance?

( , , "" ? : myApp.translations = org.example.static.translations?)

Answer 1

, . .

require.js browserify seajs.

:

(function () {
  var jQuery = require("jQuery");
  var chart = require("chart"); 

  ...

  define("moduleName", moduleObject);
})();

Answer 2

, . .

 org.ds = org.example.data.dataSource;

 org.ds.getDatasource();

 org.example.data.dataSource.getDatasource();

.

: ,

 var dataSource = function () { return org.example.data.dataSource.getDatasource(); };

Answer 3

Consider using something like RequireJS to organize your modules.

Some excellent resources from Addi Osmani:

http://addyosmani.com/largescalejavascript/

http://addyosmani.com/blog/large-scale-jquery/

http://addyosmani.com/resources/essentialjsdesignpatterns/book/