ES6规范import和export用法总结

简介: JavaScript模块规范在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript6之前还不支持原生的模块化;Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。

JavaScript模块规范
在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript6之前还不支持原生的模块化;Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。通行的JavaScript模块规范主要有两种:CommonJS、AMD


CommonJS规范是服务器端Javascript模块规范(同步)
Node.js的模块系统,就是参照CommonJS规范实现的。NPM也遵循了commonJS定义的包规范,从而形成了一套完整的生态系统


AMD意思是"异步模块定义",是前端模块规范
RequireJS就是实现了AMD规范的

CommonJS module以服务器端为第一的原则发展,选择同步加载模块。它的模块是无需包装的,但它仅支持对象类型(objects)模块
AMD以浏览器为第一的原则发展,选择异步加载模块。它的模块支持对象、函数、构造器、字符串、JSON等各种类型的模块,因此在浏览器中它非常灵活

ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案,最主要的是
commonjs 服务器 同步加载 如nodejs
AMD 浏览器 异步加载 如requirejs

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单
完全可以取代现有规范,成为浏览器和服务器通用的模块解决方案

运行时加载
CommonJS模块是对象,实质是整体加载模块(即加载fs的所有方法),生成一个对象,然后再从这个对象上面读取其中3个方法这种加载称为“运行时加载”,因为只有运行时才能得到这个对象

编译时加载
ES6模块不是对象,是通过export命令显式指定输出的代码,再通过import命令输入
的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即ES6可以在编译时确定模块的依赖关系,以及输入和输出的变量,效率更高

ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)
// a.js
var sex="boy";
var echo=function(value){
  console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
1.export {sex,echo}

  1. [不用] export default命令,为模块指定默认输出 其实只是输出一个叫做default的变量
    (1)[只能默认输出单个,不能是对象]
    var abc=function(){}

        export default abc
    

import xx from './a.js'
xx()

(2)如果想在一条import语句中,同时输入默认方法和其他接口

      var abc=function(){}
      var cba=function(){}

var bac=function(){}

          export default abc
          export {cba}

import xx,{cba,bac} from './a.js'
xx() cba() bac()

// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy
1.import命令接受一对大括号,里面指定要从其他模块导入的变量名
大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同
import {sex,echo} from "./a.js"

2.除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面
import * as xx from './circle';
console.log('圆面积:' + xx.area(4));

以上是export与import的基本用法,再进行拓展学习
前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符
使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名

//a.js
var sex="boy";
export default sex(sex不能加大括号)
//一个文件内最多只能有一个export default
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值

// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy

import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:
babel只是个翻译,假设a.js 里 import 了 b.js, 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里包含 a.js,b.js 的代码,那就需要用到打包工具

所以我在这里讲解一下如何使用webpack工具将带有import和export语法的JS文件, 通过打包工具生成所有浏览器都支持的单个JS文件

目录
相关文章
|
9天前
export 与 import | ES6
export 与 import | ES6
16 0
export 与 import | ES6
|
9天前
|
JavaScript 前端开发
|
9天前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
25 0
|
9天前
|
前端开发
ES6 如何动态加载 import
ES6 如何动态加载 import
33 1
|
8月前
|
JavaScript 前端开发 编译器
JS ES6中export和import史上最全
JS ES6中export和import史上最全
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
|
JavaScript
export ,export default 和 import 区别 以及用法
export ,export default 和 import 区别 以及用法
|
JavaScript 前端开发 开发者
ES6模块化与导出(export)导入(import)的用法
1.ES6模块化的介绍 在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准,例如: ⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化 ⚫ CommonJS 适用于服务器端的 Javascript 模块化 太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
ES6模块化与导出(export)导入(import)的用法
|
Python
Python编程:importlib.import_module动态导入模块
Python编程:importlib.import_module动态导入模块
322 0
|
存储 Java Unix
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点
在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入想一想:为什么必须加上模块名调用呢?因为可能存在这样一种情况:在多个模块中含有相同名称的函数,此时如果只是通过函数名来调用,解释器无法知道到底要调用哪个函数。所以如果像上述这样引入模块的时候,调用函数必须加上模块名通过这种方式引入的时候,调用函数时只能给出函数名,不能给出模块名,但是当两个模块中含有相同名称函数的时候,后面一次引入会覆盖前一次引入。也就是说假如模块A中有函数fun
158 1
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点