什么是模块化?
一个模块就是实现特定功能的文件,有了模块,我们就可以更加方便地使用别人的代码,想要什么功能,就加载什么模块,但在ES6之前是没有模块化的
模块化有什么特点和好处
特点
1.形成一个独立的文件,例如:.js文件
2.有封闭的环境,对外提供接口,外面才能使用模块
3.模块与模块之间可以互相调用
好处
- 可以使用第三方模块
- 解决冲突
- 解决依赖
ES6模式
a文件
export var b = 456;
export var c = 789;
function show() {
console.log(10,11,12);
}
export default show
//expotr var b = 456 这个是多接口的写法
//export default show 这个是单接口的写法
b文件
import show,{ b , c } from '这里写a文件的路径'
//单接口↑ ↑多接口的写法
'./1.js'
console.log(b,c);
show()
html文件
<script src="这里写b文件的路径" type="module"></script>
//type写module这个属性
require.js库
官网地址
这个库好坑…用的时候遇到了好多坑,憋了好几分钟,搞懂了之后用起来真香嘻嘻嘻嘻~
1.定义模块:define()
2.页面调用模块:data-main
3.配置路径
requirejs.config({
paths : {
"jquery" : "../lib/jquery-3.4.1.min"//(这个路径有个坑)
}
})
下面上代码
a文件
define(function () {
let a = 123;
let b = 456;
return {a,b} //接口
})
b文件
//define(['第一个路径是a模块的 注意!不用写文件后缀名','第二个路径是require的,就直接写jquery就可以了'],function(第一个参数是a模块接口的,第二个参数是require接口的){})
define(['./a','jquery'], function(i, $) {
console.log(i.a,i.b);//输出a和b的值
$('body').css('background','green')//直接测试修改body的背景色
});
html文件
<script src="../require.js" data-main="./b.js"></script>
requirejs.config({
paths: {
"jquery": "../../jquery-3.4.1"
//这里的坑要注意下,这个路径是相对于使用了requirejs库文件的jquery路径,
//上面的b文件使用了requirejs库,所以这个路径是b文件相对于jQuery的路径,!!!同样也不用写文件的后缀名!!!
}
})