Nodejs requirejs 如何针对不同的页面 加载不同的js? 【新手】

Nodejs requirejs 如何针对不同的页面 加载不同的js? 【新手】

今天刚看requirejs ，想问下，假设两个页面 需要加载的文件 A 页面 ： login.js list.js jquery.js B页面：update.js jquery.js

请问requirejs 如何针对不同页面加载不同配置（一个配置文件里面)？ 只有写两种不同配置文件这种方式吗？

7 回复

不用任何配置，自动就实现了。你require哪个就加载哪个。 比如b页面只 require了 update.js和 jquery.js， 那B就只加载这2个。


Nodejs RequireJS 如何针对不同的页面加载不同的JS？

问题背景

你提到使用RequireJS时遇到了一个问题：如何在一个配置文件中根据不同页面的需求加载不同的JavaScript文件。具体来说，A页面需要加载login.js, list.js, 和 jquery.js，而B页面只需要加载update.js和jquery.js。

解决方案

方法一：使用不同的配置文件

一个直接的方法是为每个页面创建单独的配置文件。例如：

  • configA.js 用于A页面
  • configB.js 用于B页面

configA.js

require.config({
    paths: {
        'jquery': 'path/to/jquery',
        'login': 'path/to/login',
        'list': 'path/to/list'
    },
    shim: {
        'login': ['jquery'],
        'list': ['jquery']
    }
});

configB.js

require.config({
    paths: {
        'jquery': 'path/to/jquery',
        'update': 'path/to/update'
    },
    shim: {
        'update': ['jquery']
    }
});

然后在A页面和B页面分别引用对应的配置文件：

<!-- A页面 -->
<script data-main="configA" src="path/to/require.js"></script>

<!-- B页面 -->
<script data-main="configB" src="path/to/require.js"></script>
方法二：使用单一配置文件并动态加载

另一种方法是在一个配置文件中使用动态逻辑来决定加载哪些模块。这可以通过在HTML中传递一些参数给JavaScript来实现。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>
    <script>
        var page = 'A'; // 或者从URL参数获取
        require.config({
            paths: {
                'jquery': 'path/to/jquery'
            },
            shim: {}
        });

        if (page === 'A') {
            require(['jquery', 'login', 'list'], function($) {
                console.log('Loaded for A page');
            });
        } else if (page === 'B') {
            require(['jquery', 'update'], function($) {
                console.log('Loaded for B page');
            });
        }
    </script>
</body>
</html>

总结

你可以选择为每个页面创建单独的配置文件，或者在同一个配置文件中通过动态逻辑来决定加载哪些模块。第一种方法更清晰且易于维护，但第二种方法可以减少文件数量，提高灵活性。根据你的项目需求选择合适的方法。

[@wuliao49](/user/wuliao49) 那你的意思不还是需要些两个配置文件吗？ 一个页面一个i

配置文件一般一个就可以了吧，为什么要两个？配置文件就是写写别名呀，依赖呀什么的，使用的时候需要加载哪个require哪个就行了。

楼主解决了吗？ 我也遇到这个问题。

最终你是一个页面，一个js吗？

你在A页面require login.js list.js jquery.js，B页面require update.js jquery.js就行

使用 RequireJS 可以通过配置不同的模块依赖来实现针对不同页面加载不同的 JavaScript 文件。你不需要为每个页面写一个独立的配置文件，而是可以在一个配置文件中通过条件判断或路由来动态加载所需的模块。

示例代码

  1. 配置文件 (config.js):

    var config = {
    paths: {
        'jquery': 'libs/jquery.min',
        'login': 'scripts/login',
        'list': 'scripts/list',
        'update': 'scripts/update'
    },
    shim: {
        'login': ['jquery'],
        'list': ['jquery'],
        'update': ['jquery']
    }
};

if (window.location.pathname === '/pageA') {
    require.config(config);
    require(['login', 'list'], function(login, list) {
        // 初始化 login 和 list 模块
    });
} else if (window.location.pathname === '/pageB') {
    require.config(config);
    require(['update'], function(update) {
        // 初始化 update 模块
    });
}

  2. HTML 文件:

    <!-- A 页面 -->
<script data-main="config" src="require.js"></script>

<!-- B 页面 -->
<script data-main="config" src="require.js"></script>

解释

  • config.js 文件定义了所有需要的路径和模块。
  • 通过检查当前页面的路径 (window.location.pathname) 来决定加载哪些模块。
  • 在不同的页面中，通过 data-main="config" 引入 require.js 并初始化配置文件。
  • 使用 require.config 方法设置全局配置，并根据页面路径动态调用 require 函数加载所需模块。

这种方式避免了创建多个配置文件，使代码更简洁且易于维护。

回到顶部