自动化构建一 requirejs

模块化

可维护性和复用

AMD/CMD是什么以及区别？

commonJS是一种规范 Nodejs 是这种规范的实现
AMD/CMD是从commonjs中诞生的
seajs 遵循CMD的规范
requirejs 遵循AMD的规范
AMD 异步模块定义 提前执行 依赖前置
CMD 通用模块定义 延迟执行 依赖就近（按需加载）优点：不浪费资源 缺点：等待时间长

AMD 用法

<!---->
<h1></h1>
<script src="require.js" data-main="js/main"></script>

//定义模块 /test/a.js(公共)
define(function(){
var str_a = 'hello wrold';
return str_a;
})

//定义模块 /demo.js(公共)
define(function(reqire,exports,module){
    /*
	var demo = function(){
		return 123
	};
	return {
		demo:demo
	};
	*/
	//字面量
	var web = {
		add:function(v){
			return v
		}
	};
	//return web;
	//模块导出 与return web结果一样，只是写法不一样;
	module.exports = web;
})

//AMD / CMD 规范
//AMD 依赖前置
define(['todo'],function(){
	var t = todo.dotosomething();
	var web = function(){
		add:function(v,t){
			return v+t
		}	
	}
	return web;
})
//CMD 依赖就近
/*
define(function(require,exports,module){
	var todo = requuire("todo");
	var t = todo.dotosomething();
	var web = {
		add:function(v){
			return v
		}
	};
	return web;
})
*/

//todo.js
define(function(){
	var dotosomething = function(){
		return 100
	};
	return {
		dotosomething:dotosomething
	}
})

//main.js a:别名
require.config({
	// baseUrl:"node_modules",//全局定义
	shim:{ //非AMD模块输出，继承AMD的规范
		"bootstrap":{
			deps:["jquery"],//表示有依赖关系
			exports:"bootstrap"//名称
		}
	},
	paths:{
		"jquery":"../node_modules/jquery",
		//"jquery":"/jquery",//使用baseUrl
		"bootstrap":"../node_modules/bootstrap",
		"a":"test/a",
		"demo":"demo"
	}
})
//require(['../jquery','../bootstrap','test/a'],function($,bootstrap,a){//路径太长 不推荐
require(['jquery','bootstrap','a','demo'],function($,bootstrap，a){ //别名要一一对应
	console.log(a)//hello wrold
	// document.querySelector("h1").innerHTML = a;
	$("h1").text(a);
	console.log(demo.demo(1000))
})

多个请求：promise链式写法