[js] 模块化开发 IIFE AMD CMD ES6 ES2020 发布新的标准

最新推荐文章于 2024-06-02 11:09:45 发布
最新推荐文章于 2024-06-02 11:09:45 发布
阅读量192 收藏
点赞数
分类专栏： # js # ES6 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/120959366
版权
js 同时被 2 个专栏收录
158 篇文章 2 订阅
订阅专栏
ES6
17 篇文章 1 订阅
订阅专栏

文章目录

  • 什么是模块化开发
    => 多个 js 文件之间的相互配合来实现效果
    => 一个 js 文件里面只封装一类内容

问题: 由多个 js 文件出现的

  1. js 文件引入顺序
  2. js 文件之间的相互依赖不清晰
  3. js 文件内部的变量会污染全局

没有模块化的时候

  • 按照顺序引入文件
  • 把整合的文件放在最后面
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<h1>没有模块化</h1>

<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>

在这里插入图片描述

问题:

  1. 没有办法维护
    • 我们一般把整合的 js 文件起名叫做 main.js
    • 你并不知道依赖了哪一个文件
  2. 全局变量污染
    • 我每定义一个变量都得注意不能重复定义
  3. 依赖关系不清
    • 我现在只能知道 c.js 里面用到了 a.js 和 b.js 文件
    • b.js 里面有没有依赖到 a.js 里面的内容我也不清楚

IIFE 标准

  • Immediately Invoked Function Expression 立即调用函数表达式
  • 所有的内容放在一个自执行函数(function(){})()里面
    • 但是外界不能使用
    • 我可以把我想向外暴露的内容直接暴露出来

解决问题:

  1. 依赖不清
    • 直接在自执行函数的参数位置, 能看到依赖了哪些模块
  2. 变量全局污染
    • 你后面的代码该用什么变量用什么变量

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<h1>IIFE 模块化标准</h1>

<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>

在这里插入图片描述

CommonJS 模块化标准

  • 2009 年, nodejs 出现了
  • 使用了 JS 去做服务端语言
  • 伴生的是 CommonJS 模块化标准
  • 缺点: 只能在后端 JS 里面用

AMD 模块化标准 - Async Module Definition - !依赖前置!

  • 异步模块
  • 2011 年出现的, 社区里面发起的
  • 因为非官方, 所以没有关键字, 大家书写了一套叫做 require.js 的第三方文件
  • 来实现 模块化标准
  • 把每一个 js 文件独立出来了
    -> 使用了导入导出的语法来实现模块化
    -> 在 JS 文件里面引入另一个 JS 文件
  • 定义模块
    => 通过调用 define 的方法
    1. 独立模块定义
      -> 每一个模块文件开始执行 define()
      -> 我不依赖其他文件, 就是一个单纯的模块
      -> 向外暴露的内容, 就直接 return 出去
    2. 依赖其他模块的模块
      -> 我也是一个模块文件, 但我依赖了其他模块的内容
      -> 使用 define() 定义
      -> 语法: define([依赖文件1, 依赖文件2, …], function(模块A, 模块B, …){})
    3. 导入 其他模块
      -> 我是一个模块整合文件
      -> 我就直接使用 a.js 文件里面的方法
      -> 使用 require() 方法导入
      -> 语法: require([依赖文件1, 依赖文件2, …], function(模块1, 模块2){})

解决问题:

  1. 依赖很清晰
    • 因为只有一个文件, 那么所有的东西都在一个文件里面出现
  2. 变量全局污染
    • 都在私有作用域, 没有全局污染

在这里插入图片描述

独立模块定义
-> 每一个模块文件开始执行 define()
-> 我不依赖其他文件, 就是一个单纯的模块
-> 向外暴露的内容, 就直接 return 出去

在这里插入图片描述

依赖其他模块的模块
-> 我也是一个模块文件, 但我依赖了其他模块的内容
-> 使用 define() 定义
-> 语法: define([依赖文件1, 依赖文件2, …], function(模块A, 模块B, …)\

在这里插入图片描述

导入 其他模块
-> 我是一个模块整合文件
-> 我就直接使用 a.js 文件里面的方法
-> 使用 require() 方法导入
-> 语法: require([依赖文件1, 依赖文件2, …], function(模块1, 模块2){})

<script src="../modules/require.js"></script>

<body>
    
    <h1>AMD 模块化标准 - 依赖前置</h1>
    <h2>页面必须引入一个叫做 require.js 的第三方文件</h2>

    <!-- 页面只需要引入最后的整合文件即可-->

     <script src="./c.js"></script>
     
</body>

过程如果出现了has been blocked by CORS policy问题

has been blocked by CORS policy问题解决方法
在这里插入图片描述
问题:

  1. 依赖前置
    • 不管多少行以后使用的东西, 都会在打开页面的时候就加载进来, 第一个不加载完成, 后面的用不了
    • 缺点: 首屏加载时间长
    • 优点: 后期操作流畅

CMD - Common Module Definition - 通用模块定义 - !即时依赖!

  • 2011 左右, 在社区里面出现的一个标准
  • 淘宝 “玉伯”, 开发了 CMD 的模块化标准
  • 依赖于一个叫做 sea.js 的文件来实现的模块化标准
  • 使用: 文件需要引入一个 sea.js 第三方文件

    1. 独立模块定义
      -> define(function(require, exports, module){})
      -> require() 用来导入其他文件
      -> module 是为了本文件导出内容的
      -> exports 是 module.exports 的别名
      -> var exports = module.exports

    2. 依赖其他模块的模块
      -> 你需要依赖其他文件模块
      -> 在 define(function(require, exports, module){
      在你需要的位置使用 require() 方法来导入
      var modA = require(‘地址’)
      })

    3. 资源整合
      -> 使用 seajs.use()
      -> 语法: seajs.use([‘你要依赖的模块’], function(模块A){})

解决问题

  1. 依赖前置
    • 按需加载
    • 也留下了依赖前置的接口

在这里插入图片描述

独立模块定义
-> define(function(require, exports, module){})
-> require() 用来导入其他文件
-> module 是为了本文件导出内容的
-> exports 是 module.exports 的别名
-> var exports = module.exports

在这里插入图片描述

依赖其他模块的模块
-> 你需要依赖其他文件模块
-> 在 define(function(require, exports, module){
在你需要的位置使用 require() 方法来导入
var modA = require(‘地址’)
})

在这里插入图片描述

资源整合
-> 使用 seajs.use()
-> 语法: seajs.use([‘你要依赖的模块’], function(模块A){})

<script src="../modules/sea.js"></script>

    
<h1>CMD 模块化标准 - 即时依赖</h1>
<h2>需要在页面引入一个叫做 sea.js 的文件</h2>

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

在这里插入图片描述
问题

  1. 即时依赖
    • 首屏加载快
    • 操作不够流畅

ES6 Module

  • 2015 年发布, ES6 语法里面自带了一个模块化标准
  • 各大浏览器厂商不买账
  • 2016 年开始, Vue 出现了, 出现了一个脚手架(他搭好了开发的框架)
    => 搭建这个架子的时候, 内置了 ES6 模块化标准
  • 2018 年, 各大浏览器厂商开始原生支持 ES6 模块化标准
  • 2018 年中, Chrome 率先原生支持 ES6 模块化
  • 语法: 变成了 JS 的语法, 和关键字, 不需要任何第三方文件的引入
  • 特点: 页面必须在服务器上打开
    => live server 插件
    => 如果你想使用模块化语法, script 标签要加一个属性 type = ‘module’
  • 使用:
    1. 每一个文件都可以作为独立模块, 也都可以作为整合文件
    2. 导出语法
      2-1. export default{ 导出的内容 }
      2-2. export var num = 200
    3. 导入语法
      3-1. 接收 export default 导出
      • import 变量 from ‘哪一个 JS 文件’
        3-2. 接收 export 导出的内容
      • import {接受变量} from ‘哪一个 JS 文件’

解决问题

  1. 变成关键字, 不需要依赖第三方文件
  2. 每一个文件都可以变成模块文件, 也可以是整合文件

在这里插入图片描述

export default{ 导出的内容 }

在这里插入图片描述

export var num = 200

在这里插入图片描述

接收 export default 导出
+ import 变量 from ‘哪一个 JS 文件’

接收 export 导出的内容
+ import {接受变量} from ‘哪一个 JS 文件’

<h1>ES6 模块化标准</h1>
<h2>必须要在服务器上打开</h2>
<h2>script 标签要有 type ="module"</h2>

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

在这里插入图片描述
问题:

  1. 浏览器支持不好
    • 必须要在服务器上打开
    • 一旦项目上线, 肯定是在服务器打开
  2. 依赖前置

ES2020 发布新的标准

=> ES2020 发布新的标准
=> 多了一个 按需加载 的模块化
=> 语法: import(你要加载的文件).then(function(res){})
=> 可以和 ES6 标准混合使用

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述




参考：
JS-part15.1-模块化开发

533_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES Module原理详解
goodloving的博客
05-15 4993
ES Module执行分为两个阶段：构造阶段、实例化阶段、求值阶段···
ES Module 认识
小菜的OnePiece的博客
10-29 1061
ES Modules 使用静态模块定义，这意味着模块的结构在代码解析阶段就可以确定，不需要运行时的加载和解析过程。这有助于提高性能和可预测性。
2024-05-18 前端模块化开发——ESModule模块化
最新发布
qq_41068717的博客
06-02 708
注意，export后面跟的{}不是一个对象，只是一种特定的语法。 说明： 3.2、导出方式二——通过as起别名 3.3、导出方式三——定义的时候就直接导出 4、import关键字 4.1、导入方式一——直接导入 4.2、导入方式二——通过as起别名 一般在导入的时候起别名，而不是在导出的时候 4.3、导入方式三——可以给整个模块起别名 5、export和import结合使用 这是一种开发思想。工具类库： 工具类统一导出出口（export和import结合使用）： 使用工具类中的方法： 6、def
ES Module使用详解
goodloving的博客
05-16 2543
历史上，JavaScript 一直没有模块（module）体系，**无法将一个大程序拆分成互相依赖的小文件**，再用简单的方法拼装起来。其他语言都有这项功能，比Python 的`import`，甚至就连 CSS 都有`@import`，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
再苦再累也必须要弄懂的：ES6的ES Module
lazy_tomato的博客
09-03 3021
总结一下学到的知识。ES Module 是 ES6提供的模块化标准；默a认开启严格模式；
【JavaScript】ESModule（esm）
Superman_H的博客
09-06 1554
# ESModule - ESModule (esm) 是 ES6 的模块化方案，使用 **`import`** & **`export`** 进行导入导出 - **Node** 及**浏览器**均支持 esm - 在 .html 文件中应用模块化，需要给 script 标签设置 `type="module"` - Node 默认支持 cjs 模块化规范。若想 Node 支持 esm，需要： ① 确保 Node 版本 >= 14.15.1 ② 在 package.json 的根节
javascript 构建模块化开发过程解析
12-09
JavaScript 模块化开发是现代前端开发中的重要组成部分，它帮助开发者组织代码，提高代码的可维护性和复用性。在 JavaScript 中，我们通常使用不同的库或框架来实现模块化，如 Sea.js、Require.js 和 Angular。这些...
使用ES6新特性开发微信小程序（9）
03-29
不需要将"use strict"放在脚本文件的第一行，微信小程序开发工具开启ES6转换功能的情况下，默认启用javasctipt严格模式（Strict Mode）。 用块级作用域代替IIFES IIFE（立即执行函数表达式）的通常用途是创造一个...
详解Js中的模块化是如何实现的
11-28
两者各有优缺点，但ES6模块化是现代JavaScript的标准。 5. **模块化实践** 在实践中，我们不仅需要了解模块化的基本原理，还要掌握各种模块化工具，如Babel（用于转换ES6模块语法）、Rollup或Webpack（用于打包...
rollup-plugin-iife:将ES模块转换为IIFE
05-10
该插件可以将ES模块的输出转换为IIFE。 安装 npm install -D rollup-plugin-iife 用法 import iife from "rollup-plugin-iife" ; export default { input : [ "entry.js" , "entry2.js" ] , output : { dir : ...
js文件 ES6转换为ES5
03-14
JavaScript是Web开发中不可或缺的一部分，随着版本的更新，ES6（ECMAScript 2015）引入了许多新的特性和语法糖，提升了代码的可读性和简洁性。然而，考虑到浏览器兼容性和旧版本的JavaScript引擎，有时我们需要将ES6...
es-iife:将ES模块转换为简单的IIFE
05-10
埃西耶夫 将ES模块转换为简单的IIFE。 特征 import语句解析为全局变量。 export语句作为全局变量导出。 在test/cases文件夹下还有更多示例。 用法 const { parse } = require ( "acorn" ) ; const { transform } = require ( "es-iife" ) ; const code = ` import foo from "./foo.js"; const main = (value) => return foo(value); export default main; ` ; const result = transform ( { code , parse , name : "doFoo" , resolveGlobal : ( name ) => { if ( name =
前端工程化之：ES Module
m0_60189088的博客
01-19 895
ES Module分为两种导出方式： 具名导出（普通导出）：可以导出多个 默认导出：只能导出一个 一个模块可以同时存在两种导出方式，最终会合并为一个对象导出。
ES module学习
qq_44331582的博客
07-06 119
3.网页中可以直接引入文件’app.js’,而 es module和commonjs不能以字母开头，否则会认为是第三方内容，形式应该是’./app.js’等相对路径或者绝对路径及完整url。2.引入某个文件下的index.js文件不能只引入到文件夹，如’./utils’,而应该为’./utils/index.js’1.export { 内容 }和import { 内容 }只是个导出格式，并不是导出个对象。Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。2.导出的是成员的引用。
[前端面试] CommonJs与ES Module的区别、Tree Shaking
iChangebaobao的博客
04-15 948
ES6 module 特点：只能作为模块顶层的语句出现import 的模块名只能是字符串常量import binding 是 immutable的ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。下面引入的style.css模块，如果也使用Tree shaking，由于css文件没有导出任何模块，那么就有可能在打包的时候该引入模块就被摇晃掉了，导致bug。CommonJs 导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染。
【es6入门】总结ES Module模块化的写法，顺便介绍node的CommonJS规范
庞囧的博客
05-03 743
符号绑定/引用传递是官方的新语法标准支持node和浏览器环境（node更常用的是CommonJS规范）支持异步动态按需导入。
JavaScript模块化-ES Module
m0_71485750的博客
07-16 1034
JavaScript没有模块化一直是它的痛点font>，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ECMA推出自己的模块化系统时，大家也是非常兴奋。ES Module和CommonJS的模块化有一些不同之处：ES Module模块采用export和import关键字来实现模块化：了解：采用ES Module将自动采用严格模式：use strict注意: 如果直接在浏览器中运行代码，会报错, 这个报错在MDN上面有给出解释：我这里使用的VSCode插件：Live Serve
ES Modules【浏览器端的模块开发规范】
weixin_37883657的博客
12-03 1036
一、ES Modules 特性 特性1：EMS 自动采用严格模式，忽略 ‘use strict’ <script type="module"> console.log(this) </script> 特性2：每个 ES module 都是运行在单独的私有作用域中 <script type="module"> var foo = 100 console.log(foo) //100 </script> ...
Commonjs 和 Es Module详解
weixin_66128399的博客
02-19 2326
今天我们来深度分析一下Commonjs和Es Module，希望通过本文的学习，能够让大家彻底明白Commonjs和Es Module原理，能够一次性搞定面试中遇到的大部分有关Commonjs和Es Module的问题。1 Commonjs 和 Es Module 有什么区别？2 Commonjs 如何解决的循环引用问题？3 既然有了exports，为何又出了?既生瑜，何生亮？4require模块查找机制？5 Es Module 如何解决循环引用问题？6这种写法为何无效？7 关于。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值