首页 > 代码库 > ES6笔记Module

ES6笔记Module

模块的定义

   export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

 

   export:

    export var name = \"javascript\";

    export var version = 6.0;

 

    var name = \"javascript\";

    var version = 6.0;

    export {name,version};

    以上两种方式是等价的。

 

 

    export function Person() {

      this.name = \‘javascript\‘;

    };

 

    function Person() {

      this.name = \‘javascript\‘;

    };

    export {Person};

    以上两种方式是等价的

 

 

   通过as使用别名的方式(自己定义输出的变量名)

   export {Person as p};

   export {name as n,version as v};

 

 

 

   import:导入模块

    import {name} from \‘./base\‘;

 

 

 

   script标签的defer和async属性,都是异步加载的实现方式

    相同点:下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。

    不同点:

      defer:要等到整个页面正常渲染结束,才会执行

      async:一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染

 

   浏览器加载 ES6 模块,也使用<script>标签,但是要加入type=\"module\"属性。

   type=\"module\"的<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,

   再执行模块脚本,等同于打开了<script>标签的defer属性。

 

 

   备注:浏览器并未实现模块功能,但是可以通过Babel转码器来实现

ES6笔记Module