模块化内容

模块化

CommonJS

js代码的模块化标准，不适用于前端开发，NodeJS在使用该标准实现模块化

AMD

Async Module Definition 异步模块定义

尽可能早的加载所有需要用到的模块，模块的加载都是异步的，如果要在模块加载完成后，利用模块中的内容实现某些功能，需要将代码写在 require的第二个参数的回调函数中

require.js

CMD

Common Module Definition 通用模块定义

尽可能晚的加载模块，哪里用到了模块再去加载

sea.js

##　require.js实现模块化

定义模块

define(["当前模块的依赖项"...], function(使用形参接收依赖项的返回值){
	//当前模块中要实现的功能

	//当前模块如果要提供内容给模块调用者使用，就需要通过return语句将需要体用给别人的内容进行返回

	return 需要给别人提供的内容;
})

引用模块

require(["模块路径/模块别名"...], function(){
	//这个函数会在模块加载完成之后，被调用起来
	//如果想在模块加载完成后实现某些功能，那么代码都写到这个函数中！
})

data-main

在引用require.js的script标签中可以通过data-main指定一个入口文件，这个入口文件中的内容，会在reuqirejs加载完毕之后，被自动执行。

data-main指定的这个文件是异步加载的！所以在下面如果有使用这个文件中相关内容的代码，就不能够保证执行正常

路径的说明

1. 如果直接使用script在html当中引入模块，那么模块的路径查找会以当前html文件作为基础。 （没有配置baseUrl，也没有data-main属性）

2. 如果使用data-main属性，那么这时候的模块路径查找，会以入口文件所在的路径作为基础去查找（没有设置baseUrl）

3. 如果通过require.config()配置了baseUrl，那么所有的模块的路径查找，都会以这个baseUrl做为基础！

require.config方法的说明

这个方法主要用来配置requirejs相关的内容

require.config({
	//配置基础路径，所有的模块查找都以这个路径为基础
	//这个路径一般情况下配置为绝对路径，并且设置为所有模块共享的路径
	baseUrl: "/",

	//paths可以用来为单个路径设置别名，以后在使用模块的时候，直接使用别名即可，不需要再写完整的路径了
	//如果模块是一个具名模块，那么这个别名一定要和具名模块的名称一致
	//.js 不要！！！
	paths: {
		"jquery": "views/assets/jquery/jqeury.min"
	}
});

如何加载第三方内容

实现了模块化的第三方内容加载

直接使用require，就像使用正常模块一样即可！

未实现模块化的第三方内容加载

1. 需要考虑该内容是否有依赖项

2. 需要考虑该内容是否有返回值（是否要提供内容给外部使用）
   如果有依赖项，需要通过require.config方法配置该模块的依赖项

   require.config({
   	baseUrl: "/",
   	paths: {
   		"jquery": "views/assets/jquery/jqeury.min",
   		"animate": "animate/animate"
   	},
   	//配置的是第三方内容的依赖项以及输出项
   	shim: {
   		//模块别名： 配置信息
   		"animate": {
   			//deps属性可以用来配置这个模块的依赖项
   			deps: ["jquery"],
   			//export可以配置输出项
   			//输出项的内容其实就是在第三方内容中去查找和配置名称相对应的全局变量，将其值作为模块的输出值！
   			exports: "animate"
   		}
   	}
   });

3. 如果第三方内容没有实现模块化，并且没有依赖项，也没有输出项，直接require即可！！！

具名模块匿名模块

具名模块有名字

define("名字", [], function(){
	
})

匿名模块没名字

define([], function(){
	
})