JS module的导出和导入

2024年4月15日 195次阅读 来源: KevinYan

近来看了些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 $}的替换写法。

    原文作者：KevinYan
    原文地址: https://segmentfault.com/a/1190000018267363
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞