JS module的导出和导入

muzhuyu 发布于2019-08-23 15:26 / 2117人阅读

摘要：默认导出默认导出也被称做定义式导出。导出一个函数导出一个类默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了名称的命名导出。同样的，在导入时可以使用指令导入这些默认值。

最近看了些Vue框架写的程序，发现自己的前端知识还停留在几年以前，发现现在Javascript程序里有各种各样的对module的导入和到处，导入乍一看跟python的语法挺像的无非就是把from和import这两个关键词的使用颠倒了一下顺序。仔细看下来还是和python挺不一样的import模块的前提是模块有导出，并且还分默认导出和命名导出，有些麻烦。所以今天这篇文章就把所有的export形式和相应的import使用汇总一下。

ES6在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案，完全可以取代 CommonJS 和 AMD 规范，基本特点如下：

每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取；

每一个模块内声明的变量都是局部变量，不会污染全局作用域；

模块内部的变量或者函数可以通过export导出；

一个模块可以导入别的模块

2.模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能；

3.一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量；

var year = "2018";
var month = "Febuary";
export {year, month};

export 导出模块

export语法声明用于导出函数、对象、指定文件（或模块）的原始值。有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以有多个，而默认导出每个模块仅一个。

命名式导出

模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

我们可以使用*和from关键字来实现的模块的继承：

export * from "base_module";

模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有成员，而非导出成员可以认为是类中的私有成员：

var name = "Kevin的居酒屋";
var domain = "http://coffee.toast.com";
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

模块导出时，我们可以使用as关键字对导出成员进行重命名，上面的导出可以这样写：

export {name as siteName, domain}

注意一下语法错误:

export 1; 
var a = 100;
export a;

export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能在import的时候有一个变量与之对应export a虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}的形式。即使a被赋值为一个函数，也是不建议使用上面的形式导出的因为大部分风格都建议，模块中最好在末尾用一个export导出所有的接口，就像上面那些例子一样。

默认导出

默认导出也被称做定义式导出。命名式导出可以导出多个值，但在import引用时，也要使用相同的名称来引用相应的值。默认导出只有导出一个单一值，这个输出可以是一个函数、类或其它类型的值，这样在模块import导入时也会更容易引用。

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了default名称的命名导出。

下面两种导出方式是等价的：

const D = 123; 
export default D;
export { D as default };

使用名称导出一个模块时：

// "my-module.js" 模块
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

在另一个模块（js文件）中，我们可以像下面这样引用：

import { cube, foo } from "my-module";
console.log(cube(3));
console.log(foo);

使用默认导出一个模块时：

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

在另一个模块中，我们可以像下面这样引用，相对名称导出来说使用更为简单：

import cube from "my-module";
console.log(cube(3)); // 27

import导入模块

import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。

注意事项： import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言的导入风格一致。

命名导入

我们可以通过指定名称将导入成员插入到当作用域中。可以导入单个成员或多个成员：

注意，花括号里面的变量与export后面的变量一一对应

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：

import * as myModule from "my-module";

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导入这些默认值。直接导入默认值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

default关键字

// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

在import的时候，可以这样用：

import a from "./my-module";
 
// 等效于，或者说就是下面这种写法的简写
import {default as a} from "./my-module";

这个语法糖的好处就是import的时候，可以省去{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的{default as ...}语法，所以import $,{each,map} from "jquery";import后面第一个$是{default as $}的替代写法。

云服务器 GPU云服务器导入和导出 js导入导出excel数据导出导入导入导出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102049.html

一篇文章弄懂 JavaScript 中的 import

摘要：无论是否声明了，导入的模块都运行在严格模式下。这通常是包含模块的文件的相对或绝对路径名，可以不包括扩展名。引用时将用作一种命名空间的模块对象的名称。导出参数指定单个命名导出，而语法导入所有导出。导入默认值在无论是对象函数类等有效时可用。 import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode，导入的模块都运行在严格模式下。import语句不能在嵌入式脚...

why_rookie 2019-08-23 13:56 评论0 收藏0
深入 CommonJs 与 ES6 Module

摘要：目前主流的模块规范模块通用模块如果你在文件头部看到这样的代码，那么这个文件使用的就是规范实际上就是全局变量这三种风格的结合这段代码就是对当前运行环境的判断，如果是环境就是使用规范，如果不是就判断是否为环境，最后导出全局变量有了后我们的代码和目前主流的模块规范 UMD CommonJs es6 module umd 模块（通用模块） (function (global, facto...

sanyang 2019-08-23 14:42 评论0 收藏0
富婆给你说require、import和export

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。目前，主要有两个库实现了规范和。这些导出对象用名称进行区分，称之为命名式导出。简单粗暴，富婆给你说，其实我也没太搞明白，最近看了一篇文章我才理清了一点点思路，最近整日沉迷于肥宅快乐水，技术都跟不上了，来篇文章，提神醒脑，朝着我的富婆梦更近一步，早日走上富婆路，包养我家大狼狗！！！为什么有模块概念...

cod7ce 2019-08-02 16:16 评论0 收藏0
富婆给你说require、import和export

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。目前，主要有两个库实现了规范和。这些导出对象用名称进行区分，称之为命名式导出。简单粗暴，富婆给你说，其实我也没太搞明白，最近看了一篇文章我才理清了一点点思路，最近整日沉迷于肥宅快乐水，技术都跟不上了，来篇文章，提神醒脑，朝着我的富婆梦更近一步，早日走上富婆路，包养我家大狼狗！！！为什么有模块概念...

sourcenode 2019-08-23 17:18 评论0 收藏0
这几个概念你可能还是没搞清require、import和export

摘要：如果这个模块还依赖其他模块，那么函数的第一个参数，必须是一个数组，指明该模块的依赖性。目前，主要有两个库实现了规范和。这些导出对象用名称进行区分，称之为命名式导出。简单粗暴，富婆给你说，其实我也没太搞明白，最近看了一篇文章我才理清了一点点思路，最近整日沉迷于肥宅快乐水，技术都跟不上了，来篇文章，提神醒脑，朝着我的富婆梦更近一步，早日走上富婆路，包养我家大狼狗！！！为什么有模块概念理想情况...

only_do 2019-05-23 16:26 评论0 收藏0