问:Goog.provide
和Goog.require
有什么区别?
答:goog.provide
创建一个名称空间; goog.require
从给定的名称空间中“导入”代码,以便闭包编译器可以找到它。
通常,在创建类时,将为其提供一个名称空间,并需要您的类直接使用的所有名称空间。
goog.provide 规则1
- goog.provide 语句放在前面,goog.require 放后面,两者用一行空行分隔。
- 所有引用按字母排序。
- 两种引用都不换行,即使超过列宽 80 的限制。
- 只提供顶级 symbol。
goog.provide('namespace.MyClass');goog.provide('namespace.helperFoo');goog.require('an.extremelyLongNamespace.thatSomeoneThought.wouldBeNice.andNowItIsLonger.Than80Columns');goog.require('goog.dom');goog.require('goog.dom.TagName');goog.require('goog.dom.classes');goog.require('goog.dominoes');
类中定义的所有成员应位于同一文件,对外导出只提供这个顶级类的命名空间。
正确的示例:
goog.provide('namespace.MyClass');
错误的示例:
goog.provide('namespace.MyClass');goog.provide('namespace.MyClass.CONSTANT');goog.provide('namespace.MyClass.Enum');goog.provide('namespace.MyClass.InnerClass');goog.provide('namespace.MyClass.TypeDef');goog.provide('namespace.MyClass.staticMethod');
导入时应指定具体成员名:
goog.provide('foo.bar');goog.provide('foo.bar.CONSTANT');goog.provide('foo.bar.method');
Google Closure
Closure
是谷歌开发的一款开源项目,该项目在很多谷歌项目中被广泛使用。现在很多web 项目都用到了Closure。
Web应用程序从最初简单的HTML页面演变成了富客户端的交互式系统,这带来了很好的用户体验。如今的Web应用程序给开发者带来了新的挑战:如何开发和维护可以快速下载(到客户端)并兼容不同浏览器的高效的JavaScript代码?
Closure工具帮助开发者开发出强大高效的web 应用程序,Closure工具包含:
- JavaScript优化器
Closure编译器可以将JavaScript编译成简洁、高性能的代码。编译器会删除无效的代码然后重写并精简代码,优化后的代码可以更快的下载和执行。编译器还会检查语法、变量引用、类型并对普通的代码缺陷给出警告,这些检查和优化可以帮你写出bug更少、更好维护的web应用程序。
- 全面的JavaScript库
Closure库是一个广泛的、经过严格测试的、模块化的跨浏览器的JavaScript库。你可以从大量的可重用的组件和控件以及从DOM操作,服务器通信,动画,数据结构,单元测试,富文本编辑器等的底层工具中拖拉你想要的任何东西。Closure库是服务器无关的,适用于和Closure编译器一起使用。
- Closure模板
Closure模板简化了动态生成HTML的任务。它的语法很简单,程序员很容易上手。和传统的模板系统相比,你可以将Closure模板看成很小的组件,然后组装成用户界面,而不是每个页面都使用一个大的模板。Closure模板为Java和JavaScript都做了实现,因此你可以在客户端和服务器端使用同样的模板。在客户端,Closure模板被预编译成高效的JavaScript代码。
为什么使用Closure
使用Closure不单能使你的部门领导高兴,而且能使你的用户开心。作为这个工具集的一颗宝石,Closure编译器工具能大大减少用户下载javascript的数量。它是通过将长变量明替换为更短的名字,移除无用的代码,并且应用了很多其它的优化。压缩代码不光能使你的应用更快,还能减少网络流量使用户节省带宽花费。更深一层上讲,混淆代码将能保护你的代码,因为这能使别的网站复制你的功能更困难。
Closure Library 能为我做些什么?
如果您正在开发一个大型的或正在增长的应用程序,那么您可能会受益于闭包库的广度。一个经过良好测试的库可以让你远离跨浏览器兼容性问题和客户端编程的细节,让你专注于有趣的东西。
闭包库包含许多不同的工具,从用户界面小部件到通信实用程序。库的不同部分共享一组有助于组织代码并使其易于使用的约定。本文简要介绍闭包库代码库的核心约定。阅读本文后,您应该对这些约定足够熟悉,以便完成入门练习并进一步探索库。
减小编译后的代码是最重要的
closure编译最主要的目标是减小javascript代码的大小。因为google有很多javascript开发的网页并以速度优势而自豪,因此就要求以竟可能小的方法来显示一个页面。即使是浏览器会缓存页面,它仍然会在用户重新加载时再次解释执行。javascript代码越小,它花费的时间就越少。
特别地,编译器支持用gzip
的方法来减小javascript
的大小。
示例:Hello World2
这节将通过一个简单的例子来讲述所有Closure工具的使用。在作这个练习之前,首先确保前面提到的所有工具都安装完成。包括java 6
和python2.6.5
或更新版本,并保证命令行可用。
1 Closure Libray
第一步将要练习Closure Library创建页面并加载Library核心。然后通过DOM工具插入文字:Hello World!到页面中。假如你已经有了前面提到的工具,首先在closure目录中创建一个子目录:hello-world
。然后创建一个hello.js
文件放入 hello-world
文件夹中,hello.js
内容如下:
goog.provide('example');goog.require('goog.dom');example.sayHello = function(message){
goog.dom.getElement('hello').innerHtml = message;};
在同一目录下,创建html
文件:hello.html
<!doctype html><html><head><title>Example: Hello World</title></head><body><div id="hello"></div><script src="../closure-library/closure/goog/base.js"></script><script src="hello.js"></script><script>example.sayHello('Hello World!');</script></body></html>
用浏览器打开hello.html
你将看到Hello World!
,关于goog.provide()
和goog.require()
将在以后详细介绍。现在你只需知道它是库用来管理依赖用的就可以了。如果你有firebug
,你将看到会有12个javascript
被加入。
2 Closure Library命名空间
所有Closure Library
函数和属性的名称均以点分隔的路径开头,以防止它们意外地与非Closure库代码中定义的名称重叠, 此路径称为名称空间。
例如,以下Closure Library代码在goog.math
命名空间内定义了clamp()
函数:
goog.math.clamp = function(value, min, max) {
return Math.min(Math.max(value, min), max);};// 调用函数var clampedValue = goog.math.clamp(2, 3, 4);
名称goog
是Closure Library
名称空间的根,所有Closure Library
名称均以goog
开头。
3 依赖关系管理:goog.require和goog.provide
所有Closure Library JavaScript
文件都以一段代码开头,如下所示:
goog.provide('goog.math');goog.require('goog.array');goog.require('goog.math.Box');
Closure Library
文件开头的goog.provide()
语句声明该文件提供的公共名称空间和类。 goog.require()
语句指示此文件需要的Closure
库的其他部分。 goog.provide()
和goog.require()
都是在Closure Library
文件closure / goog / base.js
中定义的函数。
goog.provide()
和goog.require()
一起提供了Closure
库的依赖项管理系统。 使用该系统可以轻松组装要使用的Closure库的各个部分。 在您自己的代码中使用goog.require()
函数来加载所需的Closure库部分。 请参阅Closure Library入门,以了解如何使用goog.require()
加载Closure Library
软件包。
4 闭包库事件
现代浏览器使用事件来触发JavaScript函数以响应用户操作。 不幸的是,不同的浏览器具有不同的事件系统。 Closure库定义了自己的事件框架,该框架在所有浏览器中的工作方式都相同。 此外,该框架允许程序员定义和调度他们自己的事件类型。 Closure库在整个代码库中使用其事件框架,使您可以像监听DOM元素一样监听事件的Closure Library对象。 例如,库的可折叠元素小部件(goog.ui.Zippy)的代码中的以下行使用事件框架为用户的点击附加了侦听器:
goog.events.listen(this.elHeader_, goog.events.EventType.CLICK,this.onHeaderClick_, false, this);
通过使用goog.events.listen()
处理您自己的代码中的浏览器事件,您可以避免不必为不同浏览器的事件系统编写特殊情况。 您也可以使用goog.events.listen()
来监听Closure Library
类的实例。 例如,当打开Zippy时,Closure Library类goog.ui.Zippy调度如下所示的自定义事件:
this.dispatchEvent(new goog.ui.ZippyEvent(goog.ui.Zippy.Events.TOGGLE,this, this.expanded_));
通过侦听此事件,您的代码可以对此做出反应,例如,通过向用户发送警报,如下所示:
var zippyHeader = document.getElementById('header');var zippyContent = document.getElementById('content');var zippy = new goog.ui.Zippy(zippyHeader, zippyContent);function react(e) {
alert('The Zippy opened!');}goog.events.listen(zippy, goog.ui.Zippy.Events.TOGGLE, react);
参考资料
https://developers.google.com/closure/library/docs/gettingstarted
https://zhuanlan.zhihu.com/p/35193617 ??
https://developers.google.com/closure/library/docs/introduction#deps ??