RequireJS 模块化加载框架使用

RequireJS 是一个遵循 AMD 规范的模块化加载框架

与上文seajs一样，这里简单介绍其相关用法

 

同样的，首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs

AMD规范是预加载，也就是说会马上将所有模块全加载。

写法跟seajs也类似，只不过 当需要包含模块时，一般会将模块名置入第一个参数。而不是直接require  详见

（新版本的也有CMD版require包含依赖的方式，但本质还是一样，下面会提到）

 

还是举个例子：

目录结构同级

index.html:

注意到这里script标签多了一个data-main属性(加不加后缀js都可以），它标识了引用主模块入口 main.js

（也可以不使用这种引用入口方式，下边会介绍另一种方式，注意啦~)

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>require</title>
    <style type="text/css">
    </style>
</head>
<body>

<script type="text/javascript" data-main='main' src="./require.js"></script>

</script>
</body>
</html>
复制代码

main.js:

将两个模块置入参数1，并以回调的方式传入使用

define(['main1','main2'],function(main1,main2){ 
    console.log('module of main:');
    main1.say();
    main2.say();

});

main1.js:

复制代码
define(function(require,exports,module){ 
    console.log('module of main1:');

    module.exports = { 
        say: function(){ 
            console.log('main1--hello');
        }
    };
});
复制代码

main2.js:

复制代码
define(function(require,exports,module){ 
    console.log('module of main2:');

    return { 
        say: function(){ 
            console.log('main2--hello');
        }
    };
});
复制代码

 

浏览器打开index.html 可以发现结果：

顺序乱了是不是

其实这就是因为AMD规范预先加载的规则，预先把所有依赖都执行了（虽然我们还没用到）

而且这加载是并行的，（默认情况下）main1和main2不分先后。

假设 main.js文件因网络问题加载延迟后，就有可能出现以下结果

module of main2:

module of main1:

module of main:

...

 

不过，我们也可以为其什么依赖关系，比如main1依赖main2,则就能保证“所谓的顺序”-- 先有main2才有main1

比如将index.html修改成

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>require</title>
    <style type="text/css">
    </style>
</head>
<body>

<script type="text/javascript" src="./require.js"></script>
<script type="text/javascript">
  require.config({ 
      shim:{ 
          'main1':{ 
              deps: ['main2']
          }
      }
  });
    require(['main'],function(main){ 
        console.log(main.num);
    });
</script>
</script>
</body>
</html>
复制代码

main.js:

define(['main1','main2'],function(main1,main2){ 
    console.log('module of main:');
    main1.say();
    main2.say();
    return {num:10};
});

这时的结果：

 

 

上面提到了requirejs也更新了遵循CMD规范的策略，但表面上遵循了，本质上还是AMD的

为什么这么说呢？ 引自：

所以要用requirejs就老老实实使用AMD的，如果想使用CMD的方式，就用seajs吧

posted @   -渔人码头-  阅读(2030)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae