commonjs模块化与ES模块化

1.为什么模块化八股文

模块化开发可以带来以下好处:

  • 提高代码的复用性:模块化可以将代码划分成可重用的部分,降低代码的冗余和重复,提高代码的复用性。
  • 简化代码的维护和调试:当一个软件系统变得越来越复杂时,进行模块化开发可以使得每个模块都相对独立,这样就可以方便地维护和调试每个模块,而不必考虑整个系统的复杂性。
  • 提高代码的可读性:模块化可以使得代码更加结构化,清晰明了,从而提高代码的可读性和可维护性。
  • 提高开发效率:模块化开发可以使得团队成员在不同模块上并行开发,从而提高开发效率。
  • 降低项目的风险:模块化开发可以使得开发人员更加关注模块之间的接口和依赖关系,从而降低项目的风险。

2.nodejs中使用commonjs规范来进行模块化

commonjs将各个js文件都视为单独的模块,引用js文件时利用require来导入

如index.js引用a.js, b.js ,c.js

js 复制代码
// a.js 
function test(){     
    console.log('text-aaa') 
} 
console.log('aaaaaa');
module.exports = test
js 复制代码
// b.js 
function test(){     
    console.log('text-bbb') 
} 
module.exports = test
js 复制代码
// c.js 
function test() {   
    console.log("text-ccc"); 
} 
function test2() {   
    console.log("text-ccc2"); 
} 
module.exports = { 
    test, 
    test2 
} 
// 或者 
// exports.test = test; 
// exports.test2 = test2;

在index.js中添加

js 复制代码
// index.js中 
var modulea = require('b.js'); 
var moduleb = require('c.js'); 
var modulec = require('d.js'); 
// 执行
modulea(); 
moduleb(); 
modulec.test(); 
modulec.test2()

执行index.js结果 aaaaaa text-aaa text-bbb text-ccc text-ccc2

这样就完成了对不同js文件模块化的引入,实际上,require的时候,实际上就把引入的文件执行了一遍,如最后打印的aaaaaa, 是a.js中的打印

如果b.js需要引用a.js中方法

则需要在b.js中require a.js 总之,哪里需要别的模块,哪里require导入,如果自己的想让其他模块用,就需要exports导出

2.ES模块化规范

如index.js引用moduleA.js, moduleB.js

js 复制代码
// moduleA.js 
const moduleA = 'moduleAContent'; 
export default moduleA;
js 复制代码
// moduleB.js 
const moduleB1 = 'moduleBContent1'; 
const moduleB2 = 'moduleBContent2'; 
export {moduleB1, moduleB2};
js 复制代码
// index.js 
import moduleA from "./module/moduleA.js"; 
import { moduleB1, moduleB2 } from "./module/moduleB.js"; 
console.log(moduleA); 
console.log(moduleB1); 
console.log(moduleB2);

执行index.js结果 moduleAContent moduleBContent1 moduleBContent2

4.commonjs规范与ES规范切换

5.commonjs规范与ES规范对比

相关推荐
yivifu13 分钟前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡1 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能
IT_陈寒1 小时前
Redis批量删除的大坑,差点让我加班到天亮
前端·人工智能·后端
帆张芳显1 小时前
智表ZCELL产品V3.6 版发布,新增系统预置右键菜单操作、页签栏操作等功能
前端·canva可画·excel插件
漂流瓶jz1 小时前
运行时vs编译时:CSS in JS四种主流方案介绍和对比
前端·javascript·css
Asmewill1 小时前
uv包管理命令
前端
发现一只大呆瓜1 小时前
深入浅出 Tree Shaking:Rollup 是如何“摇”掉死代码的?
前端·性能优化·vite
weixin199701080162 小时前
《转转商品详情页前端性能优化实战》
前端·性能优化
钮钴禄·爱因斯晨2 小时前
他到底喜欢我吗?赛博塔罗Java+前端实现,一键解答!
java·开发语言·前端·javascript·css·html
Watermelo6172 小时前
理解 JavaScript 中的“ / ”:路径、资源与目录、nginx配置、请求、转义的那些事
前端·javascript·vue.js·chrome·nginx·正则表达式·seo