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

本文链接：https://blog.youkuaiyun.com/gitblog_00833/article/details/148508552

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

closure-library Google's common JavaScript library 项目地址: https://gitcode.com/gh_mirrors/clo/closure-library

前言

Google Closure Library 是一个强大且成熟的 JavaScript 库，它为开发者提供了一套完整的工具集，用于构建复杂且高性能的 Web 应用程序。本文将带你从零开始，逐步了解如何使用 Closure Library 开发你的第一个应用。

环境准备

1. 初始化项目

首先创建一个项目目录并初始化 npm 包：

mkdir my-closure-app
cd my-closure-app
npm init -y

2. 安装 Closure Library

安装 Closure Library 作为项目依赖：

npm install google-closure-library

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

3. 安装依赖管理工具

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

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

创建你的第一个 Closure 模块

1. 编写 hello.js

创建一个 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：引入依赖
使用 Closure 提供的 DOM 操作方法

2. 生成依赖文件

运行以下命令生成 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 加载我们的模块

运行和测试

1. 启动本地服务器

你可以使用任何简单的 HTTP 服务器来测试你的应用。以下是几种常见方式：

# Node.js
npx http-server

# Python 2
python -m SimpleHTTPServer 8080

# Python 3
python -m http.server 8080

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

2. 预期结果

你应该能看到页面上显示了一个灰色背景的"Hello world!"标题。

生产环境编译

1. 安装 Closure Compiler

为了生产环境部署，我们需要安装 Closure Compiler：

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

2. 编译你的应用

运行以下命令编译你的 JavaScript 代码：

$(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

这个编译过程会：

进行代码优化和压缩
移除未使用的代码
执行类型检查
生成单个优化后的文件

3. 使用编译后的文件

更新你的 HTML 文件，直接引用编译后的 JavaScript：

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

进阶建议

模块化开发：随着项目增长，将代码拆分为多个模块
类型检查：利用 Closure 的类型系统提高代码质量
单元测试：使用 Closure 的测试框架编写测试
构建自动化：考虑使用构建工具如 Gulp 或 Webpack 集成 Closure 工具链

常见问题解答

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

Q: 编译后的代码有什么优势？ A: 编译后的代码体积更小，执行更快，且经过了严格的类型检查和优化。

Q: 如何调试编译后的代码？ A: 建议在开发阶段使用未编译的代码进行调试，生产环境再使用编译版本。

通过本教程，你已经掌握了 Closure Library 的基本使用方法。随着深入使用，你会发现它提供的更多强大功能，如高级组件、UI 控件和实用工具等。

closure-library Google's common JavaScript library 项目地址: https://gitcode.com/gh_mirrors/clo/closure-library

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