13

例子：

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 一起工作。希望得到一些关于其他人如何做到这一点的反馈和建议。

4

3 回答 3

6

我假设您的所有页面都有一个 main.js 文件？

无论如何，通常您会使用 API 文档中解释的 script 标签的data-main属性，这意味着您每页都有一个主 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>
于 2011-11-07T10:53:33.700 回答
3

RequireJS 的创建者实际上做了一个示例项目，正是这样做的：https ://github.com/requirejs/example-multipage

于 2013-07-26T10:14:09.227 回答
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("',\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>

PS脚本要求window[page]变量。index.js我的意思是，页面的每个 .js 脚本——例如index页面是window.index可变的。（我知道，这不太好 - 阅读 PPS ；））

PPS我是 requireJS 的新手（我今天才知道），这是我的初稿，我想，我会用另一种方式来完成它：

2) 作为现在的一个概念 :) 您将脚本保留为 AMD 模块（不是通常的脚本，而是 requireJS 的模块）。您可以保存在.json文件中的模块映射：

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

您应该将页面名称或页面 ID 传递给main.js（您可以在 DOM 元素中传递此值 - 在站点模板或模板变量中）。所以main.js知道页面名称，并加载您的modules.json文件。它获取特定的模块和requires它们。

main.js还可以保留每个页面上需要的依赖项（例如 jquery、一些 jquery 插件等）（jquery 插件更好地包装为模块）

PS对不起我的英语

于 2011-11-19T23:50:51.630 回答