大话 JavaScript（Speaking JavaScript）：第三十一章到第三十三章

2024-01-12 09:21:36 浏览数 (1)

第三十一章：模块系统和包管理器

原文：31. Module Systems and Package Managers 译者：飞龙 协议：CC BY-NC-SA 4.0

JavaScript 没有内置模块支持，但社区已经创建了令人印象深刻的解决方法。要管理模块，可以使用所谓的包管理器，它们处理发现、安装、依赖管理等。

模块系统

JavaScript 模块的两个最重要（但不幸兼容）的标准是：

CommonJS 模块（CJS）

这个标准的主要体现是Node.js 模块（Node.js 模块具有一些超出 CJS 的特性）。它的特点包括：

  • 紧凑的语法
  • 设计用于同步加载
  • 主要用途：服务器

异步模块定义（AMD）

这个标准最流行的实现是RequireJS。它的特点包括：

  • 略微更复杂的语法，使 AMD 可以在没有eval()或静态编译步骤的情况下工作
  • 设计用于异步加载
  • 主要用途：浏览器

包管理器

在包管理器方面，npm（Node Packaged Modules）是 Node.js 的规范选择。对于浏览器，有两个流行的选项（还有其他）：

  • Bower是一个支持 AMD 和 CJS 的 Web 包管理器。
  • Browserify是一个基于 npm 的工具，它将 npm 包编译成浏览器可用的东西。

快速而肮脏的模块

对于正常的 Web 开发，您应该使用 RequireJS 或 Browserify 等模块系统。但有时您只是想快速拼凑一下。然后以下简单的模块模式可以帮助：

代码语言：javascript复制
var moduleName = function () {
    function privateFunction () { ... }
    function publicFunction(...) {
        privateFunction();
        otherModule.doSomething();  // implicit import
    }
    return { // exports
        publicFunction: publicFunction
    };
}();

上面是一个存储在全局变量moduleName中的模块。它执行以下操作：

  • 隐式导入一个依赖项（模块otherModule）
  • 有一个私有函数privateFunction
  • 导出publicFunction

要在网页上使用模块，只需通过<script>标签加载其文件和其依赖项的文件：

代码语言：javascript复制
<script src="modules/otherModule.js"></script>
<script src="modules/moduleName.js"></script>
<script type="text/javascript">
    moduleName.publicFunction(...);
</script>

如果在加载模块时没有访问其他模块（这是moduleName的情况），那么加载模块的顺序就不重要了。

以下是我的评论和建议：

  • 我用了一段时间这个模块模式，直到我发现我并没有发明它，它有一个官方名称。Christian Heilmann 推广了它，并称之为“揭示模块模式”。
  • 如果您使用此模式，请保持简单。可以随意使用模块名称污染全局范围，但请尽量找到唯一的名称。这只是为了进行一些小技巧，所以没有必要变得复杂（嵌套命名空间，模块分割成多个文件等）。

第三十二章：更多工具

原文：32. More Tools 译者：飞龙 协议：CC BY-NC-SA 4.0

模块系统和包管理器在第三十一章中有介绍。但还有其他重要的工具类别：

Linting

Lint 工具分析源代码并报告潜在问题和样式违规。三种流行的工具是：

  • JSLint by Douglas Crockford
  • JSHint by Anton Kovalyov
  • ESLint by Nicholas Zakas

单元测试

理想情况下，一个单元测试框架可以在两个主要的 JavaScript 平台——浏览器和 Node.js 上运行。两个重要的框架是：

  • Jasmine
  • mocha

缩小

JavaScript 源代码通常会浪费空间——变量名比需要的要长，有注释，额外的空白等等。缩小工具可以去除这些浪费并将代码编译成更小的代码。移除过程的一些部分相对复杂（例如，将变量重命名为短名称）。三种流行的缩小工具是：

  • UglifyJS
  • YUI Compressor
  • Closure Compiler

构建

对于大多数项目，您需要对其构件应用许多操作：lint 代码，编译代码（即使在 Web 项目中也会发生编译——例如，将诸如 LESS 或 Sass 之类的 CSS 语言编译为普通 CSS），缩小代码等等。构建工具可以帮助您完成这些操作。Unix 的两个经典示例是 make 和 Java 的 Ant。JavaScript 的两个流行的构建工具是Grunt和Gulp。它们最引人注目的特点之一是您可以在使用它们时保持在 JavaScript 中；它们都基于 Node.js。

脚手架

脚手架工具设置一个空项目，预先配置构建文件等。Yo就是这样一个工具。它是Yeoman套件的一部分，包括 yo、Bower 和 Grunt。

第三十三章：接下来该怎么办

原文：33. What to Do Next 译者：飞龙 协议：CC BY-NC-SA 4.0

现在您已经了解了 JavaScript 语言，接下来该怎么办呢？了解整个生态系统的最佳方法是什么？以下是一些建议：

  • Frontend Rescue是一个提供浏览器开发入门技巧的网站。
  • JSbooks链接到各种免费的 JavaScript 和相关技术书籍。
  • Twitter 是一个了解网页开发的好工具。从您所知道的著名 JavaScript 人物开始（例如，您选择的框架的创建者），然后继续下去；迟早，您会得到许多关于下一个关注对象的想法。
  • JSMentors是一个致力于“在专业和非对抗环境中帮助开发人员成为更好的 JavaScript 编程人员”的论坛。
  • 除了 Twitter 之外，还有许多其他有趣的新闻来源可以探索。以下是一些例子：
  • Echo JS是一个以 JavaScript 和 HTML5 为重点的社区驱动的新闻网站。
  • Cooper Press发布了几份与网页开发相关的电子邮件新闻（免责声明：我是“JavaScript Weekly”通讯的编辑）。
  • Open Web Platform Daily Digest包含每日值得关注的链接列表。
  • Best of JavaScript, HTML & CSS是一个每周链接列表。
  • JavaScript user groups是一个有趣且富有教育意义的结识志同道合的人的方式。他们大多定期聚会，进行演讲等活动。
  • JavaScript conferences是另一个很好的信息来源。其中许多会在网上免费发布他们演讲的视频。

最后，您还可以查看该书的官方网站SpeakingJS.com，我会不时发布与本书相关的材料。

工具 开发 浏览器 系统 javascript

0 人点赞