Google Closure学习笔记（1）

最近打算研究下Google Closure框架，选择这个而不是jquery的原因是jquery的插件虽然多，但是质量参差不齐，而自己的JS水平有限，实在无力甄别、调试和自定义，所以使用一个一站式的框架，感觉Google Closure是个不错的选择，提供了很多的工具可供使用。

最吸引我的是它内置了依赖管理，这样就避免了我还要找一个依赖管理框架的麻烦。此前我的最佳选择是支付宝的Arale（内置了seajs）。

关于依赖管理，有provide和require两个函数提供。依赖管理的数据核心显然由两部分组成，第一部分是一颗依赖管理树，用来表示每个文件提供的组件，和其必须的组件；第二部分是一个数组，用来表示目前已经加载的组件。依赖关系树可以用addDependency来管理，而在载入了一个带有provide语句的js代码后，也会自动对这棵树进行改写。当执行require语句的时候，会检查该组件是否已经加载，如果没有，则会检索依赖关系树，然后将所有的依赖，从前到后依次加载。如果require的是一个未知的组件，则会出错。

base.js是closure的启动脚本，这个脚本执行之后，会立即调用deps.js，这个文件是一系列的addDependency语句，这样就初始化了closure核心库的依赖关系树；而我们自己也会有一系列的脚本，那么如何构建它们的关系树呢？使用如下工具：

$ closure-library/closure/bin/build/depswriter.py  \
    --root_with_prefix="myproject ../../myproject" \
    > myproject-deps.js

上面最重要的参数是--root_with_prefix，其中指明了要扫描的脚本路径，以及这些路径相对于base.js的路径。它将会生成一系列类似于deps.js的文件，对依赖关系树进行了维护。

有了完整的依赖关系树，我们就可以在任何地方，通过require语句引入一个组件了。引入这个组件时，closure将会计算它的依赖关系，结果是一个队列，随后按照队列顺序插入这些脚本文件。这个过程，也有一个python脚本可以完整，示例如下：

closure-library/closure/bin/build/closurebuilder.py \
  --root=closure-library/ \
  --root=myproject/ \
  --namespace="myproject.start"

这个脚本的结果，其实就是我们在执行require脚本时，得到的依赖关系队列。由于require时会自动插入这些文件，这个结果有何意义呢？这样做的目的是将一个文件及其所有依赖组合成一个文件，然后使用closure compiler的强大编译能力，使文件成为一个精简的独立脚本。如下所示：

closure-library/closure/bin/build/closurebuilder.py \
  --root=closure-library/ \
  --root=myproject/ \
  --namespace="myproject.start" \
  --output_mode=compiled \
  --compiler_jar=compiler.jar \
  --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
  > start-compiled.js

这样做的结果，是脚本的数量、体积和执行效率都得到了优化。

Closure权威指南中提到的一个工具，可以将前面两个工具结合起来，一方面生成依赖关系树，又能根据依赖关系，进行编译。

1）生成依赖关系树：

python ../closure-library/closure/bin/calcdeps.py \
    --dep ../closure-library \
    --path ../closure-templates/javascript \
    --path hello.soy.js \
    --path hello.js \
    --output_mode deps > hello-deps.js

这样将扫描path里面的文件，生成依赖关系树。

2）编译文件

python ../closure-library/closure/bin/calcdeps.py \
    --path ../closure-library \
    --path ../closure-templates/javascript/soyutils_usegoog.js \
    --path hello.soy.js \
    --input hello.js \
    --compiler_jar ../closure-compiler/build/compiler.jar \
     --output_mode compiled \
    --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
    > hello-compiled.js

收集依赖关系，然后对文件进行对依赖编译。