宜宾网站建设公司

ES6模块之export和import教程-创新互联

一、ES6中的模块
ES6中的模块即使一个包含JS代码的文件，在这个模块中所有的变量都是对其他模块不可见的，除非我们导出它。ES6的模块系统大致分为导出（export）和导入（import）两个模块。
★在浏览器中直接使用es6模块

创新互联是一家专业提供绥棱企业网站建设,专注与成都网站制作、成都网站设计、H5场景定制、小程序制作等业务。10年已为绥棱众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
  • 显示声明type="module"
  • script 里面要加 type="module", 这样浏览器才会把相关的代码当作ES6的module 来对待

    ★使用webpack来进行模块化开发
    只需在需要的地方使用export或者import，其他的都交给webpack进行处理，就不需要声明什么type="module"了

二、导入的具体使用

场景1：只想导入源模块的部分内容
假设a.js是以如下方式导出的

// a.js
export var num = 100
export var name = '王小明'

也可以是
var num = 100;
var name = '王小明';
export {num}
export {name}
export {num,name}
不可以是：export num 或者 export name，这种写法需要加上{}，上面写在一行的可以直接那样写

那么如果我们只需要a模块的num，就应该按下面的方式导入它

// b.js
import {num} from './a.js'  //num必须加上{}，不可以直接是import num，.js后缀可省略
console.log(num) // 100

此处的模块导入利用了ES6的解构方式

场景2：不满意源模块所导出的变量或方法的名称，想要为它们另起名称
假设a.js中有一个名称如此晦涩的变量gddhauabsg

// a.js
export var gddhauabsg = 100

忍不住想要重命名这个变量的名称，但是又无权或不想修改源模块的话，那么不妨这么做

// b.js
// 如此，我们就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100

场景3：想要把源模块的所有导出都导入进来，但偏偏源模块不是以export default方式导出的
假设a模块将每个变量都单独，且声明时立即导出

// a.js
export var num = 100
export var name = '王小明'

那么我们就要这样导入a的所有导出

// b.js
import * as moduleA from './a.js'
console.log(moduleA.num)  // 100
console.log(moduleA.name) // '王小明'

解释一哈：*代表源模块（除去export default）的所有导出的集合，该集合类似Object类型，*就相当于{num: 100, name: '王小明'}，所以在源模块没有使用export default导出时，我们就可以使用上面的方式导入源模块的所有导出

场景4：源模块并没有对外暴露任何导出
a模块没有导出任何内容

// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i])
}

那么b文件将a.js文件整个引入就好了

// b.js
// 此处会执行a.js的所有代码逻辑
import './a.js'

那么有些童鞋可能会有个疑问“这种导入方式的应用场景在哪？”，不知道大家是否听过'腻子脚本'这一概念，就是一些第三方脚本或工具，作用类似于补丁，用于兼容一些新特性或功能，在一般情况下，这些脚本或工具只需要自执行，并且通常都是在我们的业务代码之前引入

三、导出的具体使用
ES6模块的导出方式大致有两种：命名导出、默认导出；

场景1：源模块怎样才能支持命名导入和命名空间导入？

// a.js
// 方式1：在源模块末尾集中导出（当导出较多时，推荐此方式，方便管理导出）
var num = 100
var name = '王小明'
var flag = true
export {
    num,
    name,
    flag
}

// 方式2：声明时立即导出（当导出较少时，推荐此方式）

export var num = 100
export var name = '王小明'
export var flag = true

场景2：导出的内容前后名称需要不一致，那么我们可以尝试重命名
什么意思呢？如果源模块的开发者有下面这种想法时，就应该使用重命名导出：‘我想要提高代码的可读性且有较好的语义化，此时变量或方法的名称长度一定不会太短，类似getOrderInfoFromDatabaseByHttp这种命名，但又不想让使用我的模块的人觉得我的导出名称过长’，示例如下：

// a.js
// 名称真的好长
var getOrderInfoFromDatabaseByHttp = function () {
    // ...
}
export {
    // 如果没有重命名，就会导出下面这一大串
    // getOrderInfoFromDatabaseByHttp
    // 但如果使用了重命名，方法的名称就会变得很简洁，即getOrderInfo
    getOrderInfoFromDatabaseByHttp as getOrderInfo
}

场景3：模块功能单一，并且只需要导出值，不需要具名，使用默认导出export default

// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'  //直接是version，不是{version}，而且导入时的名字可以随意取，不一定就是version

上面的代码功能很简单，只是导出项目的版本号，所以我们应该使用默认导出，而没有必要像下面这样写：

// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
不是默认导出需要加{}，是默认导出就不需要加{}~~

四、总结
1、默认导出
export default (默认导出)，一个模块里面只能有一个默认导出
注意： 使用export default 向外暴露的成员，可以使用任意的变量名称来接收
注意： 在一个模块中，使用export default 只允许向外暴露1次
注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员

const apikey="123key";
export default apikey;

引入模块：
import kkkk from '路径'；

2、命名导出
注意： 使用 export 向外暴露的成员，如果不是这种写法export var num = 100，而是 var num = 100，export {num}，导出的时候模块名也得加上{}，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
注意： 使用export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；

const apikey="123key";
const name="Marray";
function greet(name){
    console.log(name)
}
export {apikey,name,greet};//这种方式导出的模块引入的时候必须是这个名称，如下：
import {apikey,name,greet} from '路径'

3、导出和引入模块的时候都可以使用别名，如
export {apikey as key,name,greet};
当我们引入模块的时候必须使用别名
import {key，name,greet} from '路径'

五、笔记
1、es6环境下，一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

2、在src目录下，新建common文件夹，新建profile.js，现在我们在profile.js里面加入以下代码

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export const SuccMsgCode=0;

等价于

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
const SuccMsgCode= 0;
export {firstName, lastName, year, SuccMsgCode};

es6会将，profile.js视为一个模块，所以如果希望外部能访问这三个变量，需要将其导出。但是应该优先考虑使用第二种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

在src目录下的main.js文件中 中加入以下代码

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';
console.log('firstName\t' + firstName);
console.log('lastName\t' + lastName);
console.log('year\t' + year);
console.log('SuccMsgCode\t' + SuccMsgCode);

就会看到firstName，lastName，year, SuccMsgCode正常输出了，但是此种方法是作为变量导入导出的，所以名称必须一致。除非使用 as 命令指定新的名称，例如：

导入时指定别名（不推荐）

export {firstName, lastName, year, SuccMsgCode};
import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';
console.log('SuccMsgCode\t' + SuccMsgCode1);

我们看到SuccMsgCode1正常显示‘Hello World！’

或者，导出时指定别名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };
import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';
console.log('SuccMsgCode \t' + SuccMsgCode2);

我们看到SuccMsgCode 正常显示‘Hello World！’
还可以直接使用以下语法：export { import1 as name1, import2 as name2, …, nameN } from …;

我们建议直接使用此种语法，方便又直观，一般不在import时做别名处理。

3、export 不仅能导出变量，还能导出函数和类
在profile.js中加入以下代码：

export function multiply (x, y) {
  return x * y;
};

上面代码对外输出一个函数multiply。
在main.js 中加入以下代码

import {multiply} from 'common/profile';
console.log('multiply\t' + multiply);

multiply函数被打印出来
如果将profile.js中的代码修改为：

export multiply = function (x, y) {
  return x * y;
};

等价于

function multiply (x, y) {
  return x * y;
};
export {multiply};

4、默认导出 export default
如果将export 修改为 export default 则之前的导入导出变量皆不能使用，因为export default只允许export出现一次，而且在使用导出、导入时，不需要加{}，代码如下

function multiply (x, y) {
  return x * y;
};
export default multiply;
import multiply from 'common/profile';

如果需要导出整个文件，可使用如下代码

export default {
  data () {
    return {
      firstName: 'Michael'
    };
  },
  methods: {
    multiply (x, y) {
      return x * y;
    }
  }
};

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


当前标题：ES6模块之export和import教程-创新互联
浏览地址：http://ybzwz.com/article/ccgcdp.html

其他资讯