60秒带你了解代码模块化——RequireJS

RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范”。github地址

注意：window.onload事件不可用，用了会报错。

一、为什么要使用模块化？

**1. **不用模块化之前：需要手动去引入js，并且引入顺序不对会出错（因为依赖关系）
**2. **不用模块化之后：

a. 解决文件之间依赖
b. 自动引入js
c. 也可以解决命名冲突

二、如何使用RequireJS？

1. 在html中引入RequireJS

在HTML中，添加这样的 <script> 标签：

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

1. 通常使用requirejs的话，我们只需要导入requirejs文件即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。
**2. **属性 data-main 是告诉requirejs：你下载完以后，马上去载入真正的入口文件。它一般用来对requirejs进行配置，并且载入真正的程序模块。

2. 在config.js中配置requirejs

1). config.js 中通常用来做两件事：
2). 配置requirejs 比如项目中用到哪些模块，文件路径是什么
载入程序主模块

requirejs.config({
    baseUrl: './',
    paths: {
        main: 'main'
    }
});
require(['main',function(mod){
    mod.test1();
    mod.test2();
}]);

3. 定义相关模块文件

**1). ** function.js文件，写一个生成随机数的函数。

define(function(){
    return {
        rnd:function (m,n) {
            return parseInt(Math.random()*(m-n)+m);
        }
    }
});

**2). **str.js 返回一个字符串。

define(function(){
    return '我是一个简单的字符串';
});

4. 定义main.js文件

首先引入所需要的模块，然后调用。

define(function(require){
    var fns = require('function');
    var str = require('str');
    return {
        test1:alert(str),
        test2:console.log(fns.rnd(1,100))
    };
});

效果：弹窗弹出字符串，控制台（f12）输出一个随机数。