java script require_Requirejs---菜鸟入门

Requirejs知道这个东西，但是没有去用过“，其实很久就想去用这个东西来模块化开发，奈何把时间放到其他地方去了。这两天也去看了一下文档。所以今天在这里写下自己的想法。

首先我来个demo代码：

Title

是不是有点恶心，如果脚本文件还多的话，真是不忍直视。于是我们伟大的Requirejs派上用场了。下面来个Requirejs的demo

Title

是不是赏心悦目好多，你会问其他的文件去哪了？别急，慢慢听我道来；其实原来关系都写到main.js中了，我们来看看main.js的代码。

require.config({

baseUrl:"../",

paths:{

a:"a",

b:"b",

c:"c",

d:"d",

e:"e",

f:"f",

g:"g",

h:"h",

i:"i"

}

});

require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

})

下面我们开始进入正题：

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

首先我们去加载requirejs文件，然后定义脚本文件的入口，相当于java中main函数。如果设置了data-main属性；baseUrl默认为data-main文件的路径。我们也可以通过require.config去修改。这里有一点需要注意的是：所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

require.config用来配置一些参数，它将影响到requirejs库的一些行为。参数是一个JS对象，常用的配置有baseUrl——用于加载模块的根路径。  1.paths——用于映射不存在根路径下面的模块路径。  2.shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。  4.deps——加载依赖关系数组

require.config({

baseUrl:"../",//配置跟路径

paths:{

/*各个文件的映射*/

a:"a",

b:"b",

c:"c",

d:"d",

e:"e",

f:"f",

g:"g",

h:"h",

i:"i"

}

});

//注入依赖，并加载文件

require(["a","b","c","e","f","g","h","i"],function(a,b,c,d,e,f,g,h,i){

})

定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

//模块没有依赖的的时候

define(function(){

var add=function(x,y){

return x+y;

}

return{

add:add

}

})

//有依赖也可以注入，类似angularjs

define(["a","b"]function(a,b){

//在这里可以调用a，b模块的中的开放的接口

var add=function(x,y){

return x+y;

}

return{

add:add

}

})

下面是一个小demo：

文件路径：

script|--->require.js

|--->main.js

|___>part|--->a.js

|___>b.js

demo|----demo.html

//b.js

define(["a"],function(a){

var tt=function(){

alert(a.add(1,2));

a.t();

};

return{

rr:tt

}

});

//a.js

define(function(){

var add=function(x,y){

return x+y;

} ;

var test=function(){

console.log("sss");

};

return {

add:add,

t:test

}

});

//main.js

require.config({

baseUrl:"../script",//配置基础url

paths:{//相对baseUrl定位

a:"part/a",

b:"part/b"

}

});

//所设置的脚本是异步加载的

require(["a","b"],function(a,b){

b.rr();

});

//demo.html

Title

test

可以用demo试试，容易理解一些

详细内容请看Requirejs中文网。也可以去原文  http://www.requirejs.cn/docs/api.html#cjsmodule  http://requirejs.org/docs/api.html