在模块环境中使用 jQuery
学习在 ES 模块或 CommonJS 环境中导入和使用 jQuery，确保模块化应用中的依赖管理正确无误。
在模块环境中使用 jQuery 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。
JS 模块简介
欢迎学习！在现代 JavaScript 开发中，模块对于组织代码至关重要。它们有助于保持代码整洁并避免冲突。
在模块出现之前，所有脚本都共享全局作用域，容易产生“变量冲突”问题。模块为每个文件提供独立的私有作用域，从而解决了这一问题。
CommonJS：使用 require() 的方式
CommonJS 是一种主要用于 Node.js 环境的模块系统。它规定了如何使用 require() 和 module.exports 导入和导出模块。
处理前端代码时，CommonJS 模块通常会使用 Webpack 或 Browserify 等工具打包在一起，使其能够兼容浏览器。
在 CommonJS 中导入 jQuery
要在 CommonJS 模块中使用 jQuery，您通常需要先通过 npm 安装它，然后使用 require() 函数将其导入文件。
- 安装：
npm install jquery - 导入：
const $ = require('jquery');
这样会将 jQuery 对象赋值给 $ 变量，该变量的作用域仅限于您的模块。
CommonJS 中的 jQuery 示例
下面演示如何在 CommonJS 模块中使用 jQuery。请记住，这段代码通常需要先经过打包工具处理，然后才能在浏览器中运行。
试着运行它，看看输出结果！
const $ = require('jquery');
$(document).ready(function() {
$('body').append('<p>Hello from CommonJS jQuery!</p>');
console.log('CommonJS script executed!');
});ES 模块：使用 import/export 的方式
ES 模块（ECMAScript 模块）是 JavaScript 官方标准化的模块系统。它们使用 import 和 export 关键字。
- 原生支持：现代浏览器和 Node.js 可以直接支持。
- 静态特性：导入内容会在代码执行前解析。
该系统提供了一种更整洁、更高效的依赖管理方式。
在 ES 模块中导入 jQuery
在 ES 模块中使用 jQuery 非常直接。您需要使用 import 语句。
- 安装：
npm install jquery - 导入：
import $ from 'jquery';
要使其正常工作，jQuery 软件包需要将自身公开为 ES 模块。现代版本通常已经支持这一点，也可以由打包工具完成转换。
ES 模块中的 jQuery 示例
本示例演示如何在 ES 模块中导入和使用 jQuery。请注意 import 语法。
运行这段代码，查看结果！
import $ from 'jquery';
$(document).ready(() => {
$('body').append('<p>Hello from ES Modules jQuery!</p>');
console.log('ES Module script executed!');
});全局作用域与模块作用域
将 jQuery 导入模块（CommonJS 或 ES 模块）后，$ 和 jQuery 变量通常会限制在该模块的本地作用域内。
- 这样可以防止 jQuery 污染全局
window对象。 - 这样可以避免与其他同样使用
$的库发生冲突。 - 您的代码会更加可预测，也更加独立。
打包工具：连接模块的纽带
虽然现代浏览器支持 ES 模块，但在集成 jQuery 时，Webpack、Rollup 或 Parcel 等打包工具仍然发挥着关键作用：
- 解析：查找并包含模块的所有依赖项。
- 转译：将 CommonJS 或旧版 JS 转换为 ES 模块，反之亦然。
- 优化：压缩、执行树摇和合并文件，以获得更好的性能。
它们可以让复杂的模块配置在浏览器中顺利运行。
模块导入检查
您已经了解如何在 CommonJS 和 ES 模块环境中导入 jQuery。现在来测试一下您的理解！
回顾：模块中的 jQuery
做得很好！您已经学会如何将 jQuery 集成到现代 JavaScript 模块环境中。
- CommonJS：使用
require()，常见于 Node.js 和经过打包的浏览器应用。 - ES 模块：使用
import，是现代 JS 的原生标准。 - 优势：模块可以防止全局作用域污染，改善代码组织，并明确声明依赖关系。
- 打包工具：Webpack 等工具对于解析和优化基于模块的 jQuery 应用至关重要。
理解这些概念，对于使用 jQuery 构建可扩展且易于维护的前端项目至关重要。
常见问题解答
「在模块环境中使用 jQuery」课时是免费的吗？
是的 — 「在模块环境中使用 jQuery」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。
「在模块环境中使用 jQuery」这节课中我会学到什么？
学习在 ES 模块或 CommonJS 环境中导入和使用 jQuery，确保模块化应用中的依赖管理正确无误。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「在模块环境中使用 jQuery」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 兼容 ES6+ 语法
- 在模块环境中使用 jQuery
- 连接 jQuery 与现代框架