当前位置: 主页>网站教程>JS教程> JavaScript中AMD和ES6模块导入输出的比力（代码示例）

分享文章到：

JavaScript中AMD和ES6模块导入输出的比力（代码示例）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于JavaScript中AMD和ES6模块导入输出的比力（代码示例），有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

我们前端在开发历程中经常会碰到导入输出功效，
在导入时，有时候是require，有时候是import
在输出时，有时候是exports，module.exports，有时候是export，export default
今天我们对这些内容停止简便的介绍

import，export，export default

import，export，export default属于ES6标准

import

import 是在编译历程中施行
也就是说是在代码施行前施行，
比方说，import后面的途径写错了，在运转代码前就会抛错，
在编写代码时，import不是必然要写在js的最前面
import命令具有晋升结果，会晋升到整个模块的头部，第一施行。（是在编译阶段施行的）
import是静态施行的
由于import是静态施行的，不克不及使用表达式和变量，即在运转时才能拿到结果的语法构造
比方，不克不及再if和else中使用import
再比方，import后的from的途径，可以是相对途径，可以是绝对途径，但是不克不及是按照变量得来的途径

//import 途径不成认为变量
var url = './output'
  import {
    a,
    b
  } from url//这么写会报错
//------------------
//import 的引入与否不克不及和代码逻辑向关联
let status= true
if(status){
     import {
    a,
    b
  } from url//这么写会报错
}

import可以使用as停止重命名
import 的有许多种导入方式，

  import foo from './output'
  import {b as B} from './output'
  import * as OBj from './output'
  import {a} from './output'
  import {b as BB} from './output'
  import c, {d} from './output'

导入的方式和输出有些关联，我们鄙人面说输出的时候，对以上这些导入方式停止逐一介绍

exoprt和export default

将exoprt和export default放在一起，由于它们关联性很大
简便说：export是输出，export default是默许输出
一个模块可以有多个export，但是只能有一个export default，export default可以和多个export共存
export default 为默许输出，输出的是用{}包裹的一个对象，以键值对的情势存在
输出的方式不一样，导入的方式也就不一样，
所以倡议统一个项目下使用统一的导入输出方式，利便开发
export default解构今后就是export
通过两个直不雅的demo看下export和export default的不同
先看一段代码(export)
output.js

const a = 'valueA1'
export {a}

input.js

import {a} from './output.js'//此处的import {a}和export {a}，两个a是一一对应关系
console.log(a)//=>valueA1

留神上面的代码其中export {a}输出的a，和import {a}导入的a是统一个a
再看一段代码(export default)

const a = 'valueA1'
export default{a}

input.js

import a from './output.js'//此处的a和export default{a}，不是一个a，
console.log(a)//=>{ a: 'valueA1' }

看下export default的栗子中的input.js，我们稍作改动

import abc from './output.js'//此处的a和export default{a}，不是一个a，
console.log(abc)//=>{ a: 'valueA1' }

我们做了些改动，但是输出没有转变，import导入的是export default下的对象，叫什么名字都可以，由于只会存在一个export default

exoprt和export default混合使用

exoprt和export default在统一个模块中同时使用，是支撑的，虽然我们一样不会这么做
看一个栗子
output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo施行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

input.js

import obj, {a,b } from './output'
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }

as 重命名

通过 exoprt和export default输出的在import引入时都支撑通过as停止重命名
看个栗子
还是上面的阿谁output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo施行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

input.js

import {a as A} from './output'
import {* as A} from './output'//这是不支撑的
import * as obj from './output'
console.log(A); //=>valueA1
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

as后面的变量是你要在input.js中使用的
重点看这一部分

import {* as A} from './output'//这是不支撑的
import * as obj from './output'
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

代表了所有，包罗了export和export default输出的

我们此前说import{}和export{},是一一对应关系，所以在export输出的，在import{}不支撑使用*
关于 import，export，export default先介绍到这里，我们连续

require，exports，module.exports（记得后面的s）

这是 AMD标准

require

require是运转时调取，所以require理论上可以使用在代码的任何地方

require支撑动态引入

例如，这样是支撑的

let flag = true
if (flag) {
  const a = require('./output.js')
  console.log(a); //支撑
}

require途径支撑变量

let flag = true
let url = './output.js'
if (flag) {
  const a = require(url)
  console.log(a); //支撑
}

通过require引入，是一个赋值的历程

exports 与 module.exports

按照AMD标准
每个文件就是一个模块，有本人的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不成见。
每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

为了利便，Node为每个模块供给一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

const exports = module.exports;

所以说
以下两种写法等价

exports.a ='valueA1'
module.exports.a='valueA1'

前面说在每个模块供给一个exports变量，指向module.exports。
所以不克不及直接给exports赋值，赋值会覆盖

const exports = module.exports;

直接给exports赋值会割断exports和 module.exports的关联关系
看一个栗子
output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
module.exports = { c}
exports.b = b//当直接给 module.exports时，exports会失效
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }

连续看代码
output.js

//部分省略
exports.b = b//这样可以生效
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ b: 'valueB1', a: 'valueA1' }

再看一段代码
output.js

//部分省略
module.exports = { c}
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }

当直接给 module.exports时，exports会失效

穿插使用

在ES6中export default 输出的是一个对象
在AMD中exports和module.exports输出的也都是一个对象
所以假如你手中的项目代码支撑两种标准，那么事可以穿插使用的（当然不倡议这么去做）
通过export输出的不必然是一个对象

demo1

output.js

//部分省略
module.exports = { c}
module.exports.a = a

inputj.s

import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }

demo2

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
function foo() {
  console.log(`foo施行，c的值是${c}`);
}
export {a}
export default {b,c,foo}
export {b}

input.js

  const a = require('./output.js')
  console.log(a); //=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }

总结

require，exports，module.export属于AMD标准，import，export，export default属于ES6标准
require支撑动态导入，动态匹配途径，import对这两者都不支撑
require是运转时调取，import是编译时调取
require是赋值历程，import是解构历程
关于export和export default 不一样的使用方式，import就要采取不一样的援用方式，主要不同在于可否存在{},export输出的，import导入需要{},导入和输出一一对应,export default默许输出的，import导入不需要{}
exports是module.export一种简写情势，不克不及直接给exports赋值
当直接给module.export赋值时，exports会失效

本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注PHP中文网的JavaScript视频教程栏目！

以上就是JavaScript中AMD和ES6模块导入输出的比力（代码示例）的具体内容，更多请关注百分百源码网其它相关文章！

打赏