一篇理解前端模块化:AMD、CMD、CommonJS、ES6

发布于 2021-8-9 16:52
浏览
0收藏

一、前端模块介绍


01. 模块化简介

 

模块化就是把单独的一个功能封装到一个模块中。


模块之间相互隔离,可以通过指定的接口公开内部成员,也可以依赖别的模块。


02. 传统开发模式的主要问题


问题1:命名冲突


如果存在重名的变量或者方法,会相互覆盖。

 

问题2:文件依赖

 

js无法直接实现相互引用。


二、模块化的相关规范


01. 浏览器端模块化规范

 

1. AMD:

AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义"。

引用的是requirejs


2. CMD

引用的是seajs, 更多参考(https://seajs.github.io/seajs/docs/)

因为这两个模块都过时了,详细知识自行google吧。


02. 服务器端模块化规范

 

1. CommonJS

 

 

commonjs是同步的方式加载模块,


模块成员导出使用module.exports 或者 exports。

模块成员导入使用require('data'); 

 

在nodejs中加载模块就是的commonJS

 


举例:

在m.js中导出:

let name = 'lisi';
let sayHello = () => {
   console.log('hello');
}
module.exports.man = man;
module.exports.sayHello = sayHello;

 

在index.js导入中:

let person = require('./m.js');
console,log(person)

 

03. es6模块化规范 

 

1.  ES6 模块化规范,是浏览器端与服务器端通用的模块化开发规范

 

AMD 和 CMD 只适用于浏览器端的 Javascript 模块化,CommonJS 只适用于服务器端的 Javascript 模块化。这些模块化都有一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。

 


 ES6 模块化规范解决了上述问题,是浏览器端与服务器端通用的模块化开发规范。

 


04. ES6模块化规范中导入和导出

 

每个 js 文件都是一个独立的模块

 


语法:

导入模块成员使用:import 关键字

暴露模块成员使用 :export 关键字

 

三、通过 babel 体验 ES6 模块化

 

01. 环境搭建

 

步骤1: 下载babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

步骤2: 在项目根目录创建文件 babel.config.js

步骤3: babel.config.js 文件内容填写配置信息代码

const presets = [
 ["@babel/env", {
 targets: {
 edge: "17",
 firefox: "60",
 chrome: "67",
 safari: "11.1"
 }
 }]
 ];
 module.exports = { presets };

 步骤4: 通过 npx babel-node index.js 执行代码

 


02. es6模块的导入和导出

 

1. 默认导出与导入export default

 

语法:

默认导出:export default

默认导入:import 接收名称 from '模块标识符'

举例:

 


新建m.js文件,写入如下代码,把变量和方法导出

let a = 10;
let b = 20;
function fn(){}
export default{
    a,
    b,
    fn
}

新建index.js,用import导入m.js中的代码

import m from './m.js'
console.log(m)

 

执行:

npx babel-node index.js

 

结果:一篇理解前端模块化:AMD、CMD、CommonJS、ES6-开源基础软件社区

 

注意:每个模块中,只允许使用一次 export default。

 

2. 按需导入和按需导出

 

语法:

按需导出:export let s1 = 10

按需导入:import { s1 } from '模块标识符'

举例:

 


在m.js中:

export  let s1 = 10;

在index.js中:

import { s1 }  from './m.js'
console.log(s1)

执行:

npx babel-node index.js

结果:

 

 

一篇理解前端模块化:AMD、CMD、CommonJS、ES6-开源基础软件社区

3. 直接导入并执行模块代码

 

 

举例:

 


在m.js中:

for(var i = 0;i<3;i++){
    console.log(i)
}

 

在index.js中

import './m.js'

 

执行:

npx babel-node index.js

 

结果:

 

一篇理解前端模块化:AMD、CMD、CommonJS、ES6-开源基础软件社区

 

所以:模块化的好处,方便了代码重用和维护,提升了开发效率。

已于2021-8-9 16:52:11修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐