目录

1、概述

2、export

3、import

4、export default

5、import()

6、关键知识点总结


1、概述

        一直以来开发vue项目,对export和import的用法都比较模糊,看别人怎么写我就照葫芦画瓢,不报错或者功能实现就行,完全不懂其中的原理,今日闲下来了,就揭穿它们的真面目吧!

       历史上,JavaScript是没有模块的概念的,就像它没有类的概念一样,就连css都有@import,所以社区制定了CommonJS和AMD规范实现模块加载。为此ES6新增了export和import命令实现了模块功能,而且它的实现方式简单得不可思议,完全取代了CommonJS和AMD,现已成为浏览器和服务器通用的模块解决方案。

       ES6的模块设计思想是静态化的,它在编译时确定模块的依赖关系以及输入和输出的变量,也就是说它在编译时就完成了模块加载,我们称为‘编译时加载’或者静态加载,效率上自然比CommonJS要高得多。模块功能主要由两个命令构成:export和import。

  • export命令规定模块的对外接口
  • import命令输入其他模块提供的功能

2、export

       一个模块是一个独立的文件,该文件内部的所有变量,外部无法获取,如果希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。所以我们通常在vue项目中引入第三方js文件(比如粒子动画)时,往往需要改动此文件,并将最终的变量或者函数或者类暴露出来才能在vue文件中通过import引入。
export可以输出变量、函数和类。

// export.js
// bad
export const name = '飘摇的浅樱';
export const age = 17;
export const gender = '女';
export function foo() {
  console.log('函数foo');
}
export class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  getInfo() {
    return `姓名:${this.name},性别:${this.gender},年龄:${this.age}`;
  }
}


// good
const name = '飘摇的浅樱';
const age = 17;
const gender = '女';
function foo() {
  console.log('函数foo');
}
class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  getInfo() {
    return `姓名:${this.name},性别:${this.gender},年龄:${this.age}`;
  }
}
export { 
  name, 
  age, 
  gender, 
  foo, 
  Person 
};

上面两种写法是等价的,但是优先推荐使用下面的写法,因为在文件末尾你能一眼就看清楚输出了哪些变量。
export输出的变量可以使用as关键字重命名。

// export.js
const arr = ['html', 'css', 'js']
export { arr as technologies }

// import.js
import { technologies } from './export.js';

export命令规定的是对外的接口,因此必须与模块内部的变量建立一一对应的关系。

// 错误写法一
export 10;

// 错误写法二
var n = 10;
export n;

// 正确写法一
export const n = 10;

// 正确写法二
const n = 10;
export {n};

// 正确写法三
const n = 10;
export {n as m};

正确写法中,import的时候通过变量n或m拿到值10。而在错误写法中,输出的只有值而没有变量,缺少对应关系。


3、import

        使用export命令定义了对外接口之后,就能够使用import命令加载此模块。

// import.js
import { name, age, gender, foo, Person } from './export.js';
console.log(name, age, gender);
foo();
const p = new Person('飘摇的浅樱', 17, '女')
const info = p.getInfo()
console.log(info)
// import.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="import.js" type="module"></script>
</body>
</html>

结果如下:

从例子中可以看出,import的{}内的变量必须与export输出的变量名称相同,否则无法加载。

import { name1 } from './export.js';

 import命令输入的变量都是只读的,因为它的本质是输入接口,所以不允许在加载模块的脚本里面改写接口。

import { obj } from 'export.js';
obj = {};  // Syntax Error : 'obj' is read-only;

 

4、export default

        在第三点中,我们已经知道了,import的变量必须与export输出的变量名称相同,这个规则导致我们必须知道输出的变量名称是什么才能顺利import,这就增加了我们阅读文档的时间,不利于快速上手。export default的出现就是为了让用户不用知道模块内定义的变量就能加载模块,它为模块指定了默认输出。

// export.js
const tellYourName = (name) => name
export default tellYourName;

// import.js
import tellName from './export.js'
const name1 = tellName('飘摇的浅樱')
console.log(name1)  // 飘摇的浅樱

可以看到import后面的tellName没有加花括号{},并且名称和export.js中输出的变量名称不同,这样我们在引用第三方模块时就无需知晓内部export的变量名称是什么。
export default命令在一个模块中只能使用一次。

5、import()

import命令做不到node的require的动态加载功能,因此ES2020提案引入import()函数,支持动态加载模块。

import(spec)

参数spec代表加载的模块的位置,import命令能接受什么参数import()函数就能接受什么参数,区别只是后者是动态加载。
我所接触到的import()的应用最常见的就是路由懒加载了。因为当打包构建应用时,JavaScript包会变得非常大,影响页面加载。这时候我们将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。写法如下:

// index.js
{
  path: 'home',
  component: () => import('@/views/page/home'),
  name: 'home',
  meta: {
    title: '首页'
  },
}

上面例子中,是再熟悉不过的路由文件了,它代表的就是当访问home这个路由时,才加载home组件,其他路由均使用此方法,就能大大减小js包体积,加快页面加载速度。

import()函数可以用在任何地方;
import()函数与所加载的模块没有任何静态连接关系;
import()函数类似于Node的require方法,但它是异步加载。

6、关键知识点总结

(1)ES6新增export和import两个命令实现模块加载;
(2)ES6模块自动采用严格模式,而不管你有没有在模块头部加上'use strict;';
(3)export命令可以输出变量、函数和类;
(4)export输出的变量就是本来的名字,但是可以使用as关键字重命名,引用的时候就是重命名的那个名称;
(5)export命令规定的是对外的接口,因此必须与模块内部的变量、函数或类建议一一对应关系;
(6)export命令输出的接口与其对应的值是动态绑定关系,意思是通过此接口可以获取模块内部实时的值;
(7)import和export命令只能在模块的顶层,不能在代码块之中(比如在函数或者if语句之中);
(8)import()函数在路由懒加载、条件加载中最能体现价值;
(9)比较一下import各个写法的含义:

import '@/style/index.scss';  // 执行所加载的模块,但是不输入任何值

import HelloWorld from "@/components/HelloWorld.vue";  // 引用组件(export default)

import Vue from 'vue';  // 引用Vue模块(export default)

import { uploadOss as alias } from '@/utils/upload';  //引用uploadOss并重命名为alias(export)

import { queryList, addUser } from '@/api/home.js';  //引用home.js中的变量或函数或类(export)

import * as alias from 'vue-router';   // 加载整个模块(export),alias.xxx

import _, { each, forEach } from 'lodash';   //引入默认方法和其他接口

参考文档:ES6 入门教程

Logo

前往低代码交流专区

更多推荐