ES6 模块新特性

ES6 模块

背景

ES6引入了模块化 , 打个比喻 , 之前的js代码里的东西相当于公共设施,“共享” . 这样就导致了很多的毛病,特别是项目复杂 , 大起来 , 毛病百出非常容易出错 , 例如命名冲突 , 安全问题等 . ES6模块化就是要解决这样的问题 , 让 js 变的更有条理.

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

用法

导出模块(export) :

(每个模块代表一个js,导出的东西会暴露出去,起到封装的效果.)
//逐个导出
export let a= 2;
export let b= 3;

//批量导出
export {a,b}

export 特性:

export命令导出必须以接口（变量）的方式，不能导出值的方式.

export，import 命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内,就会报错。

建议使用大括号指定所要输出的一组变量写在文档尾部，明确导出的接口。

函数与类都需要有对应的名称，导出文档尾部也避免了无对应名称。

导入模块(import) :

//导入模块,这里导入了a,b.
import {a,b} from "需要导入模块路径.js";

import 特性:

(只读属性) 因为人家只是一个输出的接口,不能再定义另一个同名变量，不能在对应的 import 前使用此标识符，更不能修改它的值。

(单例模式)多条相同的 import 语句 , 只会执行一次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

由于 import 是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构；

import 命令会提升到整个模块的头部，首先执行。

import 可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用(异步加载)。

当然在导入导出中还有一些特性:
as
有没有感觉非常的熟悉,对没错,可以给 export 命令导出和 import 导入的接口起别名，起到隐藏模块内部的变量的作用.

//导出
let a = 1;
//导出变量 a ,并起个A的别名,import导入时也以修改后的别名为准. 
export {a as A }
----------------------
//导入,* 表示导入全部的导出,并且起个别名,调用时也需要用别名调用.
import * as all from "模块路径.js";

export default

这里还得介绍下 export default 命令:

特点 :

它后面不能跟变量声明语句，可以直接将一个值写在export default之后
在一个文件或模块中，export、import 可以有多个，export default 仅有一个.
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出，在导入时要加{ }，export default 则不需要。
export default 向外暴露的成员，可以使用任意变量来接收。

//为模块指定默认导出
let a =10;
export default a;

模块需要注意的地方也非常多,这里介绍上文提到的严格模式 , 默认是开启严格模式的,严格模式下自然会有很多限制 (主要限制如下) :

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete - global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

在模块里没有 this 对象,一般我们用 this 表示 windows 对象:上码看看究竟.

//实例模块
import {....} from "....js";
console.log(this === window)	//结果: false
console.log(this === undefined) //结果 : true
//this关键字返回undefined，而不是指向 window，也就是说：在模块使用this关键字是无意义的

为了给加深大家模块的概念于用法可以练习以下:

在模块1中定义一个父类Animal，导出.然后在模块2导入模块1，编写一个子类Dog继承Animal。Dog类中添加构造方法传入name和age参数，添加sayHello方法打招呼。在html中导入模块2，创建模块2中的Dog类实例，调用sayHello输出结果。
在模块3中定义3个方法，全部导出，其中一个导出为默认方法，在html中导入并调用默认方法。

可以参考以下完成代码:
题一
module1.js

//父类
class Animal{}
//导出
export {Animal}

module2.js

import * as parent from "./module1.js";
//Dog类继承module1中的Animal
let dog = class Dog extends parent.Animal{ 
  //构造函数 
    constructor(name="某某",age=1){
  	super();
   	this.name = name;
  	this.age = age;
 }
 //打招呼方法
   sayHello(){
     return "你好! 我是"+ this.name +"今年"+ this.age +"岁!";
    }
 }
//导出
export {
  dog
}

html代码:

<body>
  <script type="module">
   //导入
   import {dog} from "./js/module2.js";
   
   //创建Dog对象
   let a = new dog("张三",12);
   console.log(a.sayHello()); //结果: 你好! 我是张三今年12岁!
  </script>
 </body>

题二:
module3.js

//模块三中定义 3个方法
//方法1
let a = function(){
 return "方法1";
}
//方法2
let b = function(){
 return "方法2,我是默认方法";
}
//方法3
let c = function(){
 return "方法3";
}
//导出 a,c方法
export {a,c};
//默认导出方法3
export default b;

html代码:

<body>
  <script type="module"> 
   //导入
   import k from "./js/module3.js"; // 不需要加{}，使用任意变量接收默认参数,加了{}的话报错,表示找不到name为k的参数
   console.log(k()); //结果: "方法2,我是默认方法"
   </script>
 </body>

今天的分享到这就告一段落咯,之后还会继续更新，欢迎大家继续关注 ! .

LXH-404

原创文章 6 获赞 27 访问量 2957

关注私信

ES6 模块 新特性

猜你喜欢