Google Closure Library 入门指南：从零开始构建你的第一个应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00830/article/details/148508437

Google Closure Library 入门指南：从零开始构建你的第一个应用

前言

Google Closure Library 是一个强大且成熟的 JavaScript 库，它为构建复杂、高性能的 Web 应用提供了一整套工具和组件。本文将带你从零开始，逐步构建你的第一个 Closure Library 应用，并理解其核心概念和工作流程。

环境准备

安装 Closure Library

首先，在你的项目目录中初始化 npm 并安装 Closure Library：

npm init -y
npm install google-closure-library

这会将 Closure Library 源代码下载到 node_modules/google-closure-library 目录中。

安装依赖管理工具

Closure 项目使用 deps.js 文件来管理模块依赖关系。我们需要安装 google-closure-deps 工具来生成这个文件：

npm install --save-dev google-closure-deps

创建第一个 Closure 模块

让我们创建一个简单的 hello.js 文件：

/**
 * @fileoverview Closure 入门教程示例代码
 */
goog.module('hello');

const {TagName, createDom} = goog.require('goog.dom');

/**
 * 在页面中添加一个带有"Hello world!"消息的h1标签
 */
function sayHi() {
  const newHeader = createDom(TagName.H1, {'style': 'background-color:#EEE'},
    'Hello world!');
  document.body.appendChild(newHeader);
}

sayHi();

这段代码展示了 Closure Library 的几个关键特性：

goog.module 声明模块
goog.require 导入依赖
使用 DOM 操作工具函数

生成依赖文件

使用以下命令生成 deps.js 文件：

$(npm bin)/closure-make-deps \
  -f hello.js \
  -f node_modules/google-closure-library/closure/goog/deps.js \
  --closure-path node_modules/google-closure-library/closure/goog \
  > deps.js

这个命令会分析你的代码和 Closure Library 的依赖关系，生成一个包含所有依赖信息的文件。

创建 HTML 入口文件

创建 hello.html 文件：

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="node_modules/google-closure-library/closure/goog/base.js"></script>
<script src="deps.js"></script>
<div>内容将在这里显示</div>
<script>
  goog.require('hello');
</script>

这个 HTML 文件做了三件事：

加载 Closure 的基础库 base.js
加载我们生成的依赖文件 deps.js
使用 goog.require 加载我们的模块

运行开发服务器

为了测试你的应用，可以使用简单的 HTTP 服务器：

# Node.js
npx http-server
# Python 2
python -m SimpleHTTPServer 8080
# Python 3
python -m http.server 8080

然后访问 http://localhost:8080/hello.html 查看效果。

生产环境编译

当你的应用准备发布时，可以使用 Closure Compiler 进行优化：

安装 Closure Compiler：

npm install --save-dev google-closure-compiler

编译你的应用：

$(npm bin)/google-closure-compiler \
  --js hello.js \
  --js node_modules/google-closure-library/**/*.js \
  --dependency_mode=PRUNE \
  --entry_point=goog:hello \
  --js_output_file hello_compiled.js

更新 HTML 使用编译后的文件：

<!DOCTYPE html>
<meta charset="UTF-8">
<div>内容将在这里显示</div>
<script src="/hello_compiled.js"></script>

进阶概念

模块系统

Closure Library 使用 goog.module 和 goog.require 来管理模块依赖关系。这与 ES6 模块类似，但提供了更严格的命名空间管理和依赖解析。

类型系统

Closure Compiler 支持 JSDoc 类型注解，可以进行静态类型检查：

/**
 * @param {string} name
 * @return {string}
 */
function greet(name) {
  return 'Hello, ' + name;
}

高级优化

Closure Compiler 提供多种优化级别：

WHITESPACE_ONLY：仅删除空白和注释
SIMPLE：基本的压缩和优化
ADVANCED：高级优化，包括代码删除和重命名

常见问题解答

Q: 为什么需要生成 deps.js 文件？ A: deps.js 文件帮助 Closure 的调试加载器理解模块之间的依赖关系，在开发环境中按需加载所需文件。

Q: 编译后的代码和开发环境代码有什么区别？ A: 编译后的代码经过了优化、压缩和类型检查，移除了未使用的代码，并缩短了变量名，显著减小了文件体积。

Q: 如何调试编译后的代码？ A: 可以使用 source maps 来映射编译后的代码到源代码。在编译时添加 --create_source_map 选项即可生成 source map 文件。

结语

通过本教程，你已经学会了如何使用 Google Closure Library 创建、开发和优化 JavaScript 应用。Closure Library 提供了强大的模块系统、丰富的工具库和高效的编译优化，是构建大型 Web 应用的理想选择。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考