Hello~~各位小伙伴，今天我们广州蓝景，继续和大家分享前端技术干货，前端模块化(5分钟快速入门RequireJs)，
各位开发项目的时候引用JS都会遇到以下的情景
产生AMD规范的背景
因为使用各种插件，或者团队协同合作，产生多个js文件，
假如使用的JQ插件，则必须先引用jquery库才能够正常执行，
JS文件之间强依赖关系，让我们不敢动文件的引入顺序。
并且，在渲染页面的过程中，同步读取JS文件会堵塞整个页面，
这对网站的性能起到很大的影响，因此，我们需要异步加载JS文件。
AMD规范
AMD规范全称为Asynchronous Moudle Definition,即异步模块加载机制。
AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。
从它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的价值，
JQuery也采用了AMD规范
//Jquery-2.1.0 源码
if ( typeof define === “function” && define.amd ) {
define( “jquery”, [], function() {
return jQuery;
});
}
AMD规范简单到只有一个API，即define函数
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模块标识，可以省略。
array-of-dependencies: 所依赖的模块，可以省略。
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
举个例子：
define( “jquery”, [], function() {
return jQuery;
});
采用AMD规范的RequireJS
RequireJS采用AMD规范，让我们在使用过程中感受到了模块化的便利，
引入文件时，再不需要按照固定顺序，只需要定义好模块之间的依赖关系即可
1.使用(c)npm安装Requirejs
cnpm install requirejs
注意：requirejs是连起来的，中间没有点，请注意防伪
2.引入Requirejs
data-main属性的作用是，指定网页程序的主模块。
这个文件会第一时间被require.js加载。
由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
在main.js里面，引用其他js文件即可,
**补充：**假设index.js是临时工写的，他不符合AMD规范，我们就需要在require.config里传入的对象里面的shim属性进行配置
//index.js
//这是不符合AMD规范的
KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))
})
//下面写法就符合AMD规范
// define(‘index’,[‘jquery’],function(){
// KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))
// })
// })
因此，在main.js就需要这样写
require.config({
//类似base标签，全局修改起始路径
//baseUrl: “js/lib”,
// 指明模块路径
paths:{
‘index’:‘lib/index’
},
// 兼容非AMD规范的模块
shim:{
‘index’:{
// 写上该模块的依赖,没有则为空
deps:[‘jquery’],
// 将改造好的模块输出出来
export:‘index’
}
}
})
//主入口文件
require([‘index’,‘jquery’],function(_,KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log()
})
如果你希望你的代码直接使用，获取兼容AMD规范，可以采取下列写法
//兼容AMD模块
if(typeof defined == “function” && define.amd){
define(“index”,[‘jquery-2.1.0’],function(){
alert(‘hello world’);
console.log(KaTeX parse error: Expected 'EOF', got '}' at position 17: …".baba")); }) return } …(".baba"));
}
想要了解更多web前端开发技术资料，可在评论区留言！也可添加我们微信：philip_tan