ES6-04-模块化的暴露:export关键字

一、export关键字

在ES6中,模块化的暴露主要通过export关键字来实现。根据暴露方式的不同,可以将其分为以下几种类型:

1-1、分别暴露

每个export都暴露各自的方法或者变量。

javascript 复制代码
// test.js  
export let a = 100;  
export function sayHello() {  
  console.log("Hello, World");  
}

在其他文件中,可以使用解构赋值来引入这些暴露的变量或函数。

1-2、统一暴露

使用一个export暴露所有的方法和变量。

javascript 复制代码
// test.js  
let city = '北京';  
const scorer = function() {  
  console.log("给我打分!");  
}  
export { city, scorer };

引入时,可以直接通过解构赋值来引入所需的变量或函数。

1-3、默认暴露

使用export default来暴露一个默认值。

javascript 复制代码
// test.js  
export default {  
  data: "四月",  
  test: function() {  
    console.log("一个小测试!!!");  
  }  
};

引入时,可以直接使用import关键字,不需要解构赋值。

1-4、ES6模块化暴露的注意事项

  • 导入与导出的变量名匹配 :在引入模块时,导入的变量名必须与导出的变量名相匹配,除非使用了as关键字进行重命名。
  • ES6模块化的兼容性:虽然ES6模块化是标准化的解决方案,但在某些老旧的浏览器或环境中可能不被支持。在这些情况下,可能需要使用构建工具(如Webpack、Rollup等)或转译器(如Babel)来将ES6模块化代码转换为更兼容的格式(如CommonJS)。

二、import 关键字

与暴露方式相对应,ES6也提供了几种引入模块的方式:

2-1、通用引入(整个模块)

使用import * as moduleName from 'modulePath'

javascript 复制代码
// 引入m1.js模块  
import * as _m1 from "js/m1.js";  
_m1.teach();

2-2、解构赋值引入

直接引入模块中暴露的特定变量或函数。

javascript 复制代码
// 引入m1.js模块中的a和teach  
import { a, teach } from "js/m1.js";  
console.log(a); // 输出 100  
teach(); // 输出 "m1--我们可以教给你很多东西!"

2-3、默认引入

使用import defaultName from 'modulePath'

javascript 复制代码
// 引入m3.js模块的默认暴露  
import m3 from "js/m3.js";  
m3.change(); // 输出 "m3---我们可以改变你!!"

2-4、注意事项

  • 命名冲突 :当使用解构赋值引入多个模块时,如果变量名相同,则会产生命名冲突。可以使用as关键字进行重命名。
  • 导入路径 :在import语句中,'modulePath'需要替换为实际的模块文件路径。
  • 模块化兼容性:虽然ES6模块化是标准化的解决方案,但在一些老旧环境或浏览器中可能不被支持。在这些情况下,可以使用构建工具或转译器进行转换。
相关推荐
前端(从入门到入土)2 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗28 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端