Google Closure学习笔记(1)

原创
2013/02/01 11:28
阅读数 2K

最近打算研究下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
收集依赖关系,然后对文件进行对依赖编译。


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
9 收藏
0
分享
返回顶部
顶部