es6之import整理

·  阅读 511

1.加载某个模块export的对外接口,导入外部的变量或函数等

下面例子以a.js & b.js为例,二者 在同一目录且在b.js中引入a.js模块

// 写法一
export const m = 1;
import {m} from './a';

// 写法二
const m = 1;
export {m};
import {m} from './a'; 

// 写法三
const n = 1;
export {n as m};
import {m} from './a'; 

// 写法四
export function f() {};
import {f} from './a'; 

// 写法五
function f() {}
export {f};
import {f} from './a'; 
复制代码

下面写法用export default命令,为模块指定默认输出,让其他调用该模块时不用阅读文档就能加载模块

// 写法六
function f() {}
export default f; 
// f函数的函数名f,在模块外部是无效的。加载的时候,视同匿名函数加载。
const m = {};
export default m; 
// 定义的对象常量名m,在模块外部是无效的,加载的时候,视同匿名函数加载。
import a from './a'
复制代码

此种情况import命令可以为该匿名函数指定任意名字,这里import后的a就是随意命名的导入变量名。

// 写法七
export default function () {};
import pro from './a';
复制代码

import的例子:

import {firstName, lastName, year} from './profile';

import * as pro from './profile';

import pro from './profile';
复制代码

2.导入外部的模块,并立即执行,即使该文件并没有export

import './lib/test';
复制代码

上面例子将会执行从头到尾执行引入的js文件,当然,会忽略js文件里export,所以这种引入方式并不会关注是否有export

improt * from ''可以认为是 import {default as *} from ''的语法糖

分类:
前端
标签:
分类:
前端
标签: