RequireJS: лучший способ запуска специальных модулей?

Пример:

mysite.com/page1 зависит от сценариев в module1.js

mysite.com/page2 зависит от сценариев в module2.js

mysite.com/page3 зависит от сценариев в module3.js

Есть ли у кого-нибудь какие-либо рекомендации по использованию Javascript для этой конкретной страницы. Прежде чем я начну использовать RequireJS, я бы использовал только один файл Javascript и инициализировал только те модули, которые мне нужны для этой страницы. как это

На странице <head>:

var page = "pageTitle";

В главном файле JS:

var myModules = {};

myModules.pageTitle = (function(){

    return {
          init: function(){
             alert('this module has been initiated');
          }
    }
})();


myModules[page].init();

Не совсем уверен, как такая техника будет работать с RequireJS. Хотелось бы получить некоторые отзывы и советы о том, как это делают другие.

Ответ 1

Я предполагаю, что у вас есть один файл main.js для всех ваших страниц?

В любом случае, как правило, вы должны использовать атрибут data-main тега script, как описано в документации API, что означает, что у вас есть один основной файл js на странице. Таким образом, вы можете избавиться от буквенного кода JavaScript на своей странице и в полной мере использовать шаг оптимизации RequireJS.

Пример:

Разработайте файл main.js как модуль RequireJS:

define([<dependencies go here>], function(){

    return function(pageTitle){
        //do you page dependent logic here
    }
}

В вашем html у вас будет что-то вроде:

<html>
<head>
<script src="require.js"></script>
<script>
    require(["main.js"], function(init){
        init("pageTitle");
    });
</script>

Ответ 2

Создатель RequireJS фактически сделал примерный проект, который делает это явно: https://github.com/requirejs/example-multipage

Ответ 3

1) На каком языке вы работаете в фоновом режиме?

Вы можете сохранить script -конфигурацию в базе данных или в файлах конфигурации. (Например: страница page1 имеет модули: module1, module2 и module4 и т.д.).

У меня есть такой файл шаблона php для генерации тегов <script> на моей странице:

<script src="http://requirejs.org/docs/release/1.0.1/minified/require.js"></script>
<script>
    require([
        <?php echo "'". implode("',\n\t'", $this->scripts) . "'\n"; ?>
    ], function(a){

        function run(page) {
            if ( window.hasOwnProperty(page) ) {
                window[page].start();
            }
        }

        var page = '<?php echo $this->page; ?>';

        run('all'); // activating scripts needed for every page
        run(page); // and for current page
    });
</script>

P.S. script запрашивает переменную window [page]. Я имел в виду, что каждый .js script для страницы - например index.js для index страницы - это переменная window.index. (Я знаю, это не очень хорошо - читайте P.P.S;))

PPS Я начинаю требовать JS (я знал об этом только сегодня), и это мой первый проект, и я думаю, я сделаю это по-другому:

2) Как концепция на данный момент:) Вы сохраняете свои сценарии как модули AMD (не как обычные скрипты, а как модули для requireJS). Карта модулей вы можете хранить в файле .json:

{
    'index' : [ 'news', 'banners' ],
    'contacts' : [ 'maps', 'banners', 'donate' ],
    'otherpage' : [ 'module1', 'module2' ]
}

Вы должны передать имя страницы или идентификатор страницы в main.js (это значение можно передать в элементе DOM - в шаблонах сайта или в переменных шаблона). Поэтому main.js знает имя страницы и загружает ваш файл modules.json. Он получает определенные модули и requires их.

main.js также может содержать зависимости, которые необходимы на каждой странице (например, jquery, некоторые jquery-плагины и т.д.) (плагины jquery лучше переносить как модули)

P.S. извините за мой английский