RequireJS的模块化管理只针对单个页面?

发布于 2022-09-04 15:44:15 字数 1767 浏览 13 评论 0

  • 这两天在学习RequireJS的模块化管理,阅读了很多示例代码。

  • RequireJS主要是在页面中通过<script src="require.js">标签的data-main属性,统一配置其他JS文件模块的加载,从而实现按顺序控制JS模块的加载,以及依赖关系。

  • 想问,RequireJS的模块化管理,仅仅是针对单个页面吗?也就是说,在每个页面的模块引入都要写一套Require.config()配置?是这样吗?


  • 以下,是我自己写的一个简单案例:

/** 文件目录 **/
  + - app.html
  |
  + - main.js
  |
  + - script
      |
      + - a.js
      |
      + - b.js
      |
      + - jquery.min.js
      |
      + - angular.min.js
//a.js
define({
    name : 'William'
});
//b.js
define(['a'],function(a){
    return {
        sayHello : function(){
            console.info('hello,my name is' + a.name);
        }
    }
})
//main.js
require.config({
    baseUrl : 'script',
    paths : {
        'a' : 'a',
        'jquery' : 'jquery.min',
        'angular': 'angular.min'
    },
    shim : {
        angular : {
            exports : 'angular'
        }
    }
});
require(['b','a','jquery','angular'],function(b,a,$,angular){
    //测试代码
    b.sayHello();    
    console.info("name:" + a.name);
    $(document).ready(function(){
        console.info('jquery is ready');
    });
    try{
        angular.module('testModule',[]);
    }catch(e){
        console.error(e.message);
    }
});
<!-- app.html  -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script data-main='main.js' src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script>
    </body>
</html>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

萌梦深 2022-09-11 15:44:15

每个页面确实要引用,但是可以将require.config配置的内容也放进一个单独的文件中

//common.js
requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

见例子https://github.com/requirejs/...

白首有我共你 2022-09-11 15:44:15

配合r.js可以达到,只写一套。http://www.cnblogs.com/smartXiang/p/6487192.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文