文章目录
导言
一、前端模块化
二、ES6的模块化实现
1. ES6的模块化的出现
ES5以及它之前的js是没有模块化的,如果要进行模块化操作,需要引入第三方的类库。随着技术的发展,前后端分离,前端的业务变的越来越复杂,终于在ES6中引入了模块化的操作。
2. ES6模块化基本用法
es6中,一个模块就是一个js文件,所以我们新建一个模块(js文件)
es6模块化中模块与外部的数据传输是依赖于export(发送)和import(接收)这两个关键字的,下面通过一个例子来理解它们的用法
在module1.js中:
export let name = 'aays';//发送name这个变量
创建一个外部文件index.js,并且码入:
import {name} from './module1.js'//接收name这个变量
console.log(name)//aays
上面是最基本的用法,如果要输出多个变量可以将这些变量包装成对象进行模块化输出:
//模块
let name = 'aays',age = 18
const sex = '男'
export {
name,
age,
sex
}
//外部
<script type="module">
import {name,age,sex} from './module1.js'
console.log(age)//18
</script>
如果你想给传输过来的变量重新命名(可用于防止暴露模块当中的变量名字或者简化变量名),可以通过as来进行操作,上述代码修改为:
//模块
let name = 'aays',age = 18
const sex = '男'
export {
name as myname,
age as myage,
sex as mysex
}
//外部
import {myname,myage,mysex} from './module1.js'
console.log(myage)//18
如果你不想将export过来的一一解构赋值,那么你可以使用*符号来直接获取整个模块,上述代码修改为
//模块
let name = 'aays',age = 18
const sex = '男'
export {
name,
age,
sex
}
//外部
import * as allmodule from './module1.js'
console.log(`${allmodule.name}今年${allmodule.age}岁
性别${allmodule.sex}`)//aays今年18岁 性别男
3. 默认导出与混合导出
一个模块只能有一个默认导出
对于默认导出,导入的名称可以和导出的名称不一致。
//模块
export default function(){
return "默认导出一个方法"
}
//外部
import fn from './module1.js'//fn可以是任意变量名
console.log(fn())//输出“默认导出一个方法”
//我们可以将要导出的东西都放在默认导出中,
//然后取出来作为一个对象直接取里面的东西来用,比较方便
混合导出即同时在一个export中导出默认数据与非默认数据,加个逗号就能实现
//模块
export default function(){
return "默认导出一个方法"
}
export let name ="aays";
//外部
import fn,{name} from "./module1.js";
console.log(fn()+name);//默认导出一个方法aays
4. 重命名export和import
如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做:
export let myName="我来自module1.js";//模块1中
export let myName="我来自module2.js";//模块2中
//外部
import {myName as name1} from "./module1.js";
import {myName as name2} from "./module2.js";
console.log(name1);//我来自module1.js
console.log(name2);//我来自module2.js
三、ES6 之前如何实现模块
es6之前,js并没有模块。随着代码复杂度提升,开发者们为了应对难以维护的代码而考虑使用js现有的特性去实现模块化。
模块要求:
- 隐藏内部实现
- 提供调用接口
函数内部的变量是私有对外不可见的,借用该特点可以实现隐藏内部实现的需要。
function ff(){
var a=123;
var b="abcdef";
}
console.log(a)//错误,a未定义
利用函数的返回对象,通过 函数闭包特性(第五小节介绍)
,实现对内部数据对访问,间接实现了调用接口。
通过该接口,我们可以方便的使用模块内的功能,例如ffobj.f0();
// 闭包函数
function ff(){
var a=123;
var b="abcdef";
var f0 = function(){
console.log("a is :"+a);
}
return {a:a,b:b,f0:f0}
}
var ffobj = ff();
ffobj.f0()
简化定义与调用步骤,直接改为立即执行函数即可
const ffobj1 = function(){
var a=123;
var b="abcdef";
var f0 = function(){
console.log("a is :"+a);
}
return {a:a,b:b,f0:f0}
}();
四、commonjs的模块化
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}
main.js 使用commonjs的模块化 导入 info.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
五、函数闭包
1. 定义:
闭包函数
:声明在一个函数中的函数,叫做闭包函数。
闭包
:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。
2. 解析:
闭包就是能够读取其他函数内部变量的函数。
3. 特点:
- 闭包外层是一个函数。
- 闭包内部都有函数。
- 闭包会return内部函数。
- 闭包返回的函数内部不能有return(因为这样就真的结束了)。
- 执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在。
4. 优点:
( 1 ) 可以有私变量的存在;
( 2 ) 避免全局变量的污染;
( 3 ) 希望一个变量长期驻扎在内存中,防止私有变量被垃圾回收机制所清除;
5. 缺点:
( 1 ) 闭包比普通函数占用更多的内存,会造成内存泄漏;在不使用时,要及时释放,将引用内层函数对象的变量赋值为null。