ES6模块化(默认导入导出、按需导入导出、直接导入)

这篇具有很好参考价值的文章主要介绍了ES6模块化(默认导入导出、按需导入导出、直接导入)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍ES6模块化

    ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。

 二、ES6 模块化规范中定义:

1.每个 js 文件都是一个独立的模块
2.导入其它模块成员使用 import 关键字
3.向外共享模块成员使用 export 关键字

三、默认导入导出

默认导出语法:export   default  默认导出的成员

ES6模块化(默认导入导出、按需导入导出、直接导入)  

默认导入语法:import 接收名  from  ‘模块的路径’

ES6模块化(默认导入导出、按需导入导出、直接导入)

ES6模块化(默认导入导出、按需导入导出、直接导入)

注意:

每个模块中,只能有一次的 export default,不然就会报错。

导入的语法的接收名自己取合法合理就行。

四、按需导入导出 

按需导出语法:  export   需要按需导出的成员 

ES6模块化(默认导入导出、按需导入导出、直接导入)

按需导入语法:

基础语法:import   {按需导入的名称}  from ‘模块的路径’

导入多个:import   {按需导入的名称1,按需导入的名称2.....}  from  '模块路径'

起别名:import {按需导入的名称  as  自己起个别名}  from  ‘模块路径’

批量导入:import * as  起的别名  from ‘模块路径'

ES6模块化(默认导入导出、按需导入导出、直接导入)

 

 ES6模块化(默认导入导出、按需导入导出、直接导入)

 ES6模块化(默认导入导出、按需导入导出、直接导入)

 

 注意: 

1.每个模块可以多次按需导出

2.按需导出没有default

3.按需导入的成员名必须与按需导出的名称保持一致

4.当不同的组件导出的模块名相同,我们想在同一个文件中导入可以给其中一个起别名来进行区分和避免冲突   使用 as 关键字进行起别名(import   导出的名  from  起的别名  ”路径“)

5.使用批量导出 一定要as起别名 否则没法用

 总结:

1.按需导入导出可以一起使用

2.当文件中只导出一个成员的时候 通常使用默认导出(不强迫)

3.当文件中只导出多个成员的时候 通常使用按需导出(不强迫)

五、直接导入

不需要谁去用,直接就像执行某模块中的代码可以直接导入

import ”路径“

注意:没有名字,没有form 导入直接调用了

 

ES6模块化(默认导入导出、按需导入导出、直接导入) 文章来源地址https://www.toymoban.com/news/detail-493452.html

到了这里,关于ES6模块化(默认导入导出、按需导入导出、直接导入)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端技术栈 - ES6 - Promise -模块化编程

    ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准, 2015年6月发布. ES6设计目标: 达到JavaScript语言可以用来编写复杂的大型程序, 成为企业级开发语言. ECMAScript和JavaScript的关系就: ECMAScript是JavaScript的规范/规则, JavaScript是ECMAScript的一种实现. let.html +与,的区别 let_detail.html 细节1. l

    2024年02月11日
    浏览(298)
  • ES6之Promise、Class类与模块化(Modules)

    Promise 是 ES6 引入的一种用于 处理异步操作 的对象。 它解决了传统回调函数(callback)模式中容易出现的 回调地狱 和代码可读性差的问题。 Promise 对象有三种状态: Pending (进行中): 初始化状态,表示异步操作还在进行中。 Fulfilled (已成功): 表示异步操作执行成功,并

    2024年02月10日
    浏览(47)
  • JS模块化,ESM模块规范的 导入、导出、引用、调用详解

    在之前的 JS模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM 文章中,介绍了关于JS模块化的各种规范的区别和简单使用。 由于ESM模块规范也是 ECMAScript2015(ES6)中的规范标准,在日常的Web项目开发、小程序开发、APP开发等都是很常用的,所以本文重点将 ESM模块规范中的 导出、导

    2024年02月05日
    浏览(39)
  • Node.js - fs模块、path模块、http模块、Node.js模块化(ECMAScript标准的导出和导入)、包、npm包的管理和安装依赖、nodemon

    什么是 Node.js,有什么用,为何能独立执行 JS 代码,演示安装和执行 JS 文件内代码? Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来 编写服务器后端的应用程序 在** 传统Web开发中,浏览器就是JavaScript的运行时环境 **, 因为它提供了

    2024年02月02日
    浏览(61)
  • 【前端模块化】JS模块化思想以及相关规范(CommonJS、ES module)

    1.模块化概念 随着前端应用日趋复杂,项目代码也大量膨胀,模块化就是一种最主流的代码组织方式, 一个模块就是一个实现特定功能的文件 ,它通过把我们的复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式,去提高我们的开发效率,降低维护成本。要用

    2024年02月01日
    浏览(63)
  • Node.js开发、CommondJS 、ES-Module模块化设计

    目录  Node.js是什么 基础使用 Node的REPL 全局变量  模块化设计 CommondJS规范  基础使用exports和module.exports require  CommondJS优缺点 AMD和CMD规范 ES_Module  基本使用方法 导出 导入  结合使用 默认导出 ES Module解析流程  Node与浏览器的对比  在浏览器中,HTML与CSS交给Blink处理,如果其

    2023年04月21日
    浏览(44)
  • TS编译器选项——指定编译ES版本和模块化使用规范

    compilerOptions是TS的编译器选项,主要在tsconfig.json文件中用于对ts编译为js文件时进行配置 \\\"compilerOptions\\\" : { 配置项 } 版本可以为如下版本:\\\'es3\\\', \\\'es5\\\', \\\'es6\\\', \\\'es2015\\\', \\\'es2016\\\', \\\'es2017\\\', \\\'es2018\\\', \\\'es2019\\\', \\\'es2020\\\', \\\'es2021\\\', \\\'es2022\\\', \\\'esnext\\\'. 版本可以为如下版本:\\\'none\\\', \\\'commonjs\\\', \\\'amd\\\', \\\'system\\\', \\\'u

    2024年02月04日
    浏览(54)
  • 什么是模块化?为什么要进行模块化开发?

    模块化是一种软件开发的设计模式,它将一个大型的软件系统划分成多个独立的模块,每个模块都有自己的功能和接口,并且能够与其他模块独立地工作。  先来一段八股文 模块化开发可以带来以下好处: 提高代码的复用性:模块化可以将代码划分成可重用的部分,降低代

    2023年04月12日
    浏览(59)
  • 23年,我又学习了一次amd模块化,模块化思想

    src/view1/index.html src/view1/main.js plugins/module.js 源码链接: https://gitee.com/littleboyck/front/tree/master/front-module 联系方式:QQ: 1187253007

    2024年02月07日
    浏览(58)
  • JavaScript模块化

    JavaScript模块化,让我们通过一个实际的例子来更好地理解。 假设我们正在开发一个简单的购物车应用,需要实现计算商品总价和展示购物车列表的功能。我们可以将这个应用划分为两个模块:`cart.js`和`main.js`。 1. cart.js模块: ```javascript // cart.js // 定义一个私有变量,用于存

    2024年02月14日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包