前端工程化发展历程

文章目录

- 前端工程化发展历程
一、原始时期
二、立即执行函数（IIFE）
三、CommonJs、AMD、CMD、UMD、ESM
- 1.CommonJs
- 2.AMD
- 3.CMD
- 4.UMD
- 5.ESM

一、原始时期

没有模块化时期存在声明变量易引起污染；使用对象形势保存变量，又容易被重新命名书写等等问题。

二、立即执行函数（IIFE）

能够保护对象的私有属性。

三、CommonJs、AMD、CMD、UMD、ESM

1.CommonJs

相关：

npm包文件内cjs文件夹，就是基于CommonJs打包后的代码。

优点：

每个文件都是一个独立模块，解决了变量的污染。
通过module.exports和require，实现模块间相互依赖。

缺点：

针对于服务器，浏览器端不支持。
运行时加载，不可以进行treeShaking。
同步加载，多模块加载速度慢。

使用：

a.js 导出

module.exports = {a: function(p){console.log(p);}
}

b.js 引用

const a = require('./a.js');
a.a('msg');//msg

2.AMD

相关：

AMD - (Asynchronous Module Definition) - 异步模块定义。

优点：

针对于浏览器端。
异步加载。

缺点：

不能实现按需加载。
需要单独引用require.js。

使用：

a.js 导出

define(function(){return {sum(a,b){return a+b;}}
})

b.js 引用并导出

define(['a.js'],function(a){const result = a.sun(1,1);return {result}
})

main.js 连接html文件

require(['a','b'],function(a,b){console.log(a,b);//a -> function ,b -> {result: 2};
})

index.html + 引用require.js

<head><meta charset="UTF-8"><title>Document</title><script src="./require.js" data-main="main.js"></script><!--  data-main属性必须，值引入main.js,可以是其他名 -->
</head>

3.CMD

相关：

CMD推崇就近依赖，只有在用到某个模块的时候再去require。

优点：

针对于浏览器端。
可以实现按需加载。

缺点：

使用：

a.js 引入导出

define(function(require, exports, module) {var b = require('./b.js');var a = b.sum(1,1);module.exports = a;
});

b.js 导出

define(function(require, exports, module) {var b = {sum(a,b){return a + b;}}module.exports = b;
});

index.html + 引用sea.js

<head><meta charset="UTF-8"><title>Document</title><script src="./sea.js"></script><!--  data-main属性必须，值引入main.js,可以是其他名 -->
</head>
<body><script>//按需加载，用到的时候才调用useseajs.use(['./a.js','./b.js'],function(a,b){console.log(a,b);})</script>
</body>

4.UMD

相关：

umd不能算是一种模块规范，因为它没有模块定义和调用，他结合AMD和CommonJS规范，保证模块可以被amd和commonjs调用。
npm包文件内umd文件夹，就是结合了2种规范打包后的代码。

5.ESM

相关：

ESM（ECMA Script Modules。

优点：

针对于浏览器。
静态编译，值得引用。
可以进行tree-shaking。

缺点：

服务器端不支持。
对浏览器有要求。

使用：

a.js 导出

export const a = 10;
export default {sum(a,b){return a+b}
}

b.js 引用

import { a } from './a.js'
import Afun from './a.js';
console.log(Afun.sum(a,1));
export default {}

index.html 引用

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

前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）相关推荐

commonjs是什么_JavaScript模块化标准CommonJS/AMD/CMD/UMD/ES6Module的区别
JS-模块化进程随着js技术的不断发展,途中会遇到各种问题,比如模块化. 那什么是模块化呢,他们的目的是什么? 定义:如何把一段代码封装成一个有用的单元,以及如何注册此模块的能力.输出的值依赖引用: ...
模块格式：CommonJS AMD CMD UMD ES6
皆为前端工程化中定义模块(module)的规则,如:模块标识,模块依赖,模块实现,模块对外接口,模块加载: 实现时有:异步,同步,依赖前置,依赖就近,预执行,懒执行,软依赖,硬依赖,模块对象支持类型等 ...
关于 CommonJS AMD CMD UMD 规范的差异总结
根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var ...
CommonJS/AMD/CMD/UMD
为什么会有这几种模式? 起源:Javascript模块化模块化就是把复杂问题分解成不同模块,这样可维护性高,从而达到高复用,低耦合. 1.Commonjs CommonJS是服务器端模块的规范,No ...
CommonJS,AMD,CMD,ES6,require 和 import 详解
CommonJS,AMD,CMD,ES6 commonJS用同步的方式加载模块.在服务端,模块文件都存在本地磁盘,读取非常快,所以这样做不会有问题.但是在浏览器端,限于网络原因,更合理的方案是使用异步 ...
JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）
前言前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了, jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得 ...
关于JavaScript的模块（CommonJS, AMD, CMD, ES6模块）的理解
Javascript模块化就是解决将代码进行分隔,作用域隔离,模块之间的依赖管理等多个方面问题. 这样的优点不言而喻:1.可维护性2.命名空间私有化,可以避免污染全局环境3.代码重用,通过模块可以方便 ...
前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS
我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...
WEB前端模块化基础知识
前段模块化基础概念前端模块化其实就是将一个完整的单一的功能整合起来形成单独的一个功能组件,当需要用的的时候只需要加载这个组件,然后便可以通过该组件唯一的名称去使用其中的内容. 主流模块化框架 co ...
前端模块化详解（CommonJS、AMD、CMD、ES Module）
大家好,我是一碗周,一个不想被喝(内卷)的前端.如果写的文章有幸可以得到你的青睐,万分有幸~ 写在前面随着前端项目的不断复杂,代码日益膨胀,项目的维护难度随之越来越大,此时模块化也就相继的出现了,本 ...

前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）

前端工程化发展历程

文章目录

一、原始时期

二、立即执行函数（IIFE）

三、CommonJs、AMD、CMD、UMD、ESM

1.CommonJs

2.AMD

3.CMD

4.UMD

5.ESM

前端模块化发展（CommonJs、AMD、CMD、UMD、ESM）相关推荐

最新文章

热门文章