JavaScript 学习-47.export 和 import 的使用

上海-悠悠

发布于 2022-09-28 16:42:49

5830

发布于 2022-09-28 16:42:49

前言

JavaScript 的每个.js文件都是独立的，在开发一个项目会有很多的.js文件，有些是公共的方法，可以单独放到一个.js文件中，其它的文件去调用公共方法。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持类（class），所以也就没有”模块”（module）了。

export导出模块

在es6以前，还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种：CommonJS 和 AMD ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。

这里主要介绍ES6 里面的export 和import 使用。 export 语句用于创建 JavaScript 模块以从模块中导出函数、对象或原始值，以便其他程序可以通过该 import 语句使用它们。导出的模块取决于您是否声明它们。导出语句不能用于嵌入式脚本。

// 导出单个
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

export导出示例

// export features declared earlier
export { myFunction, myVariable }; 

// export individual features (can export var, let,
// const, function, class)
export let myVariable = Math.sqrt(2);
export myFunction() { ... };

import 导入

import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。 import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

import 示例

import { cube, foo, graph } from 'my-module.js';

graph.options = {
    color:'blue',
    thickness:'3px'
};

graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

使用示例

目录结构

└─src
    └─js
      └─ext.js
      └─main.js 

└─index.html

在ext.js 文件写一些公共方法

export const m = (function(){

    return {
        hello: function(){
            return 'hello ,,,,'
        },
        world: function(){
            return 'world !!!!!!!!'
        }

    }

})()

在main.js 文件中导入并调用方法

import {m} from './ext.js'
console.log(m.hello())

index.html只需导入main.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script src="./src/js/main.js"></script>

</body>
</html>

打开浏览器会出现Uncaught SyntaxError: Cannot use import statement outside a module

当js文件作为模块导入的时候，需在script标签声明type="module"类型

 <script type="module" src="./src/js/main.js"></script>

虽然只导入了一个main.js，加载的时候还是会加载到ext.js 文件

JavaScript合集

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

ecmascript

本文分享自从零开始学自动化测试微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

javascript

ecmascript

登录后参与评论

0 条评论

热度