Closure教程一: Closure库简述

Closure教程一: Closure库简述

Closure库包含了从UI组件到通信工具的许多丰富多彩的工具。Closure库的各个模块提供了许多相关的约定使得代码更容易组织和使用。

 

本篇文章将为你简单地介绍Closure代码库的核心规则。读完本篇文章您将对如何使用Closure库有初步的了解。

 

1.命名空间
Closure库的方法和属性所属命名空间采用点分法的命名方式，以便防止和其他库产生冲突。

 

例如，下面定义了命名空间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库命名空间的根。所有的命名都是以goog开头的。

 

 

2.依赖关系管理: goog.require() 和 goog.provide()

所有的Closure库的JavaScript文件的开始部分的代码都是这样：

goog.provide('goog.math'); goog.require('goog.array'); goog.require('goog.math.Box'); goog.require('goog.math.Coordinate'); goog.require('goog.math.Range'); goog.require('goog.math.Rect'); goog.require('goog.math.Size');

Closure库文件开头申明的goog.provide()定义了该文件具有的公共命名空间和类。申明goog.require()表示该文件需要Closure库的其他的部分。goog.provide() 和goog.require()都是文件closure/goog/base.js中定义的方法。

 

goog.provide() 和 goog.require()一起共同构成了Closure库的依赖关系管理系统。该系统使得你可以容易地装载你想要使用的Closure库的部分。

 

你需要在你的代码中使用goog.require()方法来加载你所需要的Closure库的部分。

 

 

3.继承

Closure库使用goog.inherits()方法为JavaScript提供了一种继承机制。Closure库使用此功能将Closure组织成类和子类的代码库。

 

例如，下面的代码定义了MenuButton 类的构造函数，它继承自Button类：

 

goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) { goog.ui.Button.call(this, content, opt_renderer || goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper); // Menu buttons support the OPENED state. this.setSupportedState(goog.ui.Component.State.OPENED, true); if (opt_menu) { this.setMenu(opt_menu); } this.timer_ = new goog.Timer(500); // 0.5 sec }; goog.inherits(goog.ui.MenuButton, goog.ui.Button);

上面代码的最后一行，goog.inherits(goog.ui.MenuButton, goog.ui.Button)，将，MenuButton类定义为Button类的子类(你可以在closure/goog/base.js中查看goog.inherits()的具体实现)。 你可以调用MenuButton类的实例的getValue()方法，即便没有定义goog.ui.MenuButton.prototype.getValue()，如下代码所示：

 

var btn = new goog.ui.MenuButton('hi'); var value = btn.getValue();

 

因为MenuButton类继承了Button类的getValue()方法。

 

注意到MenuButton构造函数的第一行调用了Button的构造函数，如下代码所示：

 

goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) { goog.ui.Button.call(this, content, opt_renderer || goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper); ... }; goog.inherits(goog.ui.MenuButton, goog.ui.Button);

像这样调用父类的构造函数对于继承机制来说是必须的。你可以利用goog.inherits()在你的代码中创建继承，但是你得确保用call()方法调用了父类的构造函数。

 

API文档为你详细展示了类的继承体系以及该类继承自父类的所有方法。

 

 

4.事件

现代浏览器使用事件触发JavaScript函数来响应用户的操作。不幸的是，不同的浏览器使用不同的事件机制。

 

Closure库跟所有的浏览器一样，定义了自己的事件框架。此外，该框架允许程序员定义自定义的事件类型。Closure的事件框架自始自终地贯穿着整个代码库。

 

例如，下面的代码使用了事件框架为用户的单击事件附加了一个监听器。

 

goog.events.listen(this.elHeader_, goog.events.EventType.CLICK, this.onHeaderClick_, false, this);

 

此代码为DOM元素elHeader_附加了一个监听器。因为调用了goog.events.listen()方法，当用户单击elHeader_ 将触发onHeaderClick_事件。想要学习更多关于这个调用的参数说明，请阅读事件机制教程。

通过在你的代码中使用goog.events.listen()来处理浏览器事件，避免了为每一个不同的浏览器专门写不同的事件处理代码。

 

你也可以使用goog.events.listen()来监听Closure库类的实例。例如，当一个Zippy被打开时，类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);

关于Closure库事件框架的更多信息请参阅事件机制教程。

 

点击这里阅读原文。