Загрузчик (main.js)

Загрузка клиентской части приложения начинается с загрузки файла public/js/main.js. Файл public/js/main.js является точкой входа для библиотеки RequireJS public/js/requirejs/require.js,

Пример кода приведен ниже:

<!DOCTYPE html>
<html>
<head>
    ...
    <!-- Require -->
    <script type="text/javascript" data-main="/js/main" src="/js/lib/requirejs/require.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

RequireJS – если не самый популярный, то один из самых популярных файловых/модульных загрузчиков. При создании крупных компонентных проектов без него (или его аналогов) не обойтись, т.к. он решает основные проблемы таких приложений:

зависимости между модулями
засорение глобальной области

Зависимости между модулями

Настройка зависимостей между модулями осуществляется в файле public/js/main.js.

Пример кода таких зависимостей можно привести здесь:

(function ($) {
    ...
    requirejs.config({
        baseUrl: "/js",
        paths: {
            ...
            bootstrap: 'lib/bootstrap/bootstrap.min',
            respond: 'lib/bootstrap/respond.min', // bootstrap for old vers
            html5shiv: 'lib/bootstrap/html5shiv.min', // bootstrap for old vers
            jquery: 'lib/jquery/jquery.min',
            underscore: 'lib/underscore/underscore-min',
            storage: 'lib/jstorage/jstorage',
            backbone: 'lib/backbone/backbone-min',
            ExtendClass: 'lib/Extend.class',
            ...
        },
        shim: {
            'jquery': {
                exports: '$'
            },
            'bootstrap': {
                deps: ['jquery', 'respond', 'html5shiv']
            },
            'underscore': {
                exports: '_'
            },
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'app/app': {
                deps: ['ExtendClass', 'bootstrap', 'underscore', 'storage']
            },
            ...
        }
    });
})(jQuery)

Класс App

В файле public/js/main.js мы также создаем объект класса App public/js/app/app.js.

...
require(['app/app'], function (App) {
    window.app = new App();
});

В классе App создается объект локализации класса Land public/js/app/land.js и объект общих системных функций класса System public/js/app/system.js. А также создаются и регистрируются объекты с их параметрами на основе сервисных классов, заданных для текущей страницы сайта приложения.

...
// Create System object
this.sys = new System();
// Create Lang(language) object
this.lb = new Lang(this.sys);

// Add script resources 
if (undefined !== window.BSA) {
    _.each(BSA.ScriptResources, function (resource) {
        require([resource], function (res) {
            // Create resource object 
            if (res && res.RegRunOnLoad) {
                res.RegRunOnLoad();
            }
        });
    });
}
...