带你读《现代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

相关文章
|
3天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
17 0
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
58 1
前端JS发起的请求能暂停吗?
|
4天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
8 3
|
6天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
11天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
14天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
17天前
|
JavaScript
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
|
20天前
|
JavaScript 前端开发
JS模块化系统
这篇内容讲述了JavaScript模块系统的四种规范:CommonJS(CJS),Asynchronous Module Definition(AMD),Universal Module Definition(UMD)和ES Modules(ESM)。CJS主要用于服务器端,同步加载模块;AMD用于浏览器,异步加载,适合Web应用;UMD是通用格式,兼容多种环境;ESM是ECMAScript官方标准,支持异步加载,更可靠且可预测。选择哪种规范取决于项目需求和目标平台。
|
20天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
29 1

热门文章

最新文章