es6 module

标签:mes   sub   UNC   编译   bar   export   运行时   一起   ons   

export负责将模块内的内容导出,import负责从其他模块导入内容.

原文件foo.js

const name = ‘coderwhy‘;
const age = 18;
let message = "my name is why";

function sayHello(name) {
  console.log("Hello " + name);
}

导出方式一:

export const name = ‘coderwhy‘;
export const age = 18;
export let message = "my name is why";

export function sayHello(name) {
  console.log("Hello " + name);
}

方式二:

const name = ‘coderwhy‘;
const age = 18;
let message = "my name is why";

function sayHello(name) {
  console.log("Hello " + name);
}

export {
  name,
  age,
  message,
  sayHello
}

方式三:

export {
  name as fName,
  age as fAge,
  message as fMessage,
  sayHello as fSayHello
}

导入的方式一:

import {标识符列表} from ‘模块‘

import { name, age, message, sayHello } from ‘./modules/foo.js‘;

方式二:

import { name as wName, age as wAge, message as wMessage, sayHello as wSayHello } from ‘./modules/foo.js‘;

方式三:

import * as foo from ‘./modules/foo.js‘;
foo.sayHello("Kobe");

export和import结合使用

导出一个sum函数

export const sum = function(num1, num2) {
  return num1 + num2;
}

做一个中转

export { sum } from ‘./bar.js‘;

直接从中转导入

export { sum as barSum } from ‘./bar.js‘;

default用法

默认导出,不需要指定名字,也不需要使用{}。

export default function sub(num1, num2) {
  return num1 - num2;
}

导入

import sub from ‘./modules/foo.js‘;
console.log(sub(20, 30));

在一个模块中,只能有一个默认导出

动态加载一个模块,使用import函数

let flag = true;
if (flag) {
  import(‘./modules/aaa.js‘).then(aaa => {
    aaa.aaa();
  })
} else {
  import(‘./modules/bbb.js‘).then(bbb => {
    bbb.bbb();
  })
}

ES Module的原理

ES Module加载js文件的过程是编译(解析)时加载的,并且是异步的。

编译时(解析)时加载,意味着import不能和运行时相关的内容放在一起使用。

异步的意味着:JS引擎在遇到import时会去获取这个js文件,但是这个获取的过程是异步的,并不会阻塞主线程继续执行。

es6 module

标签:mes   sub   UNC   编译   bar   export   运行时   一起   ons   

原文地址:https://www.cnblogs.com/haoqirui/p/13897598.html

版权声明:完美者 发表于 2020-10-30 12:12:47。
转载请注明:es6 module | 完美导航

暂无评论

暂无评论...