一、import与export的用法

1、import的几种用法

import defautName from 'modules.js';
import { export } from 'modules.js';
import { export as ex1 } from 'modules.js';
import { export1, export2 } from 'modules.js';
import { export1 as ex1, export2 as ex2 } from 'modules.js';
import defautName,{export} from 'modules.js';
import * as moduleName from 'modules.js';
import defautName, * as moduleName from 'modules.js';
import 'modules';

 解释说明:

import 后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。

如果只是模块名,不带有路径,那么必须有配置文件,告诉Javascript引擎模块的位置。

上面的as关键字,相当于import进来的值的别名。

import * from 'xx' 将导入整个模块的内容,而import defaultName 和 import { export1,export2 } 将导入export的某个值或对象。

最后一张方式import ‘module’ 将运行模块中的全局代码,而不导入任何值。

2、export的几种用法

export { name1, name2,..., nameN };
export { variable1 as name1, variable2 as name2,..., nameN };
export let name1, name2,..., nameN;
export let let name1 =..., name2 =...,..., nameN;
export function FunctionName() { };
export class ClassName { }
export default expression;
export default function () { };
export default function name() { };
export { name1 as default };
export * from ...;
export { name1, name2 } from ...;

  解释说明

module.js

const ex1 = 'xxx';
const fun = function () { };
export { ex1, fun as demofun };
export let ex2 = 'demo';
export function multi(x, y) {
return x * y;
}

  

对应的import 写法:import { ex1, demoFun, ex2, multiply } from 'module.js';

默认导出,export 命名导出需要export 名字和import名字严格一致。而export default命令,为模块指定默认输出,在import 的时候可以随意命名名字。一个模块只能有一个默认输出,也就是说 export default 一个模块只能用一次。 用法:

export default function add(x, y) { return x + y };
import anyName from 'a.js';
let name = 'b.js';
export default name;
import anyName from 'b.js';
export default class { }
import anyClass from 'c.js';
export default 1;
import value from 'd.js';

  

二、区别:

import 和js的发展历史息息相关,历史上 js没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');ES6 在语言标准的层面上,实现了模块功能。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

转发链接

Javascript在使用import 与export 区别及使用的更多相关文章

  1. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  2. 转:彻底搞清楚javascript中的require、import和export

    原文地址:彻底搞清楚javascript中的require.import和export   为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...

  3. module.exports,exports,export和export default,import与require区别与联系【原创】

    还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...

  4. export,import ,export default区别

    export,import ,export default区别 一.export,import ,export default ES6模块主要有两个功能:export和import export用于对 ...

  5. [ES6]import 与export的用法 ,export 与export default 的 区别 以及用法

    一.import 与export export(导出):用于对外输出本模块(一个文件可以理解为一个模块)变量的接口: import(导入):用于在一个模块中加载另一个含有export接口的模块. 1. ...

  6. module.exports,exports,export和export default,import与require区别与联系

    还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...

  7. export,import ,export default的区别

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...

  8. javascript中的require、import和export模块文件

    CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...

  9. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

随机推荐

  1. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

  2. 使用NPOI完成导出Excel文件

    参考网址:http://blog.csdn.net/tiemufeng1122/article/details/6732588 能够实现  点击按钮弹出下载框    的功能,如图: HTML代码: & ...

  3. Maven学习小结(三 基本概念)

    1.Maven POM POM(Project Object Model)项目对象模型,是用Maven来管理项目里的一个叫做pom.xml的文件.所有的项目配置信息都被定义在这个文件中, 通过这个文件 ...

  4. CCTF-PWN1&&PWN3

    CCTF-PWN1&&PWN3 PWN1比较有意思,在得到输入的数据后使用shutdown将标准输入,标准输出和标准错误关闭了读写功能的读.也就是不能进行交互了,要保证一次输入就能拿到 ...

  5. SOA架构有基本的要求

    SOA在相对较粗的粒度上对应用服务或业务模块进行封装与重用: 服务间保持松散耦合,基于开放的标准, 服务的接口描述与具体实现无关: 灵活的架构 -服务的实现细节,服务的位置乃至服务请求的底层协议都应该 ...

  6. Python 实现单例模式的一些思考

    一.问题:Python中如何实现单例模式 单例模式指一个类只能实例化一个对象. 二.解决方案: 所有资料参考于: http://python.jobbole.com/87294/ https://ww ...

  7. pythonのdjango Session体验

    Session Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认)缓存文件缓存+数据库加密cookie1.数据库Session Django默认支 ...

  8. Spring Boot SSL

    转载  https://howtodoinjava.com/spring-boot/spring-boot-ssl-https-example/ Spring Boot SSL 学习如何将Web应用程 ...

  9. $Django 路飞学城项目简介

    - 基于极验实现动态验证码 - 在线视频播放:cc,HTML用的Flash - 基于Rest Framework实现 API接口 - 自定义rest认证token 认证 - 序列化以及自定义验证对请求 ...

  10. Codeforces 777C - Alyona and Spreadsheet - [DP]

    题目链接:http://codeforces.com/problemset/problem/777/C 题意: 给定 $n \times m$ 的一个数字表格,给定 $k$ 次查询,要你回答是否存在某 ...