RequireJS: лучший метод для запуска отдельных модулей страницы? - PullRequest
Новая
       18

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

13 голосов
/ 07 ноября 2011

Пример:

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.Очень хотелось бы получить отзывы и советы о том, как это делают другие.

Ответы [ 3 ]

6 голосов
/ 07 ноября 2011

Я полагаю, у вас есть один файл 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>
3 голосов
/ 26 июля 2013

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

2 голосов
/ 20 ноября 2011

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("',\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. скрипт запрашивает переменную window [page]. Я имел в виду, что каждый скрипт .js для страницы - например, index.js для index страницы делает переменную window.index. (Я знаю, это не так хорошо - читай P.P.S;))

P.P.S. Я новичок в требовании 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. извините за мой английский

...