Closure Library学习

         在学习limejs的时候,看到了limejs中就使用到了closure库。非常喜欢它的类定义方式和JS压缩方法。记录下来希望在以后的项目中能够使用上。

官方文档参考:https://developers.google.com/closure/library/

以下是官方文档对closure库的介绍

         The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more. 

          If you are developing a large or growing application, you may benefit from the Closure Library's breadth. A well-tested library can insulate you from cross-browser compatibility issues and the minutiae of client-side programming, letting you focus on the fun stuff.

         closure库是谷歌开发的一个广泛的、通过测试的、模块化的和跨浏览器的JavaScript库。closure库提供大量的可重用的UI小部件和控件,还有一些底层的使用工具如DOM操作,服务器通信、动画、数据结构、单元测试、富文本编辑等等,方便你的使用。 

          如果你开发一个大型的或者是快速增长的Web应用程序,Closure是一个不错的选择。这个可以使你不必去考虑浏览器间的兼容问题和一些客户端开发的小细节,而专心于你所感兴趣的东西。

          目前谷歌的一些产品都使用了Closure库。比如:谷歌搜索、Gmail、谷歌地图等。


一、安装closure
使用GIT BASH进行安装。进去到要进行安装的目录。运行:
git clone https://code.google.com/p/closure-library/

二、使用provide和require的小例子

有以下几个文件:
(1)writer.js
goog.provide( 'mydep.writer');
goog.require( 'goog.dom');
//引入goog.dom类在页面上绘制dom内容
mydep.writer.sayHello = function(){
var newDiv = goog.dom.createDom( 'h1', { 'style' : 'background-color:#EEE'},
'Hello world!');              
goog.dom.appendChild(document.body, newDiv);
}

goog.exportSymbol( 'mydep.writer', mydep.writer);
(2)mydep.js
goog.provide( 'mydep');
goog.require( 'mydep.writer');

mydep.start = function() {
mydep.writer.sayHello();
}
goog.exportSymbol( 'mydep.start', mydep.start);
HTML文件 mydep.html
<html >
<head >
<script src = "../closure-library/closure/goog/base.js" > < /script >
<script src = "mydep.js" > < /script >
< /head >
<body onload = "mydep.start()" >
< /body >
< /html >
其中writer.js是一个工具类,mydep.js是一个方法类,mydep是Html文件。
运行mydep.html文件,因为没有注册依赖关系直接运行会报找不到类的错误。

三、注册依赖关系
closure中有两种方法进行js类的注册。
(1)通过ClosureBuilder进行注册
使用命令如下图所示,打印结果也如下图所示:

这时候运行dep.html文件就可以看到效果了。
(这种方式通过建立依赖树的方式完成了依赖关系的注册,但是不知道是采用什么方式实现的。源码中找不到修改了的地方。还需要对closurebuilder.py这个源码文件多做些了解才能知道。也希望有大神告知一下。)

(2)通过depswriter.py来写入deps.js文件的方式来实现。
这个python有一下几个参数。翻译说明一下。

 
      
     
  • --output_file:指定一个输出文件路径。如果没有指定输出路径。只是在控制台打印信息。
  • --root 扫描root目录下的js文件。这个root路径相对于生成的deps文件路径。框架默认的deps.js文件在closure-library\closure\goog下。
所生成的依赖关系示例为:goog.addDependency('closure/goog/base.js', ['goog'], []) 第一个参数就是相对于deps.js的位置必须保证正确。所以推荐使用--root_with_prefix这种方式定义扫描的文件夹。
  • --root_with_prefix 同样是定义扫描的文件夹但是在输出路径的时候加上一个前缀。如定义:--root_with_prefix="dep ../../../dep"输出的时候就变成了:
                      goog.addDependency('../../../dep/mydep.js', ['mydep'], ['mydep.writer']); 这样就可以避免了路径错误。
  • --path_with_depspath 替换指定文件的依赖关系到某个文件中。如使用:--path_with_depspath="dep/mydep.js ../test.js" 则输出:
                      goog.addDependency('../test.js', ['mydep'], ['mydep.writer']);

          框架会默认引用closure-library\closure\goog下的dep.js。虽然说是不能直接编辑。但是如果修改的地方不多,直接把goog.addDependency复制进去就好了。不然所有的关系都要重新输入非常的麻烦。最好是模仿lime.py的update的方法直接update就可以了。这个以后再实现吧。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值