模块化 & 依赖管理 & 性能优化 RequireJS
简介
一群无法无天的猪从无辜的小鸟那里偷走了所有的前端架构，现在小鸟们要把它们夺回来！一队特殊的小鸟英雄将攻击这些卑鄙的猪，直到夺回原本属于它们的前端 JavaScript 架构！
小鸟们最终会成功吗？它们会打败那些培根味儿的敌人吗？让我们一起揭示 JavaScript 之愤怒的小鸟系列的另一个扣人心弦的章节！
译注：翻译“bacon flavored foe”时，想起来了《少林足球》里的“做人如果没有梦想，那跟咸鱼有什么区别？”，就翻译成了“咸猪敌人”，@sunnylost 建议翻译为“培根味儿的敌人”，应该更准确和有趣些。
阅读系列介绍文章，查看所有小鸟以及它们的攻击力。
战报
黄色小鸟的攻击
在这片文章中，我们将看看黄色小鸟，它用速度助推器 RequireJS 和动态注入脚本攻击那些讨厌的猪。渐渐地，小鸟们将一个接一个地夺回属于它们的东西！
猪偷走了什么？
小鸟们过去经常手动向 HTML 文件中添加 script 标签。起初这不是一个问题，但是当它们的应用开始变得更大更复杂时，组织代码、解决依赖关系和确定性能优化策略变得困难重重。值得庆幸的是，小鸟们引入了 RequireJS 库，这个库可以管理代码模块、异步加载脚本、管理依赖关系，并提供了一种简单的优化方式。不幸的是，在最近的一次入侵中，猪群从小鸟们那里偷走了 RequireJS 库。
一只黄色小鸟被派去夺回被盗的 RequireJS 库。它将用加速度的力量摧毁猪群，夺回属于它们的东西。
崩溃的应用
我们先从一个简单的小网页开始，其中包含了几个脚本文件。你会看到，我加载了 3 个常用库（jQuery、Underscore、Postal），并且在结尾处加载了一些自定义代码。
上面的代码看起来相当简单，但当我运行这个网页时，开发工具的控制台打印了下面的错误...
内心对白：“什么！？！我没有在任何地方看到 each 方法。这到底是怎么回事？哦，天啊，看起来像是在 postal.min.js 的某处发生的异常。发现了一个 BUG... 但是等等！？！哦，这里面可能还有别的东西。”
好吧，真正的问题并不是 postal.js 的 bug，而是 postal.js 依赖于 underscore.js。而 underscore.js 应该在 postal.js 之前就被加载。通过简单的重新排列 script 标签，就能很容易地解决这个问题。在上述情况下的修复显然微不足道，但是想像一下，一旦项目开始变大，并且需要大量的脚本时，修复工作会变得多么繁重。
RequireJS 基础
在开始看如何用 RequireJS 解决上述情况之前，让我们先来高度概括一下这个库能为我们做些什么。RequireJS 是一个异步模块加载器，提供的 API 允许我们定义和请求模块。这两个功能都很好理解，所以我们先看看它们。
定义方法
创建一个模块需要一个名字、一个依赖关系列表和一个回调函数。
请求方法
在应用的某些地方，你需要使用 require 函数来开始执行代码。
修正后的应用
我用 RequireJS 重新调整了上面的小应用。你应该注意到，下面的代码移除了所有 script 标签，除了指向 require.js 库的标签。RequireJS 知道从哪里开始执行，因为我们添加了一个 HTML5 属性 data-main，它描述了主脚本的位置。
主脚本有一段配置部分，可以在其中为现有的 AMD 模块指定别名，也可以为未预定义的库应用垫片。尽管 jQuery 和 Postal 定义自身为 AMD 模块，我们仍然要在配置中包含它们，因为它们没有被放在 main.js 的旁边。
你不必在配置中包含应用程序中的所有自定义模块。你可以通过文件路径和名称引用它们。
优化
我们的应用只包含了 5 个脚本文件，但你也知道，我们的应用只会持续添加额外的脚本。所以，理想的做法是用一种简单的方式将脚本合并和压缩，从而达到更好的生产性能。通过使用 RequireJS 定义应用的依赖关系可以实现这一目标。
值得庆幸的是，有一个称为 r.js 的工具可以收集依赖信息，并用这些信息生成一个合并和压缩过的脚本文件。你可以通过 Node 包管理器 npm install requirejs 安装这个工具。
你可以在控制台中把命令行参数都传给这个工具，但我更喜欢在运行这个工具之前先创建一个构建配置文件，来定义所以的选项，就像下面的示例。你可以在官方 GitHub 库中找到完整的选项列表。
定义 build.js 文件之后，你可以把这个文件作为参数传给 r.js。运行这条命令 r.js -o build.js，你可以在控制台看到这个工具的输出，就像下面这样。
其他资源
关于 RequireJS 和优化工具 r.js 所能的所有事情，我仅仅触及到了皮毛。如果你有兴趣了解关于这些概念的更多信息，你可能想看看下面这些资源。
- Jack Franklin's (@jack_franklin) Introduction to RequireJS article
- Jeffrey Way's (@jeffrey_way) A RequireJS, Backbone, and Bower Starter Template screencast
- Cary Landholt's (@carylandholt) RequireJS Basics video
- Jonathan Creamer's (@jcreamer898) Using Require.js in an ASP.NET MVC application article
攻击！
下面是一个用 boxbox 构建的简版 Angry Birds，boxbox 是一个用于 box2dweb 的框架，由 Bocoup 的 Greg Smith 编写。
按下
空格键来发射黄色小鸟，你也可以使用方向键。
结论
Web 前端应用可以快速变得相当复杂。理想的做法是提供某种结构和依赖关系管理，以及用一种简单的方式优化最终结果。由于黄色小鸟的努力，小鸟们已经夺回了值得信赖的 RequireJS 工具，并会在它们的下一个应用程序中使用它。
还有许多其他的前端架构技术被猪群偷走了。在下篇文章中，另一只愤怒的小鸟将继续复仇！Dun, dun, daaaaaaa!
@sunnylost 补充：Dun, dun, daaaaaaaaaa! 应该是在模拟背景音乐，类似于这种 http://missingno.ocremix.org/musicpages/game_on.html
blog comments powered by Disqus