一:什么是模块化
模块:函数包裹的功能
模块化:具备一定的功能,作用域独立,可以拿到任何地方使用,不会有其他任何依赖可以在不同的地方实现不同的细微功能差别。
模块化分类:
1. CommonJS:适用于后台,实现方式是同步执行(),代表nodeJS
requireJS:前台后台都可以使用,实现方式是异步执行,适用单页面应用 AMD
seaJS:已经死亡,官网已不更新 CMD
AMD/CMD区别:
AMD:提前加载,把使用到的JS在页面加载前都加载了
CMD:按需加载,在加载页面是需要哪个JS就加载哪个JS ,缺点:需要先检测所有代码,查找需要加载那些js文件。
CommonJS:
CommenJS:是一种比较久的规范,模块化
导入:要使用外部的变量或函数,require(‘模块’)
导出:给外部使用的变量或函数,modeule.expores
2.requireJS
AMD模式,异步加载,适用于前端
下载这个js,使用时需要引入页面
能解决的问题:
1.js之间的相互依赖关系
2.实现模块化
引入方法:<script src='require.js data-main="对应的js文件"'></script>
入口文件需要定义功能
requirejs.config({
baseUrl:''//定义引入其他js的根目录
paths:{
jequery:'jequary', //js后缀不用写
},
shim:{
//1.把不符合AMD规范的文件转成符合的 2.给指定文件加载依赖
requirejs(['jquery'],function($){
加载的回调函数能作用域整个项目
})
定义模块:
AMD电仪模块规范:define()
用法:没有依赖,只有一个功能,define(function(){})
有依赖:define(‘名字’,[依赖模块],function(){})
有名字的模块:define(‘名字’,[‘依赖模块’],function(){})
注意:有名字模块一定得使用定义的名字,不能自己定义其他名字;没有名字的莫夸也可以定义任意的名字
shim:用法:
1.把不符合AMD规范的模块转成符合AMD规范的模块
shim:{
add:{
init:function(){}
}
}
2.把一个文件中多个不符合AMD规范的模块转成符合
shim:{
init:function(){
return{
add:add,
jian:jian
}
}
3.添加依赖
shim:{
refer:{
deps:['依赖模块'],
exports:‘refer’
}
}
4.注意:不管shim中是为了转换符合规范文件还是添加依赖,都需要在paths中,都需要在paths中声明文件路径。