ES6模块化-介绍

之前在nodejs中学习模块化,名称为“CommonJS模块化”

导出:module.exports=对象

导入:var 名称 = require(文件名字)

为什么要使用模块化?

模块化是代码共享机制体现

有一份代码(例如axios、vue等等)在许多场合下都要进行使用,那么不要自己开发,直接把别人开发好的代码共享给我们使用即可

在浏览器里边可以通过

相反在nodejs中,不能使用

现在我们通过VueCLI脚手架创建的项目,内部的源码也都是nodejs的体现,所以要向共享代码使用,这样也需要使用模块化技术

之前的CommonJS模块化是民间的

官方正式的名称为 ES6模块化

目前:commonjs和es6模块化都不能在浏览器中直接使用

​ commonjs模块化在nodejs中可以使用

​ es6模块化不能在nodejs中应用,还需要时间融入

​ 现在浏览器中可以使用模块化技术,名称为 CMD和AMD,它们都是commonjs的衍生产品

ES6模块化-默认导出和导入

代码共享需要有内容提供方 和 内容使用方

提供方:导出

使用方:导入

默认导出:通过一个对象对模块的全部信息做输出处理

默认导入:对默认导出的信息做导入使用

注意:

​ es6模块化需要在当前的脚手架项目中使用,零散文件不能用

语法:

默认导出的语法:

export default { name:'jack', height: 170, age:23 }

默认导入的语法:

import 接收名称 from '模块名称'

注意:一个模块中只能用一次默认导出

使用示例:

在这里插入图片描述

ES6模块化-按需导出和导入

按需:根据实际需要把一个模块中的个别成员信息给导出使用

导出语法:

export const a = 10
export function xx(){} 

导入:

import {xx,xx,xx} from  模块文件名字
import {xx as 别名,xx,xx} from  模块文件名字

xx代表实际导出的成员名称

根据需要,尽管导出了多个成员,但是导入的时候,可以都使用,也可以使用一部分

导入的xx名称不设置别名情况下,需要与导出的名称一致

使用示例:

在这里插入图片描述

ES6模块化-默认和按需同时导出和导入

默认和按需同时存在的导出:

export default 对象    // 默认导出
export const a = 10    // 按需导出
export const b = 20

默认导出 的摆放位置没有要求

单个模块文件中 默认导出 只能设置一个

默认和按需同时存在的导入:

  1. 各自导入

    import 名称 from  模块   // 默认导入
    
    import {xx,xx,xx}  from  模块  // 按需导入
    
  2. 同时导入

    import 名称,{xx,xx,xx}  from  模块  // 默认和按需同时导入
    

    注意:默认成员导入在"前",按需导入在"后"

使用实例:

在这里插入图片描述

ES6模块化-没有导出应用

在有的js模块文件中,其没有做导出动作,那么这个文件可以直接引入,其内部代码会自然在引入的同时就发生执行了

导入语法:

import 模块文件名称

使用示例:

在这里插入图片描述

后期,其他有许多文件例如css、less等它们就做直接导入即可 (css、less本身没有导出动作)

ES6模块化-小结

  1. 导出,就是共享内容提供方,导出的内容可以被导入者抓取到
  2. 导入,就是共享内容使用者
  3. 默认导出就是通过一个对象把全部的内容都提供出来
  4. 按需导出就是需要哪个信息就导哪个出来,不需要的不操作
  5. 一个模块只能做一次默认导出,但是可以做多次按需导出
    导出动作)

ES6模块化-小结

  1. 导出,就是共享内容提供方,导出的内容可以被导入者抓取到
  2. 导入,就是共享内容使用者
  3. 默认导出就是通过一个对象把全部的内容都提供出来
  4. 按需导出就是需要哪个信息就导哪个出来,不需要的不操作
  5. 一个模块只能做一次默认导出,但是可以做多次按需导出
Logo

前往低代码交流专区

更多推荐