JavaScript OO Design

Question

So I am creating a complex application with JavaScript. I am using an OO design so the majority of my code is in different files for maintainability. How can I import all of the files that I need to create my application?

Answer 1

You can use some class loader framework like RequireJS and yepnope.js, but if you have many different files it can get slow. Importing files one by one is not a great idea because it will slow down your page dramatically due to too many server requests. If you have many files it's better to do some grouping and fetch groups of them together using one request. Although many people feel this is premature optimization it can help to pick a framework that allows you to do this grouping.

Answer 2

I would have a look at browserify: http://browserify.org/

Answer 3

I would recommend a module-loading framework. RequireJS is a popular option for this, used by the Dojo Toolkit. Using RequireJS, the AMD (Asynchronous Module Definition) loader will auto-load dependencies for you and you can also define your own modules.

If you're familiar with other programming languages, require is the counterpart to import or #include but in the web, this is asynchronous. This makes management easier (dependencies are explicit rather than implicit) and you don't need to worry about the order of your javascript files.