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吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

pyenv,让你轻松切换各种python版本

1K60
来自专栏tkokof 的技术,小趣及杂念

疑难杂症小记 - POCO的Android编译

想编译下POCO的Android版本,发现官方只支持Linux或者Mac OS X,简单尝试了下cygwin,发现NDK的Windows版本工具链因为使用Win...

12420
来自专栏微服务生态

缓存穿透、缓存并发、缓存失效之思路变迁

我们在用缓存的时候,不管是Redis或者Memcached,基本上会通用遇到以下三个问题:

15440
来自专栏轮子工厂

如果你想做java研发的话,这几样工具你肯定用得到

15230
来自专栏Golang语言社区

【Go 语言社区】Golang特性摘要、开发常见库

1 golang自开发项目引入包 需要在$gopath/src下建立项目,如Interactive,才能引入自己的包如 import interactiv...

37080
来自专栏云计算教程系列

如何在Debian 9上安装Python 3并设置编程环境

Python是一种灵活多样的编程语言,可用于许多用例,包括脚本,自动化,数据分析,机器学习和后端开发。1991年首次出版,其名称灵感来自英国喜剧组织Monty ...

1.4K10
来自专栏nimomeng的自我进阶

简单免费的文档中心——dokuWiki搭建指南

首先去官网下载页面下载最新版本的Dokuwiki,根据自己需要动态打包,不需要安装:

7.2K40
来自专栏linux驱动个人学习

systemd的作用

早上群上讨论了一下systemd的作用,还导致了一个人的直接退群,出于求知心理,搜索了一些systemd,对此也作出了一些相应的整理; 一、systemd的诞生...

46570
来自专栏云计算教程系列

Python入门:在Debian系统安装Python 3

Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。 可用于许多不...

23320
来自专栏java达人

微服务架构实践

作者:赵计刚 来源:http://www.cnblogs.com/java-zhao/p/5538232.html(点击文末阅读原文前往) 一、微服务架构图: ...

27860

扫码关注云+社区

领取腾讯云代金券