前端模块化-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.使用©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"));
}
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43230405/article/details/83546245