Блог

Главная - Вопросы по программированию - RequireJS: лучший метод для запуска модулей, специфичных для страницы?

RequireJS: лучший метод для запуска модулей, специфичных для страницы?

#javascript #modularity #requirejs

#javascript #модульность #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>

Комментарии:

1. а, хорошо, я понимаю. Но не лучше ли обслуживать только один файл для всего сайта?

2. Мммм, это может иметь смысл, определенно с шагом оптимизации. Вы также можете сделать следующее в своем html-файле: require([«main.js «], function(init){ init(«Заголовок страницы»); });

3. Не могли бы вы расширить эту концепцию?

4. Развивать вас main.js файл в загрузчик RequireJS модуль: define([<dependencies go here>], function(){ функция возвращения(с именем pagetitle){ ` //ты страницу логика здесь ` } } In your html, you'll have something like: <html> <head> <script src=»require.js»></script> <script> требуется([«main.js»], функция(метод init){ инициализации(«название страницы»); }); `</script> Может быть, мы должны создать jsfiddle для этого, в комментариях, кажется, не быть правильным инструментом, чтобы это обсудить 😉

5. Я отредактировал ваш ответ с вашим предложением и создал JSFiddle того, как я хотел бы, чтобы это работало: jsfiddle.net/WilsonPage/x543W

Ответ №2:

1) Какой язык вы используете в серверной части?

Вы можете сохранить конфигурацию вашего скрипта в базе данных или в файлах конфигурации. (Например: страница 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("',nt'", $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>

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

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

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 лучше переносить в виде модулей)

PS извините за мой английский

Ответ №3:

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