尧图网站建设 
文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文基于千古前端图文教程本仓库中的《JavaScript模块化AMD》一文系统讲解浏览器端异步模块化方案AMDAsynchronous Module Definition规范的核心语法、RequireJS 加载器的安装与配置以及一个完整的自定义模块实战项目dataService → alerter → main 三级依赖。读完本文你将理解 AMD依赖前置、异步加载的设计理念掌握define定义模块、require引入模块、requirejs.config配置路径映射的完整用法并能独立搭建基于 RequireJS 的模块化前端工程。文中结合本仓库中 CommonJS 模块化规范、CMD 规范 与 ES6 模块化 等姊妹文档帮你横向对比各主流模块化方案。AMD 的基本语法AMD 的概念AMDAsynchronous Module Definition异步模块定义。AMD 专门用于浏览器端模块的加载是异步的。AMD 规范是RequireJS在推广过程中对模块化定义的规范化产出。RequireJS 就是一个基于 AMD 规范实现的模块化开发解决方案模块加载器。为什么要异步加载因为在浏览器端JavaScript 文件依赖网络下载如果采用同步阻塞的方式加载脚本页面渲染会被卡住严重影响用户体验。AMD 通过异步加载 依赖前置的方式让模块在后台并行加载加载完成后再执行依赖模块的回调逻辑。补充背景模块化开发最早起源于 Node.js服务端CommonJS 规范而如何把模块化思维应用到前端浏览器端就产生了两个代表性的加载器RequireJSAMD和 SeaJSCMD。这一点在仓库的 04-Node.js模块化规范CommonJS 中有明确说明。暴露模块的方式定义没有依赖的模块参数只有一个 functiondefine(function () { return 模块 })定义有依赖的模块参数有两个模块名数组、function//定义有依赖的模块第一个参数为数组 define([module1, module2], function (m1, m2) { return 模块 })代码解释第一个参数必须是数组里面存放的是需要依赖的其他模块模块名/模块标识。第二个参数是 function里面带了形参 m1 和 m2分别代表了 module1 和 module2。这个形参的作用是前面依赖的模块一旦声明了就可以一一对应地注入到 function 中去从而在 function 内部使用依赖的模块。这种方式称之为显式声明依赖注入。这里体现的正是 AMD 的两大特性依赖前置模块所依赖的其他模块必须在define的第一个数组参数中全部提前声明提前执行所有依赖模块加载并执行完毕后才会执行当前模块的回调函数。仓库中的 04-Node.js模块化规范CommonJS 把这一特性概括为把所有的包都 require 成功再继续执行代码。引入模块的方式在主模块中引入其他的模块//在主模块中引入其他的模块 require([module1, module2], function (m1, m2) { 使用m1 / m2 })require([module1, module2], callback)与define的写法结构一致第一个参数是依赖模块的数组第二个参数是依赖加载完成后执行的回调函数回调函数的形参与数组中的模块一一对应。这种统一的 API 设计正是 AMD 规范依赖前置、显式声明思想的体现。RequireJS是 AMD 的实现RequireJS 是目前最流行、也最成熟的 AMD 规范实现之一它同时提供了两个能力一个 JavaScript 模块加载器可以在浏览器中异步加载模块一个优化工具r.js可用来合并、压缩模块文件。本仓库的 04-静态资源优化 在JavaScript 模块化加载方案和选型一节中也明确将 AMD 规范与 RequireJS 对应起来RequireJS 模块化加载器是基于 AMD API 实现的。RequireJS 的使用举例自定义模块下面通过一个完整的实战项目演示如何用 RequireJS 组织模块化的前端代码。整个示例的结构与代码完整继承了原文档的示例工程你可以照着逐步操作。1、创建项目结构在工程文件中新建如下目录js | libs | modules | alerter.js | dataService.js | main.js index.html2、下载 require.js并导入到 RequireJS 官网的下载页面获取require.js文件官网提供压缩版与未压缩版开发调试阶段建议使用未压缩版方便阅读源码然后将require.js文件拷贝到项目的js/libs/目录中。这样的话就导入成功了。3、自定义模块1dataService.js —— 定义没有依赖的模块//定义没有依赖的模块 define(function () { let name 我是 dataService.js中的内容; function getName() { return name; } //暴露模块 return { getName }; });这个模块没有依赖任何其他模块因此在define中只传入了一个 function。模块内部先定义私有变量name和私有函数getName最后通过return { getName }把接口暴露出去。这也是 AMD 模块与 CommonJS 模块的一个显著差异AMD 使用return来暴露模块内容而 CommonJS 使用module.exports/exports对象。2alerter.js —— 定义有依赖的模块//定义有依赖的模块 define([myDataService], function (dataService) { let msg 我是 aleter.js中的内容; function showMsg() { console.log(dataService.getName()); //调用了 myDataService 模块中的内容 console.log(msg); } //暴露模块 return { showMsg }; });这个模块依赖了myDataService这个模块模块名是我自己起的即模块标识。注意这里出现的myDataService只是一个逻辑上的模块名它和物理文件dataService.js之间并不自动对应需要我们稍后在main.js中做映射将myDataService这个名字和dataService.js文件关联起来。这正是 AMD显式声明依赖注入的落地先声明依赖名再由加载器根据映射去解析并注入真实的模块实例。3main.js —— 主模块requirejs.config({ //baseUrl: js/, //基本路径 paths: { //配置路径 myDataService: ./modules/dataService, myAlerter: ./modules/alerter } }); requirejs([myAlerter], function (alerter) { alerter.showMsg(); })();这个模块依赖了myAlerter这个模块模块名是我自己起的。并且我们在文件的上方做了映射将myAlerter这个名字和alerter.js文件关联了起来。整个示例的依赖链条是文件3依赖了文件2文件2依赖了文件1。RequireJS 会按照这条依赖链自动按需加载、异步并行地拉取所有模块文件再按依赖顺序执行。我们来讲一下最上方的几行代码即requirejs.config里的内容的意思paths里做的就是映射将键myDataService和文件dataService.js进行关联将键myAlerter和文件alerter.js进行关联。paths中的路径值可以省略.js后缀RequireJS 会自动补全。另外再讲一下注释里的baseUrl的用法如果没有这行配置那么paths里的路径是从当前这个文件main.js的角度出发的即相对路径如果加了一行baseUrl表明它是paths里所有路径的最开头的部分baseUrl的路径是从项目的根目录的角度出发的。例如配置baseUrl: js/后paths中的myDataService: modules/dataService最终会解析为js/modules/dataService。合理使用baseUrl可以让路径配置与页面/入口文件的位置解耦便于工程目录结构调整。4index.html —— 入口文件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleDocument/title /head body !-- 先通过 src 引入 require.js 文件然后通过>赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐JavaScript 原型链图文详解构造函数、五条原型规则与 instanceof 实战千古前端图文教程JavaScript 原型链图文详解构造函数、五条原型规则与 instanceof 实战千古前端图文教程 导读 本文源自《千古前端图文教程》 READM文档教程前端千古前端图文教程JavaScript 基本数据类型 Undefined 与 Null 详解千古前端图文教程JavaScript 基本数据类型 Undefined 与 Null 详解 导读 本文是「千古前端图文教程」JavaScript 基础系列中关文档教程前端千古前端图文教程BOM 简介与 navigator.userAgent / History / Location 实战详解千古前端图文教程BOM 简介与 navigator.userAgent / History / Location 实战详解 导读 本文是「千古前端图文教程」中文档教程前端上一篇SeaTunnel Web 可视化数据集成界面把同步任务跑起来并盯住它下一篇NVIDIA Profile Inspector解锁NVIDIA显卡隐藏性能的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 千古前端图文教程：JavaScript 模块化之 AMD 规范与 RequireJS 实战详解
文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文基于千古前端图文教程本仓库中的《JavaScript模块化AMD》一文系统讲解浏览器端异步模块化方案AMDAsynchronous Module Definition规范的核心语法、RequireJS 加载器的安装与配置以及一个完整的自定义模块实战项目dataService → alerter → main 三级依赖。读完本文你将理解 AMD依赖前置、异步加载的设计理念掌握define定义模块、require引入模块、requirejs.config配置路径映射的完整用法并能独立搭建基于 RequireJS 的模块化前端工程。文中结合本仓库中 CommonJS 模块化规范、CMD 规范 与 ES6 模块化 等姊妹文档帮你横向对比各主流模块化方案。AMD 的基本语法AMD 的概念AMDAsynchronous Module Definition异步模块定义。AMD 专门用于浏览器端模块的加载是异步的。AMD 规范是RequireJS在推广过程中对模块化定义的规范化产出。RequireJS 就是一个基于 AMD 规范实现的模块化开发解决方案模块加载器。为什么要异步加载因为在浏览器端JavaScript 文件依赖网络下载如果采用同步阻塞的方式加载脚本页面渲染会被卡住严重影响用户体验。AMD 通过异步加载 依赖前置的方式让模块在后台并行加载加载完成后再执行依赖模块的回调逻辑。补充背景模块化开发最早起源于 Node.js服务端CommonJS 规范而如何把模块化思维应用到前端浏览器端就产生了两个代表性的加载器RequireJSAMD和 SeaJSCMD。这一点在仓库的 04-Node.js模块化规范CommonJS 中有明确说明。暴露模块的方式定义没有依赖的模块参数只有一个 functiondefine(function () { return 模块 })定义有依赖的模块参数有两个模块名数组、function//定义有依赖的模块第一个参数为数组 define([module1, module2], function (m1, m2) { return 模块 })代码解释第一个参数必须是数组里面存放的是需要依赖的其他模块模块名/模块标识。第二个参数是 function里面带了形参 m1 和 m2分别代表了 module1 和 module2。这个形参的作用是前面依赖的模块一旦声明了就可以一一对应地注入到 function 中去从而在 function 内部使用依赖的模块。这种方式称之为显式声明依赖注入。这里体现的正是 AMD 的两大特性依赖前置模块所依赖的其他模块必须在define的第一个数组参数中全部提前声明提前执行所有依赖模块加载并执行完毕后才会执行当前模块的回调函数。仓库中的 04-Node.js模块化规范CommonJS 把这一特性概括为把所有的包都 require 成功再继续执行代码。引入模块的方式在主模块中引入其他的模块//在主模块中引入其他的模块 require([module1, module2], function (m1, m2) { 使用m1 / m2 })require([module1, module2], callback)与define的写法结构一致第一个参数是依赖模块的数组第二个参数是依赖加载完成后执行的回调函数回调函数的形参与数组中的模块一一对应。这种统一的 API 设计正是 AMD 规范依赖前置、显式声明思想的体现。RequireJS是 AMD 的实现RequireJS 是目前最流行、也最成熟的 AMD 规范实现之一它同时提供了两个能力一个 JavaScript 模块加载器可以在浏览器中异步加载模块一个优化工具r.js可用来合并、压缩模块文件。本仓库的 04-静态资源优化 在JavaScript 模块化加载方案和选型一节中也明确将 AMD 规范与 RequireJS 对应起来RequireJS 模块化加载器是基于 AMD API 实现的。RequireJS 的使用举例自定义模块下面通过一个完整的实战项目演示如何用 RequireJS 组织模块化的前端代码。整个示例的结构与代码完整继承了原文档的示例工程你可以照着逐步操作。1、创建项目结构在工程文件中新建如下目录js | libs | modules | alerter.js | dataService.js | main.js index.html2、下载 require.js并导入到 RequireJS 官网的下载页面获取require.js文件官网提供压缩版与未压缩版开发调试阶段建议使用未压缩版方便阅读源码然后将require.js文件拷贝到项目的js/libs/目录中。这样的话就导入成功了。3、自定义模块1dataService.js —— 定义没有依赖的模块//定义没有依赖的模块 define(function () { let name 我是 dataService.js中的内容; function getName() { return name; } //暴露模块 return { getName }; });这个模块没有依赖任何其他模块因此在define中只传入了一个 function。模块内部先定义私有变量name和私有函数getName最后通过return { getName }把接口暴露出去。这也是 AMD 模块与 CommonJS 模块的一个显著差异AMD 使用return来暴露模块内容而 CommonJS 使用module.exports/exports对象。2alerter.js —— 定义有依赖的模块//定义有依赖的模块 define([myDataService], function (dataService) { let msg 我是 aleter.js中的内容; function showMsg() { console.log(dataService.getName()); //调用了 myDataService 模块中的内容 console.log(msg); } //暴露模块 return { showMsg }; });这个模块依赖了myDataService这个模块模块名是我自己起的即模块标识。注意这里出现的myDataService只是一个逻辑上的模块名它和物理文件dataService.js之间并不自动对应需要我们稍后在main.js中做映射将myDataService这个名字和dataService.js文件关联起来。这正是 AMD显式声明依赖注入的落地先声明依赖名再由加载器根据映射去解析并注入真实的模块实例。3main.js —— 主模块requirejs.config({ //baseUrl: js/, //基本路径 paths: { //配置路径 myDataService: ./modules/dataService, myAlerter: ./modules/alerter } }); requirejs([myAlerter], function (alerter) { alerter.showMsg(); })();这个模块依赖了myAlerter这个模块模块名是我自己起的。并且我们在文件的上方做了映射将myAlerter这个名字和alerter.js文件关联了起来。整个示例的依赖链条是文件3依赖了文件2文件2依赖了文件1。RequireJS 会按照这条依赖链自动按需加载、异步并行地拉取所有模块文件再按依赖顺序执行。我们来讲一下最上方的几行代码即requirejs.config里的内容的意思paths里做的就是映射将键myDataService和文件dataService.js进行关联将键myAlerter和文件alerter.js进行关联。paths中的路径值可以省略.js后缀RequireJS 会自动补全。另外再讲一下注释里的baseUrl的用法如果没有这行配置那么paths里的路径是从当前这个文件main.js的角度出发的即相对路径如果加了一行baseUrl表明它是paths里所有路径的最开头的部分baseUrl的路径是从项目的根目录的角度出发的。例如配置baseUrl: js/后paths中的myDataService: modules/dataService最终会解析为js/modules/dataService。合理使用baseUrl可以让路径配置与页面/入口文件的位置解耦便于工程目录结构调整。4index.html —— 入口文件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleDocument/title /head body !-- 先通过 src 引入 require.js 文件然后通过>赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐JavaScript 原型链图文详解构造函数、五条原型规则与 instanceof 实战千古前端图文教程JavaScript 原型链图文详解构造函数、五条原型规则与 instanceof 实战千古前端图文教程 导读 本文源自《千古前端图文教程》 READM文档教程前端千古前端图文教程JavaScript 基本数据类型 Undefined 与 Null 详解千古前端图文教程JavaScript 基本数据类型 Undefined 与 Null 详解 导读 本文是「千古前端图文教程」JavaScript 基础系列中关文档教程前端千古前端图文教程BOM 简介与 navigator.userAgent / History / Location 实战详解千古前端图文教程BOM 简介与 navigator.userAgent / History / Location 实战详解 导读 本文是「千古前端图文教程」中文档教程前端上一篇SeaTunnel Web 可视化数据集成界面把同步任务跑起来并盯住它下一篇NVIDIA Profile Inspector解锁NVIDIA显卡隐藏性能的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考