Javascript模块导入导出详解

笔者开始学习Javascript的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试

比如 import xx from 'test.js' 不起作用,就加个括号 import {xx} from 'test.js'

反正总是靠蒙,总有一种写法是对的,其实还是没有理解,还是不懂

尤其是在当初写 www.helloworld.net 网站的时候,一遇到这种问题,就懵逼了,尤其是引入第三方库的时候

这种情况下更多,此篇文章也是为了怕以后忘记,自查用的,也希望能帮助更多的朋友,此篇文章只是针对ES6的模块相关知识

首先要知道export,import 是什么

我们知道,JS 模块导入导出,使用 import , export 这两个关键字

  • export 用于对外输出本模块
  • import 用于导入模块

也就是说使用 export 导出一个模块之后,其它文件就可以使用 import 导入相应的模块了

下面我们具体看看, import 和 export 到底怎么用?怎么导出模块(比如变量,函数,类,对象等)

1 导出单个变量

//a.js 导出一个变量,语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出: www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量,那么如何导出多个变量呢

 //a.js 中定义两个变量,并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"

 //将上面的变量导出
 export { siteUrl ,siteName }  

 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出: www.helloworld.net
 console.log(siteName)	//输出: helloworld开发者社区

3 导出函数

导出函数和导出变量一样,需要添加{ }

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 

//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出: 10

4 导出对象

js中一切皆对象,所以对象一定是可以导出的,并且有两种写法

4.1 第一种写法

使用 export default关键字导出,如下

//a.js 中,定义对象并导出, 注意,使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出:www.helloworld.net
console.log(obj.siteName)	//输出:helloworld开发者社区

4.2 第二种写法

同样是使用export default关键字,如下

//a.js 中定义对象,并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj

//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出:www.helloworld.net
console.log(obj.siteName)	//输出:helloworld开发者社区

5 导出类

导出类与上面的导出对象类似,同样是用 export default 关键字,同样有两种写法

5.1 第一种写法

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出:www.helloworld.net

5.2 第二种写法

//a.js 中定义一个类,最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//导出这个类
export default Person 

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出:www.helloworld.net

小结

下面我们简单总结一下

exportexport default的区别

  • export与export default均可用于导出常量、函数、文件、模块等
  • 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
  • export default后面不能跟const或let的关键词
  • export、import可以有多个,export default仅有一个。
  • 通过export方式导出,在导入时要加 { },export default则不需要
  • export具名导出xxx ,export default匿名。区别在于导入的时候,export需要一样的名称才能匹配,后者无论取什么名都可以。
  • 模块化管理中一个文件就是一个模块,export可以导出多个方法和变量,export default只能导出当前模块,一个js文件中只支持出现一个

对于import ,export , export default ,他们的用法上面的例子已经很详细的列出了,忘记的时候,可以当作参考看看

最重要的还是要明白为什么要这么写,实在不明白记住就行了。

到此这篇关于Javascript模块导入导出详解的文章就介绍到这了,更多相关Javascript模块导入导出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • python3实现将json对象存入Redis以及数据的导入导出

    Redis数据类型 String:二进制安全,可以包含任何数据 Hash:一个键值(key=>value)对集合 List:简单的字符串列表 Set:string类型的无序集合 Zset:每个元素都会关联一个double类型的分数,redis通过分数来为集合中的成员进行从小到大的排序 Redis基本命令 Key: set, get, delete Hash: hmset, hget, hdel List: lpush, lindex Set: sadd,smembers Zset: zadd,

  • 使用纯前端JavaScript实现Excel导入导出方法过程详解

    公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件... 要求真多! 现在总算是完成了,于是将我的经验分析出来. 在整个项目架构中,首先就要解决Excel导入的问题. 由于公司没有自己的框架做Excel IO,就只有通过其他渠道了. 嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装. npm inst

  • js导入导出excel(实例代码)

    导入: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" ><head>     <title>Untitled Page</title></head><script language="javascript" type="text/javascript">function importXLS(fileName){ 

  • JavaScript实现excel文件导入导出

    目录 一.需求场景描述 1.此时前端上传解析excel文件可能更合适 2.此时前端下载excel文件可能优雅一些 二.实现思路分析 1.导入excel文件实现思路分析 2.导出excel文件实现思路分析 三.关键代码 1. exportExcel.js 导出excel文件 2. importExcel.js 导入excel文件 四.使用示例 1.使用示例一:上传解析excel 2.使用示例二:下载excel文件 一.需求场景描述 文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常

  • 详解AngularJS中module模块的导入导出

    AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等. 关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主mo

  • 详解JS模块导入导出

    开发中基本不会将所有的业务逻辑代码放在一个JS文件中,特别是在使用前端框架,进行组件化开发中时,会复用相应的组件.这时,就会用到模块导入/导出的方法了. 当然,上面提到有模块的概念,也是在JS用于服务器端编程的时候才会出现,我们在使用前端框架时,使用npm run dev,不就是启动了一个node服务. 对于JavaScript模块化编程的起源可以追溯到2009年,Ryan Dahl在github上发布了node 的最初版本. 本文主要介绍几种模块导入/导出的方法. node 中模块导出/导入

  • JavaScript实现导入导出excel的示例代码

    目录 Excel导入 html代码 js代码 Excel导出 html代码 js代码 Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} > 导入 </button> <input id="upFile" type="file" style={{

  • python 环境变量和import模块导入方法(详解)

    1.定义 模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能 文件名就是模块名称 包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 import 模块名 form 模块名 import * from 模块名 import 模块名 as 新名称 3. 导入模块本质 import 模块名 ===> 将模块中所有的数据赋值给模块名,调用时需要模块名.方法名() from 模块名 import 方法名 ==>将该方法单独放到当前文件运行一遍

  • python中模块导入模式详解

    目录 模块导入 1.1 import导入模块 1.2 from 模块名 import 导入模板的方法 1.3 as 关键字 OS模块操作文件 OS模块的作用 模块的制作.发布.安装 3.1 模块制作 3.2 模块的分 3.3 示例 3.4 测试方法 3.5 all魔术方法 模块导入 1.1 import导入模块 所谓的模块其实就是一个外部的工具包,其中存在的其实就是Python文件,这些文件都实现了某种特定的功能,我们导入包之后直接使用即可,非常的方便. 在开发中使用最多的就是使用: impor

  • JavaScript模块模式实例详解

    本文实例讲述了JavaScript模块模式.分享给大家供大家参考,具体如下: 在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern). JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突. (functio

  • Docker容器中Mysql数据的导入/导出详解

    前言 Mysql数据的导入导出我们都知道一个mysqldump命令就能够解决,但如果是运行在docker环境下的mysql呢? 解决办法其实还是用mysqldump命令,但是我们需要进入docker的mysql容器内去执行它,并且通过配置volumes让导出的数据文件可以拷贝到宿主机的磁盘上 所以操作步骤就可以分为: 配置docker的volumes 进入docker的mysql容器,导出数据文件 至于数据导入,太过简单,就不说了 先来看看mysqldump命令常见选项: --all-datab

  • 通过字符串导入 Python 模块的方法详解

    我们平时导入第三方模块的时候,一般使用的是 import 关键字,例如: import scrapy from scrapy.spider import Spider 但是如果各位同学看过 Scrapy 的 settings.py 文件,就会发现里面会通过字符串的方式来指定pipeline 和 middleware,例如: DOWNLOADER_MIDDLEWARES = { 'Test.middlewares.ExceptionRetryMiddleware': 545, 'Test.midd

  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解

    目录 一.导入和导出 二.导出数据为excel实现过程 三.将excel中的数据导入到数据库中 一.导入和导出 导入:通过解析excel表格中的数据,然后将数据放到一个集合中,接着通过对持久层操作,将数据插入到数据库中,再加载一下页面,从而实现了数据的导入 导出:导出也是直接对数据库进行操作,获取数据库中所有的数据,将其存储在一个集中,接着使用查询出来的的数据生成一个excel表格 其中导入和导出的功能实现都是基于EasyExcel实现的 EasyExcel是阿里巴巴开源的一个基于Java的简单

  • Python模块文件结构代码详解

    本文研究的主要是Python模块文件结构的相关内容,具体如下. Python文件结构 文件结构(范例全文) #/usr/bin/env python "this is a test module" import sys import os debug = True class FooClass (object): "Foo class" pass def test(): "test function" foo = FooClass() if de

  • Python中Selenium模块的使用详解

    Selenium的介绍.配置和调用 Selenium(浏览器自动化测试框架) 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Firefox,Safari,Google Chrome,Opera等.这个工具的主要功能包括:测试浏览器的兼容性--测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上.测试系统功能--创建回归测试检验软件功能和用户需求.支持自动录制动作和自动生成 .

  • python中xlrd模块的使用详解

    一.xlrd的安装 打开cmd输入pip install xlrd安装完成即可 二.xlrd模块的使用 下面以这个工作簿为例 1.导入模块 import xlrd 2.打开工作薄 # filename是文件的路径名称 workbook = xlrd.open_workbook(filename=r'C:\Users\Windows10\Desktop\xlsx文件.xlsx') 3.获取需要操作的sheet表格(有三种方法) ①通过索引获取 # 获取第一个sheet表格 table = work

随机推荐

其他