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吧

RequireJS 模块化加载框架使用的更多相关文章

  1. SeaJS 模块化加载框架使用

    SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...

  2. seajs模块化加载框架使用

    seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...

  3. RequireJS与SeaJS模块化加载示例

    web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...

  4. js模块化加载器实现

    背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...

  5. 一起写一个Android图片加载框架

    本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...

  6. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  7. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  8. javascript模块加载框架seajs详解

    SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...

  9. 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

随机推荐

  1. 可扩展验证框架 - A2DFramework验证框架使用介绍

    SUMMARY 用途 DEMO演示 NuGet相关的资料 VS工具端的设置 用途 数据验证的作用很重要,目前.NET提供的内建验证机制是采用DataAnnotation方式来实现属性的验证,并且也提供 ...

  2. Scala 深入浅出实战经典 第46讲： ClassTag 、Manifest、ClasMainifest TagType实战

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. 命令行的全文搜索工具--ack

    想必大家在命令行环境下工作时候,一定有想要查找当前目录下的源代码文件中的某些字符的需求,这时候如果使用传统方案,你可能需要输入一长串的命令,比如这样: 1. grep -R 'string' dir/ ...

  4. Updating Protobuf and GRPC in Golang

    转自: http://russmatney.com/techsposure/update-protobuf-golang-grpc/ TL;DR: When protobuf updates, all ...

  5. C#接口的使用场合，接口应用

    当一个项目不断的扩大的时候,会面临的问题是不断的有以下情况: 1.以前编写程序的人离职了,新来的程序员看不懂以前的程序,或者觉得以前的程序部够好,但又不希望删除: 2.当实现第三方接口时,如:读写IC ...

  6. JSP Servlet性能分析

    JSP Servlet性能分析:http://www.docin.com/p-757790851.html

  7. 创建 iPhone/iOS8 弹出菜单（窗口）

    基本步骤 添加视图:主视图与弹出视图 关联视图 配置弹出视图 编码实现:弹出菜单样式及控制器委托 override func prepareForSegue(segue: UIStoryboardSe ...

  8. oracle 语句创建表空间、用户、授权

    /*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace yuhang_temp tempfile 'D:\oracledata\yuhang_te ...

  9. 实现无锁的栈与队列(5)：Hazard Pointer

    两年多以前随手写了点与 lock free 相关的笔记:1,2,3,4,质量都不是很高其实(读者见谅),但两年来陆陆续续竟也有些阅读量了(可见剑走偏锋的技巧是多容易吸引眼球).笔记当中在解决内存释放和 ...

  10. vbox导入虚拟电脑网卡MAC问题

    vbox导入虚拟电脑之后,需要"重新初始化所有网卡的MAC地址". centos需要做以下几步操作: 1.删除文件"/etc/udev/rules.d/70-persis ...