如何在JavaScript中导入导出module

  • 时间:
  • 浏览:38
  • 来源:恰卡网

导读这篇文章将为大家详细讲解有关如何在JavaScript中导入导出 module,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 JavaScript是什么 Ja...

这篇文章将为大家详细讲解有关如何在JavaScript中导入导出 module,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

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

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

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

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

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

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

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

varyear='2018';
varmonth='Febuary';
export{year,month};

export 导出模块

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

命名式导出

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

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

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

export*from'base_module';

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

varname='Kevin的居酒屋';
vardomain='http://coffee.toast.com';

export{name,domain};//相当于导出{name:name,domain:domain}

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

export{nameassiteName,domain}

注意一下语法错误:

export1;
vara=100;
exporta;

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

默认导出

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

exportdefaultfunction(){};//导出一个函数
exportdefaultclass(){};//导出一个类

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

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

constD=123;
exportdefaultD;
export{Dasdefault};

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

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

在另一个模块(js文件)中,我们可以像下面这样引用:

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

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

//"my-module.js"模块
exportdefaultfunction(x){
returnx*x*x;
}

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

importcubefrom'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*asmyModulefrom"my-module";

默认导入

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

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

default关键字

//my-module.js
exportdefaultfunction(){}

//等效于:
functionfunc(){};
export{funcasdefault};

在import的时候,可以这样用:

importafrom'./my-module';
//等效于,或者说就是下面这种写法的简写
import{defaultasa}from'./my-module';

关于如何在JavaScript中导入导出 module就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

猜你喜欢

accesstoken中怎么获取用户黑名单列表

这篇文章将为大家详细讲解有关accesstoken中怎么获取用户黑名单列表,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 公众号可登录

2021-07-29

Java中怎么利用轮询获取线程返回数据

Java中怎么利用轮询获取线程返回数据,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 1. 多线程的特点 一般程序中

2021-07-29

XamarinEssentials中怎么获取首选项的值

这期内容当中小编将会给大家带来有关XamarinEssentials中怎么获取首选项的值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 XamarinEssentials教程获取首

2021-07-29

jQuery中怎么获取内容和属性

这篇文章给大家介绍jQuery 中怎么获取内容和属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方

2021-07-29