JS模块化工具requirejs

requirejs amd的一种实现

最近上手一个项目用到了requirejs，以前没有接触过，写一下学习的过程。

常规的js，如果想要引用另一个js的函数或者变量，需要在同一个页面引入。

造成两个问题

1. 页面引入过多 script 标签，很难看，难以维护。

2. js会阻塞浏览器渲染页面。

使用requeryjs可以做到模块化加载，可以不在页面引入，在js中使用另一个js的函数。

基本使用

1.常见api

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

define :定义一个模块

定义模块案例

a.js

define(function(){

    function fun1(){

        alert("it works");

    }

  // fun1();

    return{

        fun1:fun1

    };

})

require:引入模块

引入模块案例

b.js

function fun2(){

    require(['a'],function(aa){

        aa.fun1();

    })

};

fun2();

require()有两个参数，第一个是加载模块的数组，第二个是回调函数，在加载完后运行。函数的参数和前面数组引入的模块对应。

在页面中引入b.js和require.js,不用引入a.js就能使用a.js的函数了如

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

<script type="text/javascript" src="js/b.js"></script>

2.全局配置

上面在页面中引入js文件，使用了data-main属性，是require提供的全局配置，”js/main.js”的文件内容如下：

使用path对象（数组）定义js文件的引入映射。

require.config({

    paths : {

        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],

        "a":"js/a",

        "b":"js/b"

    }

})

这样原本需要在requeire语句中需要写的全路径，只需写对应的名字即可。

如果不使用这个这个属性，那么有两个选择

1. 在require语句所在文件上方 使用require.config(), 内容同上。

缺点：这样每个文件都写也不方便。

2. 直接在require的时候在数组中写全路径。这样不定义data-main属性.

特点：比较常用。