RequireJS：运行页面特定模块的最佳方法？

发布于 2024-12-13 19:40:02 字数 789 浏览 2 评论 0原文

示例：

mysite.com/page1 取决于 module1.js 中的脚本

mysite.com/page2 取决于脚本module2.js 中

mysite.com/page3 取决于 module3.js 中的脚本

有没有人有任何仅运行所需的 Javascript 的最佳实践那个特定的页面。在开始使用 RequireJS 之前，我只会使用一个 Javascript 文件并仅初始化该页面所需的模块。像这样

在页面 ：

var page = "pageTitle";

在主 JS 文件中：

var myModules = {};

myModules.pageTitle = (function(){

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


myModules[page].init();

不太确定这样的技术如何与 RequireJS 一起使用。希望得到一些关于其他人如何做到这一点的反馈和建议。

原文

Example:

mysite.com/page1 depends on scripts in module1.js

mysite.com/page2 depends on scripts in module2.js

mysite.com/page3 depends on scripts in module3.js

Does anyone have any best practices for only running the Javascript required for that specific page. Before I started using RequireJS I would use only one Javascript file and init only the modules I needed for that page. like this

In page <head>:

var page = "pageTitle";

In Main JS File:

var myModules = {};

myModules.pageTitle = (function(){

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


myModules[page].init();

Not really sure sure how a technique like this would work with RequireJS. Would love some feedback and advice on how others are doing this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゝ杯具 2024-12-20 19:40:02

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

无论如何，通常您会使用脚本标记的 data-main 属性，如 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>

I assume you have one main.js file for all your pages?

Anyway, typically you would use the data-main attribute of the script tag as explained in the API documentation, which would mean you have one main js file per page. This way, you can get rid of the literal javascript code in you page, and take full advantage of the RequireJS optimization step.

Example:

Develop you main.js file as a RequireJS module:

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

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

In your html, you'll have something like:

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

回复收藏 0 原文

南街女流氓 2024-12-20 19:40:02

1）你们后端使用什么语言？

您可以将脚本配置保存在数据库或配置文件中。（例如：页面 page1 具有模块：module1、module2 和 module4 等）。

我有这样一个 php 模板文件，用于在我的页面上生成

<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] 变量。我的意思是，页面的每个 .js 脚本 - 例如 index 页面的 index.js 都在创建 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 文件。它获取特定的模块并需要它们。

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

PS 抱歉我的英语

1) What language do you use at back-end?

You can keep your script-configuration in database or in configuration files. (For example: page page1 has modules: module1, module2, and module4, etc).

I have such a php template file for generating <script> tags on my page:

<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. the script is asking for window[page] variable. I meant, that every .js script for a page -- for example index.js for index page is making window.index variable. ( I know, it's not so good - read P.P.S ;) )

P.P.S. I'm novice to requireJS (I've knew about it only today), and it my first draft, and I think, I'll make it in another way:

2) As a concept for now :)
You keep your scripts as AMD modules (not as usual scripts, but as modules for requireJS). Modules map you can keep in a .json file:

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

You should pass the page name or page id to the main.js (you can pass this value in DOM element - in templates of site, or in template variables ).
So main.js knows the page name, and load your modules.json file. It gets specific modules and requires them.

main.js also can keep dependencies that are need on every page ( for example jquery, some jquery plugins, etc) ( jquery plugins better to wrap as modules )

P.S. sorry for my English

回复收藏 0 原文