使用ES6模块在js文件里边引入其它js文件

一、加载文件

script标签需要加入type属性,值为:module.

示例index.html:

<script type="module" src="./js/index.js"></script>

此时浏览器就知道这是一个ES6的模块,并且是异步加载的。script标签在没有添加async或者defer属性的情况下,默认是等到整个页面渲染完成,再执行模块的代码。如果加了async表示模块加载完成就会立即执行。defer属性和默认值一样,都是等到页面渲染完成再执行。

二、引入js

使用import引入其它js,在添加了module属性的js代码块/文件里,import module from 'moduleName.js'即可引入一个js文件。

示例:index.js

import header from './header/header.js'

三、指定输出

在被引入的js文件里,使用 export 输出指定的内容。

示例header.js:

function header() {
    console.log("this is header");
}
export default header;

在index.js里边,import进来的header,就是在header.js里边输出的header,它是一个函数,在index.js里边调用的时候,就想调用一个普通函数一样使用就可以。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我所有文字的组合都不及一场风 它抵达水赋予明净以生命的涟漪它采撷的花香鼻息里飘着杳然的影子 它振翼而起,翅羽扑闪出...
    青语书生阅读 901评论 20 17
  • 先看看OWASP Top 10,2013年和2017年的比较。 A1:2017 注入 常见的注入“Some of ...
    redexpress阅读 1,168评论 0 2