ES6新特性19-模块化

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量184 收藏 1
点赞数
分类专栏： ES6笔记 文章标签： javascript 前端 node.js 模块化 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1066223647/article/details/124949729
版权

ES6新特性19-模块化

文章目录

一、模块化的介绍、优势、产品

模块化的优势有以下几点：

  1. 防止命名冲突
  2. 代码复用
  3. 高维护性

ES6之前的模块化规范有

  1. CommonJS => NodeJS、 Browserify
  2. AMD => requireJS
  3. CMD => seaJS

二、浏览器使用ES6模块化引入模块

2.1 分别暴露

//分别暴露
export let school = '尚硅谷';

export function teach() {
    console.log("我们可以教给你开发技能");
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";

    </script>

</body>
</html>

2.2 统一暴露

//统一暴露
let school = '尚硅谷';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}

//
export {school, findJob};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";

    </script>

</body>
</html>

2.3 默认暴露

//默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        // import * as m3 from "./src/js/m3.js";


    </script>
</body>
</html>

三、ES6引入模块语法汇总

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        // import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
        // import {school, teach} from "./src/js/m1.js";
        //school和上面的重名，使用as取一个别名避免该问题
        // import {school as guigu, findJob} from "./src/js/m2.js";
        //必须起一个别名，不能使用default
        // import {default as m3} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        // import m3 from "./src/js/m3.js";
        // console.log(m3);
    </script>

    <script src="./src/js/app.js" type="module"></script>
</body>
</html>

四、浏览器使用ES6模块化方式二

//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

// console.log(m1);
// console.log(m2);
// console.log(m3);

// m1.teach();
// m2.findJob();
// m3.default.change();



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        // import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
        // import {school, teach} from "./src/js/m1.js";
        // import {school as guigu, findJob} from "./src/js/m2.js";
        // import {default as m3} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        // import m3 from "./src/js/m3.js";
        // console.log(m3);
    </script>

    <script src="./src/js/app.js" type="module"></script>
</body>
</html>

五、使用babel对ES6模块化代码进行转换

<!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>
    <!-- 
        1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
        2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
        3. 打包 npx browserify dist/js/app.js -o dist/bundle.js
     -->
     <script src="dist/bundle.js"></script>
</body>
</html>

六、ES6模块化引入NPM包

//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

// console.log(m1);
// console.log(m2);
// console.log(m3);

// m1.teach();
// m2.findJob();
// m3.default.change();

//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');
3 from "./m3.js";

// console.log(m1);
// console.log(m2);
// console.log(m3);

// m1.teach();
// m2.findJob();
// m3.default.change();

//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');
MarxistVive
关注
专栏目录
ES6新增的模块化
m0_59345890的博客
07-12 592
在引入模块化之前，引入外部js文件通过通过这个方法导入的js文件，js文件中声明的全局变量 就会污染当前html文件的全局。在ES6时，引入了模块化来解决这个缺陷，每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。模块化的特点：​​​​​​​1、避免了变量的全局污染;2、ES6 的模块自动开启严格模式，不管有没有在模块头部加上 'use strict';3、模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，......
ES6模块化开发
Lorena_的博客
02-23 787
一、ES模块化的基本介绍 1、 ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 2、 ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。 3、ES6模块的使用： 使用export规定模块的对外接口，使用import用于输入其他模块提供
ES6新特性 模块
wuyujin1997的博客
04-14 248
ES6模块 intro 在ES6之前，实现模块化使用的是RequireJS或seaJS(分别是基于AMD规范的模块化库，和基于CMD规范的模块化库) 见后“JS的模块化书写规范”。 ES6中引入了模块化，其设计思想是 在编译时就能确定模块的依赖关系及输出和输入的变量。 ES6的模块化分为导入和导出(export import)。 ES6模块 details 自动开启严格模式。 模块中可以导入|...
es6新特性之模块化开发
Sumshine12.5
03-27 1559
以往我们是直接引入一些外部的js文件，有多少引多少，这样会造成一个js文件夹很多js文件，而且要一个一个的引入，影响浏览速度 在es6中支持了模块化开发，即你只需要引入一个入口的js文件，并不需要输入script标签引入 这一点有点像python 但是现在的浏览器是不支持es6的模块化的，我们能需要通过webpack这个工具进行打包已实现模块化开发 模块化基本语法 导出 export name导...
ES6 模块
glenshappy的专栏
08-13 399
概述 在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。 ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6 的模块化分为导出（export） @与导入（import）两个模块。 特点 ES6 的模块自动开启严格模式，不管你有没有在模块头部加上use strict;。 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。 ..
ES6-ES10--学习笔记
qq_45728623的博客
08-06 510
一、概述 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 2、什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言； 百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978 3、什么是
ES6-ES11新特性（这一篇就够了）
m0_61490399的博客
06-29 3650
ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展ECMAScript 是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为 LiveScript，最后重命名为 JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公
JavaScript 笔记1 ES6 新特性 | 解构赋值、模板字符串、Symbol数据类型、Promise、模块化
希望每天都能进步一点点
08-16 504
本篇文章记录了 JavaScript 遵循的 ECMA规范系列中版本变化最大的 ES6 ，通过这些内容可以更好的理解JS的高阶用法，同时进一步熟悉JavaScript 的解构赋值、模板字符串、Symbol数据类型、Promise、模块化等内容，ES6是2015年提出的规范，而最新的规范已达到了 ES12，每年都会更新一次，现在暂时学习 ES6，就可以满足大部分的开发需求。.........
es6新特性
du_ai_me的博客
07-06 740
es6-es11新特性
ES6-11一些新特性
WANG944282的博客
05-12 223
ECMAScript6 从ES6开始，每年发布一个版本，版本号比年份最后一位大1。ES6就是ES2015 1.let：声明变量 变量不能重复声明（var可以重复声明） 块级作用域，变量只在{}代码块里面有效。（全局作用域、函数作用域、块级作用域eval） 不存在变量提升（在声明前使用报错，var有变量提升） 虽然是块级作用域，但是不影响作用域链 //遍历并绑定事件 for(let i = 0;i<items.length;i++){ items[i].onclick = function(){
es6新增哪些特性
jiangshen_a的博客
09-01 1万+
es6新增哪些特性？
ES6新特性：模块化（import 和 export）
流楚丶格念的博客
02-21 1940
文章目录说明 说明 模块化就是把代码进行拆分，方便重复利用。 类似java中的导包：要使用一个包，必须先导包。 而JS中没有包的概念，换来的是模块。 模块功能主要由两个命令构成： export 和 import 。 export 命令用于规定模块的对外接口， import 命令用于导入其他模块提供的功能。 比如我定义一个js文件:Util.js，里面有一个Util类 ,使用export将其暴露出去 class Util { static sum = (a, b) => a + b; } //导出
ES6 Class Module模块化 案例
rth362147773的博客
08-14 3222
前言这篇通过简单说明ES6 Class和Module这个两个成员。并且用这两个成员制造模块化。Class说明Class（类）作用对象模块，也就是一个方法集合，像以前的prototype父类一样，也一样可以通过new来实例，用法基本一样。所以只是换种方法写继承而已。我个人觉得Class加入使代码更加直观，更容易理解。案例Class简单一个new实例：ES5var name = "tom"; var a
ES6常用新特性总结
热门推荐
TsingM
02-10 3万+
let && constlet命令也用于声明对象，但是作用域为局部。{ let a = 10; var b = 1; }在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适合使用let。const用于声明一个常量，设定后值不会再改变。const PI = 3.1415; PI // 3.1415 PI = 3;强行对其进行重新赋值会报错。解构赋值ES6 允许按照一定模式，
ES6新特性-模块化（import/export）
weixin_46115791的博客
08-20 620
ES6新特性的学习一.模块化的概念二.导入（import）三.导出（export）四.默认导出（export default） 一.模块化的概念 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。 在es5中，用module.exports和exports导出模块，用req
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 775
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 879
请联系我获取更详细的演示视频。
React入门 9：React Router
pingguocu3的博客
10-13 589
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
深入理解ECMAScript 6：全面剖析ES6新特性
19. **Module的语法**：模块系统使得JavaScript支持模块化，通过import和export关键字进行导入和导出。 20. **Module的加载实现**：讨论了模块加载的实现原理和不同加载策略。 此外，书中还涵盖了编程风格、如何读...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MarxistVive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值