一起来学javascript-export和import

最新推荐文章于 2024-09-16 08:47:17 发布

小胡想找到工作

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量220

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_74762754/article/details/139655759

版权

export.js中

// 关键字 export 可以将一个模块中的方法、变量和其他功能从模块中输出，允许其他需要的模块按指定的标准进行访问，
// 没有使用关键字 export 输出的模块内容，是封闭的，其它模块无法访问到它，下面介绍关键字 export 几种输出的方式 。
// 简单的来说，如果想多次使用一个变量，可以将它写在js文件中，然后通过export导出，其他文件就可以通过import导入。
let name = '张三';
let age = 18;
export {name , age};
// 关键字 export 除能输出模块中的变量外，还可以输出模块中的方法，两者的输出格式都是相同的，如下代码：
function say() {
  console.log("我");
}
function act() {
  console.log("我是");
}
function log() {
  console.log("说点什么。。。");
}
export { say, act,log as write };
//log as write  添加了关键字 as ，它的作用是给输出的功能取一个别名
// 简单的来说，如果想多次使用一个变量，可以将它写在js文件中，然后通过export导出，其他文件就可以通过import导入。
// 或者为了方便自己的代码管理也可以这样

import.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script type="module">// type 属性值设置为 module ，表示代码中允许使用模块输入和输出的关键字，进行模块化代码开发。
//    与关键字 export 相对应，import 的功能是输入已经使用关键字 export 输出的内容，它们是对应关系， export 负责输出，
//    而 import 则用于接受输出的内容，即负责输入，
// 关键字 import 在输入模块中加载输出模块的变量时，可以使用大括号包裹全部变量名，各个变量之间使用逗号分割，再通过 from 指定输出模块的路径，这个路径可以是绝对的，也可以是相对的，代码格式如下：
// import { 变量1，变量2，变量3，...} from 输出模块位置
// 在上述格式代码中，大括号中的变量 1，变量 2 也可以通过关键字 as 取一个别名，格式如下：
// import { 变量1 as a1，变量2 as fn，变量3，...} from 输出模块位置
// 取了别名之后，在输入模块中，只能使用这个别名，而不能再使用原先的名称，否则，将会出现变量未定义的错误信息。

// 在下面引入上面创建的export.js,和import.html在一个文件夹下
   import {name,age}from './export.js'
    console.log(name,age)
</script>