一、定义
作为动词v,进口;输入;引进;导入;移入等意思,根据语境,ES6中应该是导入的意思。
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块
二、找例子
2-1、from的来源分为三类:相对定位、绝对定位、模块名
// 通过模块名赋值给变量axios,必须有配置文件,告诉js引擎该模块的位置
import axios from 'axios';
// 通过相对路径赋值给变量Home
import Home from '../views/Home.vue';
// 通过绝对路径赋值给变量Head
import Head from '/src/common/head.vue'
2-2、多个变量接收
// 通过访问相对路径赋值,赋值给三个变量,profile.js对外接口名称必须是firstName,lastName,year
import {firstName,lastName,year} from './profile.js';
//profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { fristName, lastName, year };
2-3、修改变量名、变量名都是只读的、不建议修改对象的属性
// 因为变量名都是从export返回出来的,如需要修改变量名,需要使用as
import {lastName as surname} from './profile.js'
// improt命令输入的变量都是只读的,不允许在加载模块的脚本里面改写接口
import {a} from './xxx.js'
a = {} // Syntax Error: 'a' si read-only;
// 如果a是一个对象,可以改写它的属性
import {a} from './xxx.js'
a.foo = 'hello'; // 合法操作
// PS: a的属性可以成功改写,并且其他模块也可以读到改写后的值。不过这种写法很难查错,建议凡是输入的变量,都当作完全只读,不要轻易改变它的属性。
2-4、 import的代码前置,编译阶段执行
// import命令具有提升效果,会提升到整个模块的头部,首先执行。
foo ();
import {foo} from 'util';
// import 命令是编译阶段执行的,在代码运行之前,所以上述代码不会报错
2-5、import 不能使用表达式和变量,因为import是静态执行
// 报错
import {'f' + 'oo'} from 'my-module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
}
// 通过访问jquery 赋值给$符号
import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';
三、它是什么?
import是导入模块的关键词,import就像一把万能钥匙,导入模块就像打开不同的房间。
四、它为什么是?
分析上述案例得知:
关键词:import 必须
接收模块返回的接口:变量、多个变量用中括号包裹、重命名使用as
模块来源关键词:from
模块源:模块名+配置文件、相对路径、决定路径