What does export mean in javascript

In JavaScript, export means "export"; all declarations within a module in JavaScript are local. The module can be exported using the export keyword. This command can appear anywhere in the module to export the module. Then other JS files can load the module through the import command.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What does export mean in javascript

By default, all declarations in JavaScript modules are local and cannot be made externally access. If you need to expose some of the declared content in the module and let other modules use it, you need to export the function. The simplest way is to add the export keyword to export the module.

The content that can be exported includes classes, functions, and variables modified by var, let, and const. The export command can appear anywhere in the module, as long as it is at the top level of the module. If it is in block-level scope, an error will be reported, as will the import command.

After using the export command to define the external interface of the module, other JS files can load this module through the import command.

The import command has a lifting effect and will be promoted to the head of the entire module and executed first. Since import is executed statically, expressions and variables cannot be used. These are syntax structures whose results can only be obtained at runtime.

1. Default import and export default import/export

Each module has only one default export, and the export content can be a function, class, object, etc. Because this method is regarded as the main export content, the import method is the simplest.

// there is no semi-colon here
export default function() {} 
export default class {}
//示例
class A extends Component{
   ...
}
export default A;
//对应的import示例。
import A from './requireTest'
//default export, 输入 lodash 模块
import _ from 'lodash';
//一条import语句中，同时输入默认方法和其他变量
import _, { each } from 'lodash';
//上述代码对应的export语句
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };

Note: A module is only allowed to export one default object. What is actually exported is a variable named default for renaming. The equivalent statement is as follows. Therefore, any variable name can be used after import, and {} is not required.

import any from './requireTest'
import {default as any } from './requireTest'

2. Named import and export

It should be noted that the export command specifies the external interface and must establish a one-to-one correspondence with the variables inside the module. . In addition, the interface output by the export statement has a dynamic binding relationship with its corresponding value, that is, through this interface, the real-time value inside the module can be obtained.

The import command accepts a pair of curly brackets, which specifies the variable name to be imported from other modules. The variable name inside the curly brackets must be the same as the name of the external interface of the imported module (profile.js). If you want to rename the input variable, use the as keyword in the import command to rename the input variable.

The "from" after import specifies the location of the module file, which can be a relative path or an absolute path. The .js path can be omitted. If it is just the module name without a path, then there must be a configuration file to tell the JavaScript engine the location of the module.

// profile.js
//第一种export
export var firstName = 'Michael';
export function f() {};
//第二种export，优先使用这种写法
var firstName = 'Michael';
export {firstName}；
function f() {}
export {f};
//main.js
import { firstName, f } from './profile';
import { firstName as surname } from './profile';

3. Rename import and export

export { myFunction }; // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant

When importing the export content of different modules, the uniqueness of the naming must be maintained. This can be solved by renaming, including the following two categories.

//导出的时候重命名
function v1() { ... }
function v2() { ... }
export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion  //可以用两个不同的名称导出相同的值
};
//导入的时候重命名
// 这两个模块都会导出以`flip`命名的东西。同时导入两者，需要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

4. Compound writing method of export and import

If in a module, input first and then output the same module, the import statement can be written with the export statement. Together.

export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

【Related recommendations: javascript learning tutorial】

The above is the detailed content of What does export mean in javascript. For more information, please follow other related articles on the PHP Chinese website!