源文出自：https://txt.appspot.com/pt2club.blogspot.com/2010/02/gwt-part-2javascript-overlay-type.html

彻底了解 GWT Part 2：JavaScript 的 overlay type

原文：http://googlewebtoolkit.blogspot.com/2008/08/getting-to-really-know-gwt-part-2.html

技术校正、审阅：tkcn

假设你已经在 GWT module 当中，愉快地使用 JSNI 来呼叫某些手写的 JavaScript。一切运作正常，但是 JSNI 只能在独立的 method 下运作。某些整合性状况需要你彻底地把 JavaScript 跟 Java 的 object 绑在一起——写 DOM 跟 JSON 就是两个好例子——所以我们十分需要可以从 Java 程式码直接与 JavaScript object 互动的方法。换句话说，我们想要 JavaScript 的 object 看起来就像我们写的 Java object。

GWT 1.5 引入了 JavaScript overlay type，这让 GWT 程式整合各种 JavaScript object 变得容易许多。这个技术有很多好处，像是让你能用 Java IDE 的 code completion 跟 refactoring 功能，即使你写的是 untype 的 JavaScript object。

范例：简单、有效率的 JSON
用一个范例来了解 overlay type 是最简单的方法。假设我们要存取一组「customer」数据，底层是用 JSON object。在 JavaScript 中的资料结构可能像这样：

void jsonData = [

? { "FirstName" : "Ps", "LastName" : "Monkey" },

? { "FirstName" : "痞子", "LastName" : "猴" },

? { "FirstName" : "Pt2", "LastName" : "Club" },

? { "FirstName" : "STO", "LastName" : "Orz" },

];

?

要把一个 Java type 加到上述的资料结构，要从建立一个 JavaScriptObject 的 subclass 开始，这在 GWT 表示是一个 JavaScript 的 object。接著增加一些 getter。

// An overlay type

class Customer extends JavaScriptObject {

? // Overlay types always have protected, zero-arg ctors

? protected Customer() { } ? ?

?

? // Typically, methods on overlay types are JSNI

? public final native String getFirstName() /*-{ return this.FirstName; }-*/

? public final native String getLastName()? /*-{ return this.LastName;? }-*/

?

? // Note, though, that methods aren't required to be JSNI