个人自学前端35-Vue12-导入导出

目录

• 导入导出
  • • 一： 导入导出的写法
      • 1：es6的导入导出。
      • 2: 插件的导入导出。
      • 3: 插件模块化规范.

导入导出

模块化环境下，各个模块间，如果需要相互引入，就需要导入导出。

A模块使用B模块，A模块需要导入，B模块需要导出。

一： 导入导出的写法

1：es6的导入导出。

es6的导入导出语法 => import(导入) export(导出)

第一种导入导出方式.( 导入导出单个值 )

import 变量名 from 某模块地址
export default 表达式
// 1:(导出的是表达式的返回值)
// 2:(一个模块不能出现两个export default)
// 3:导入导出默认情况下不能写在任何的{}内.
// 4:导入的变量名可以任意书写

// 引入一个没有导出的模块 (为了让某个模块内的代码可以得到执行)
import 某模块地址

第二种入导入导出方式 ( 导入导出多个值 )

import { 变量1, 变量2, 变量3,..... } from 某模块地址
export { 变量1, 变量2, 变量3,.... }
export 声明 (变量声明,函数声明等)
// 1: 导出的不是一个对象.是一个特殊写法,也不是表达式.
// 2: 一个模块可以有多个export,导出多个值.
// 3: 导入的时候可以选择性的导入.
// 4: 导入导出的名字应该一致.

import {数据名 as 别名}
// 导入某个数据时,给它起一个别名.

export {数据名 as 别名}
// 导入某个数据时,给它起一个别名.

import * as 对象名 from 某个模块
// 导入所有数据的一个简写.后续可以通过对象来访问指定数据.

2: 插件的导入导出。

没有ES6之前，如何实现模块化？

ES6之前都是通过一些js的插件来实现模块化，模块化的js原理都是用闭包实现的。

常见的模块化插件：require.js 和 common.js

// Vue脚手架集成了模块化插件的写法：

// 导入.变量的值就是导出的表达式的值
const 变量名 = require(模块地址);
// 导出
module.exports = 表达式;

// 多个导出,以最后的为准
// module.exports 和 es6的导出不能共存.
// 遵循amd规范.

3: 插件模块化规范.

AMD规范 => 异步规范 => 什么时候用什么时候导入 => 导入可以写在某个函数内。require.js

CMD规范 => 同步规范 => 全部导入了才能用. => 导入导出不能写在任意的 {} 内 。common.js

(ES6的 import 和 export 有自己的规范，类似CMD规范 )