es6模块化
(es6模块化的详细代码在第二阶段的day4)
1.导出(暴露):
1.默认导出(一个模块化文件中只允许使用一次):export default {
}
2.先定义在导出 先定义需要暴露的数据 之后通过export{} 进行导出进行
3.定义赋值之后通过export const直接进行导出
2.导入(依赖):可以通过 import {} from "导出数据的地址"
1.直接导出的情况 import {变量名} from "导出数据的地址"
2.如果引入的变量名有冲突 可以使用as 进行重命名
import {a as A} from "导入数据的地址"
3.当导出的内容较多的情况下,而项目中几乎都会使用到,可以使用
import * from "导入数据的地址"
4.混合导出时在进行导入时,{}里面接收直接导出的数据。不加{}接收默认导出的数据
//.js文件中(模块暴露)
export default {a:1};
//模块引入
<script type="module">
import a from "./module/mo1.js"
console.log(a)
</script>
!与es6模块化容易混淆的地方
//01.js中的内容
function a1(){
return 1111
}
//02.js中的内容
function a2(){
return 2222
}
//index.html使用文件里的内容
<script src="./scr/01.js"></script>
<script src="./scr/02.js"></script>
<script>
console.log(a1());
a2();
</script>
AMD模块
1.简介:AMD(Asynchronous Module Definition),异步模块定义:主要用于浏览器,由于该规范不是原生js支持的,使用AMD规范进行开发的时候需要引入第三方的库函数,也就是鼎鼎大名的RequireJS
2.模块的定义:
(1).RequireJS定义了一个define函数,用来定义模块
语法:define([id], [dependencies], factory)
参数:
·id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
·dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖必须在真正执行具体的factory方法前解决
·factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值
3.模块的加载
(1).加载模块需要使用require()函数
语法:
require([dependencies], function(){})
参数的设置
dependencies:字符串数组,该模块的依赖
function:Function类型,所依赖的模块都加载成功之后,回调,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块
注意:require()函数加载依赖模块是异步加载,这样浏览器就不会失去响应
CMD模块
1.简介:CMD(Common Module Definition),通用模块定义,它解决的问题和AMD规范是一样的,只不过在模块定义方式和模块加载时机上不同,CMD也需要额外的引入第三方的库文件,SeaJS该类库提倡一个模块一个文件
2.模块的定义
(1).define 是一个全局函数,用来定义模块
(2).语法:define(id?, deps?, factory)
id:可选,字符串类型,模块标识,如果没有提供参数,默认为文件名
dependencies:可选,字符串数组,当前模块依赖的模块,CMD 推崇依赖就近
factory:回调函数,工厂方法,初始化模块需要执行的函数或对象,如果为函数,它只被执行一次,如果是对 象,此对象会作为模块的输出值
注意:除了给 exports 对象增加成员,还可以使用 return 直接向外提供接口
3.模块的加载:
(1).SeaJS提供了seajs.use来加载模块
(2).语法:
seajs.use([dependencies], function(){})
参数:
dependencies:字符串数组,该模块的依赖
function:Function类型,所依赖的模块都加载成功之后,回调,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块
CommonJS
铭哥node模块化的讲解
1.CommonJS简介:
模块化最初产生于服务端,并引申到客户端,CommonJS由Node推广并主要用于服务器
2.使用:
(1).定义模块
在CommonJS规范中,一个单独的JS文件就是一个模块
每个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
(2).模块导出和载入
模块导出:exports 和 module.exports
模块载入:require (例:const express=require("express")
通过exports对象导出当前方法或者变量,也可以通过module.exports导出
语法:
导出多个成员:exports.xxx = xxx 或者 module.exports = { }
导出单个成员:module.exports