es6 export import

 export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

具名export/import

// 第一种写法
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 函数
export function multiply(x, y) {
  return x * y;
};

// 第二种写法
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

// 函数
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

//"单个"引入
//方法一
import { firstName, lastName, year } from './profile.js';
//方法二
import { lastName as surname } from './profile.js';
//整体引入
import * as circle from './circle';

console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));

default  export/import 

前面使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

// export-default.js
// 写法一 匿名函数
export default function () {
  console.log('foo');
}
//写法二 具名函数
// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成
function foo() {
  console.log('foo');
}
export default foo;

// 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
// import命令后面,不使用大括号。
// import-default.js
import customName from './export-default';
customName(); // 'foo'

//同时加载具名和匿名
import _, { each, forEach } from 'lodash';

 动态加载 import()

import()返回一个 Promise 对象,

import()函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。另外,import()函数与所加载的模块没有静态连接关系,这点也是与import语句不相同。import()是异步加载.

比如说成用在vue-router中动态加载组件

{
      path: '/news',
      name: 'news',
      // import() 动态加载,返回一个Promise对象,什么时候运行到这一句,才会加载指定的模块,为异步加载。
      component: () => import('@/components/news'),
      meta: { title: 'news' }
    },

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值