js中的import和export

简介: # 引言我们在开发时,如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 `script` 标签中。尽管可以把 JavaScript 拆分为多个文件,但是所有的变量和函数仍然会被添加到全局作用域中。由此我们需要使用第三方代码来完成常见任务,并且需要把代码分解为模块化的文件,避免污染全局命名空间。ECMAScript 2015 规范在 JavaScript 语言中引入了 *module*,也有了 import 和 export 语句。`import`和`eport`声明共同作用

引言

我们在开发时,如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 script 标签中。尽管可以把 JavaScript 拆分为多个文件,但是所有的变量和函数仍然会被添加到全局作用域中。

由此我们需要使用第三方代码来完成常见任务,并且需要把代码分解为模块化的文件,避免污染全局命名空间。

ECMAScript 2015 规范在 JavaScript 语言中引入了 module,也有了 import 和 export 语句。

importeport声明共同作用于让一个JavaScript模块中定义的值可以在另一个模块中使用。一个模块就是一个JavaScript代码文件,有自己的全局作用域,完全与其他模块无关,如果要在一个模块中使用另一个模块中定义的值(如函数或类),唯一的方式就是在定义值的模块中使用export导出值,在使用值的模块中使用import导入值。

import指令用于从另一个JavaScript代码文件中导入一个或多个值,并在当前模块中为这些值指定名字。import指令有几种不同的形式。看看下面的几个例子:

import Circle from './xxx.js';
import { fun_1 , fun_2 } from './yy.js';

JavaScript中的模块中的值是私有的值。除非被显示导出,否则其他模块都无法导入。export的指令就是为此而生的,他声明把当前模块中定义的一个或多个值或者是对象导出,因而其他模块可以导入并使用这些值。export指令想比import指令有更多的变体,看下面的例子:

const PI = Math.PI;
const TAU = 2 * PI;
export { PI , TAU };

export官架子有时候也用作其他声明的标识符,从而构成一种复合式声明,在定义常量,变量,函数或是类的同时又导出它们。如果一个模块只导出一个值,通常会使用特殊的exportdefault的形式:

export const TAU = 2 * Math.PI;
export function mag(x,y); {
    return 123456;
}
export default class Circle {
    ...
}
相关文章
|
6月前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
183 1
|
6月前
|
JavaScript 前端开发
JS中 require 与 import 的区别
JS中 require 与 import 的区别
|
3月前
|
JSON JavaScript 前端开发
javascript import maps 特性现已被全部主流浏览器支持
javascript import maps 特性现已被全部主流浏览器支持
|
4月前
|
JavaScript
js export 对外输出常量、变量和函数
js export 对外输出常量、变量和函数
87 5
|
JavaScript
js文件中的require以及import 等语句中的{ }的作用
js文件中的require以及import 等语句中的{ }的作用
|
JavaScript 前端开发 编译器
JS ES6中export和import史上最全
JS ES6中export和import史上最全
|
Web App开发 JSON JavaScript
前端技术ES6新特性解构字符串扩展表达式箭头函数对象拓展运算符map 和 reduce Promise 模块化export import及Node.js
ECMAScript 6.0(以下简称 ES6,ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了,并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是 ECMAScript6。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
84 0
|
JSON JavaScript 前端开发
Node冷门知识点—— node.js支持import语法
Node冷门知识点—— node.js支持import语法
943 0
|
JavaScript
js:动态import导入script脚本文件
js:动态import导入script脚本文件
287 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2