ES6之module实现

ES6之module实现

我们一般用script标签加载js,本来脚本是同步加载,用defer和async属性可以一步加载,两者的区别是,defer是渲染完执行,也就是DOM结构完全生成,async是下载完执行,所以defer会按顺序加载,async不能保证顺序。

除了在框架内,我们使用script的时候也可以使用module:

<script src=”./a.js” type=”module”></script>

type会让浏览器知道这是ES6模块,且这相当于开启了defer属性,如果你又写了async属性那么就会采用async。type是module也可以内嵌网页中,跟在当前HTML页面写js代码一样。

a.html里面:

<script src=”./a.js” type=”module”></script>

<script type=”module”>

  import {a} from ‘./a.js’;

  console.log(a);

</script>

a.js里面:

export var a = 100;

console.log(‘a.js’ + a);

注意点:

模块内部变量外部不可见

自动采用严格模式,不管有没有use strict

用import的时候.js不可省略

使用了严格模式,this是undefined而不是window,通过这个可以判断是否在ES6模块中

同一个模块加载多次之执行一次

我们都知道早期用的模块化是commonjs,那ES6出来之后,大部分会使用ES6,那两者的区别还是需要知道的:

Commonjs输出的是一个值的拷贝,ES6是值的引用。因为是引用,所以如果对他赋值操作会报错。

Commonjs是运行时加载,ES6是编译时输出。

Node对ES6采用的是分开处理,因为node有自己的commonjs,node规定,ES6 模块采用.mjs后缀文件名。只要脚本文件里面使用import或者export命令,那么就必须采用.mjs后缀名。require命令不能加载.mjs文件,会报错,只有import命令才可以加载.mjs文件。反过来,.mjs文件里面也不能使用require命令,必须使用import。

在node中为了能用在浏览器环境和服务器环境,规定了ES6不能使用commonjs模块的特有的内部变量:

this

arguments

require

module

exports

__filename

__dirname

ES6可以加载commonjs的模块,node会自动把module.exports属性变成export default。CommonJS 模块加载 ES6 模块,不能使用require命令,而要使用import()函数。ES6 模块的所有输出接口,会成为输入对象的属性。

浏览器暂时还没有大批量的支持ES6,现在除了用babel之外,还有ES6 module transpiler和systemjs两个支持转换。

ES6 module transpiler是 square 公司开源的一个转码器,可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法,从而在浏览器中使用

SystemJS。它是一个垫片库(polyfill),可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块,将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。

(完)

来源:coding个人笔记,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/94623

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部