import命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import是编译时调用，虽然import命令具有提升效果，会提升到整个模块的头部，但还是建议放在文件开头。

// base.js 
export var foo = 'bar';
setTimeout(() => foo = 'baz change', 500); 

// main.js 
import { foo } from './base';
console.log(foo); // bar 
setTimeout(() => console.log(foo), 600);// baz changed

上面代码可以看到，两次获取的foo值是不同的，因为import是动态加载，可以感知到base.js中的变化.

这样的设计，可以提高编译器效率，但是没有办法实现运行时加载。

因为require是运行时加载，所以import命令没有办法代替require的动态加载功能。

import为了实现动态加载，引入了import()函数，该函数返回一个promise对象。


import(`./xxxx.js`)
  .then(module => {
    ...
  })
  .catch(err => {
    ...
  });

但是，这样存在一个问题：就是可能出现模块还没有加载完就被调用的情况，此时会调用失败。

// base.js
export var fish;

setTimeout(() => fish = 'fish', 500);


// main.js
import { fish } from './base';

console.log(fish); //undefined

import使用

export：导出
import：导入

import xxx from '/xxx'

import * as xxx from '/xxx'

import {xxx1, xxx2, xxx3} from '/xxx'

export xxx

export {xxx1, xxx2, xxx3}

export default xxx

《学习笔记——Vue模块import》

import命令

import使用