Finding Your Way around the Closure Library

Closure Libraryにはたくさんのツールが用意されている。ユーザインターフェースからコミュニケーションユーティリティまで。これら異なるライブラリパーツはコードの構成と作成が容易にする共通のconventionを持つ。

ここでは、Closure Libraryコードベースのコアとなるconventionについて述べる。この読了後には、Getting Startedエクササイズやライブラリのexploreのためのconventionをみにつけていることになるだろう。

Closure Libraryの関数名やプロパティ名はすべてドットで区切られたパスから開始する。これは、Closure Library以外によって定義された名称と衝突する可能性を避けるためだ。

例えば、以下のClosure Libraryコードはclamp()という関数をgoog.mathというnamespace中に定義する。

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のnamespaceのルートである。すべてのClosure Library名称はgoogから始まる。

依存管理：goog.require()とgoog.provide()

すべてのClosure Libraryの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 Libraryのファイルの冒頭にあるgoog.provide()は、そのファイルによって提供されるパブリックなnamespaceとクラス（共に複数）を宣言する。 goog.requireは、このファイルが必要とする他のパートを示す。 goog.provide()とgoog.require()は共にClosure Libraryのファイルclosure/goog/base.js内で定義されている。

goog.provide()とgoog.require()はClosure Libraryの依存管理システムを構成する。このシステムが、君が使いたいと思うClosure Libraryの部分をassembleすることを容易にする。

Use the goog.require() function in your own code to load the parts of the Closure Library that you need. See Getting Started with the Closure Library to learn how to load Closure Library packages with goog.require().

継承

The Closure Library adds an inheritance mechanism to JavaScript with the function goog.inherits(). The Closure Library uses this function to organize its codebase into classes and subclasses.

For example, the following code defines the constructor for the MenuButton Closure Library class, which inherits from the Button class:

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);

The last statement in the above code, goog.inherits(goog.ui.MenuButton, goog.ui.Button), establishes MenuButton as a subclass of Button (you can see the implementation of goog.inherits() in closure/goog/base.js). Because of this call to goog.inherits(), you can call the method getValue() on a MenuButton instance even though there is no method goog.ui.MenuButton.prototype.getValue(), like this:

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

MenuButton inherits the getValue() method from Button.

Note that the first line of the MenuButton constructor calls the Button constructor, as shown below:

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);

A call to the superclass constructor like this is necessary to properly establish inheritance. You can use goog.inherits() to create inheritance in your own code, but be sure to invoke to always call the superclass constructor with call().

The API documentation for each class shows you the inheritance hierarchy of that class, and also all methods inherited by the class from superclasses.

Closure Libraryのイベント

Modern browsers use events to trigger JavaScript functions in response to user actions. Unfortunately, different browsers have different event systems.

The Closure Library defines its own event framework, which works the same way in all browsers. Furthermore, this framework allows programmers to define and dispatch their own event types. The Closure Library uses its event framework throughout its codebase, allowing you to to listen to Closure Library objects for events just as you listen to DOM elements.

For example, the following line from the code for the library's collapsible element widget (goog.ui.Zippy) uses the event framework to attach a listener for user clicks:

goog.events.listen(this.elHeader_, goog.events.EventType.CLICK,

this.onHeaderClick_, false, this);

This code attaches an event listener to the DOM element elHeader_. Because of this call to goog.events.listen(), user clicks on elHeader_ trigger the handler function onHeaderClick_. See the Events Tutorial to learn more about the other arguments in this call.

By using goog.events.listen() to handle browser events in your own code, you can avoid having to write special cases for the event systems of different browsers.

You can also use goog.events.listen() to listen to instances of Closure Library classes. For example, the Closure Library class goog.ui.Zippy dispatches the custom event shown below when a Zippy is opened:

  this.dispatchEvent(new goog.ui.ZippyEvent(goog.ui.Zippy.Events.TOGGLE,
      this, this.expanded_));

By listening for this event, your code can react to it, for example by sending an alert to the user, as shown below:

  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);

See the Events Tutorial for more information about Closure Library events.

Closure_Library/introduction

Finding Your Way around the Closure Library

依存管理：goog.require()とgoog.provide()

継承

Closure Libraryのイベント