带你读《现代Javascript高级教程》九、前端模块化(1)

简介: 带你读《现代Javascript高级教程》九、前端模块化(1)

九、前端模块化

引言

前端开发中,代码的组织和管理一直是开发者面临的一大挑战。随着Web应用日益复杂,对代码结构和组织的需求也更为明显。这种背景下,模块化编程应运而生,开发者们可以将复杂的代码拆分为可管理和可重用的模块。在本文中,我们将通过实际代码示例,来探索前端模块化的发展历程及各种模块化方案的实现原理。

  1. 前端模块化的发展历程

1 全局函数式编程

在早期的Web开发中,通常使用全局范围内声明函数和变量的方式来组织代码。例如:

 

var module1Data = 'module1 data';function module1Func(){
    console.log(module1Data);}

 

这种方式存在的问题主要有命名冲突、函数间依赖关系不明显、维护困难等。

2 命名空间模式

随着对代码组织方式的需求增加,开发者开始通过定义全局对象,将所有函数和变量封装在这个对象中,也就是命名空间模式。

 

var myApp = {
    module1Data: 'module1 data',
    module1Func: function(){
        console.log(this.module1Data);
    }};

这种方式解决了全局命名冲突的问题,但是模块间的依赖关系依旧不明显,同时所有依赖都需要在命名空间对象中手动管理。

3 CommonJS

CommonJS模块规范是Node.js采用的规范,使用require函数加载模块,通过module.exports导出模块。

 

// a.js
module.exports = 'Hello world';
// b.jsvar a = require('./a');
console.log(a); // 输出 'Hello world'

 

CommonJS使用同步加载方式,适用于服务器端,但由于网络请求的异步特性,不适合在浏览器环境使用。

require函数

require函数的主要任务是根据模块的文件路径读取模块文件,然后执行模块代码,最后返回模块的exports对象。

 

require函数的实现代码大致如下:

 

function require(modulePath){
    // 读取模块代码
    const code = fs.readFileSync(modulePath);
    // 包装模块代码
    const wrapper = Function('exports', 'require', 'module', '__filename', '__dirname', `${code}\n return module.exports;`);
    const exports = {};
    const module = { exports };
    // 执行模块代码
    wrapper(exports, require, module);
    // 返回模块的exports对象
    return module.exports;}

 

其中,wrapper函数的参数exportsmodule就是模块的exportsmodule对象,这样我们就可以在模块中通过exportsmodule.exports来导出模块。

 

require函数在执行模块代码时,会先将模块代码包装到一个函数中,然后调用这个函数。这样做的好处是可以将模块代码隔离到一个函数作用域中,防止模块内的变量污染全局作用域。


带你读《现代Javascript高级教程》九、前端模块化(2)https://developer.aliyun.com/article/1349631?groupCode=tech_library

相关文章
|
12天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
45 0
|
8天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
18 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
12天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
72 1
前端JS发起的请求能暂停吗?
|
5天前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
|
3天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
13 2
|
2天前
|
JSON JavaScript 前端开发
Javascript 模块化编程的方法和代码
Javascript 模块化编程的方法和代码
12 1
|
11天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
21小时前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
5天前
|
前端开发 JavaScript 算法
前端高级技术框架Vue2从入门安装到常见指令
前端高级技术框架Vue2从入门安装到常见指令
7 0
|
5天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。