使用 TypeScript 的 JavaScript UI 控件套件

引言

附件是我开发的一套 JavaScript UI 控件。每个控件的文档，包括如何使用它们，都可以在相应的 .ts 文件中找到。目前，有四个控件：列表框、复选框列表、日历和网格。所有这些控件都支持一些基本功能，例如弹出选项、滚动条，以及将选择项写入“输出”HTML 元素。此外，所有这些控件都可以在三大主流浏览器中运行：Internet Explorer 8 及以上版本、Firefox 和 Chrome。

这些控件的主要目标是通过让开发人员免受 HTML 复杂性和浏览器兼容性问题的困扰，来简化客户端开发。结果，这也成了我首次涉足 TypeScript 的尝试。完成项目后，我想，既然 TypeScript 如此新颖，我在此项目中的经验或许能帮助其他刚接触 TypeScript 的开发人员。

我同时包含了 TypeScript 代码以及编译后生成的相应 JavaScript 文件。

背景

几个月前，我开始完全用纯 JavaScript（即不使用任何框架或库，如 jQuery）开发这个项目。我正进行得顺风顺水，突然间我的世界就天翻地覆了。就在那时，我打开邮箱，发现微软刚刚发布了一种名为 TypeScript 的新“语言”。

无论你怎么称呼它，也无论你是否认为它是新的，我立刻意识到我的工作将变得更轻松了。

通常，当出现一种看起来很有前景的新语言时，我会戴上决策者的帽子，分析它是否值得我花时间去深入研究。影响这一决定的因素包括：它是否易于使用、动态性如何（当然，指的是动态运行时）、有哪些可用的开发工具（用于类型检查、调试等），以及它是否有可能流行起来并长久存在。幸运的是，TypeScript 满足所有这些要求，如下所述。

• 由于 TypeScript 的主要目标是简化 JavaScript 的应用程序级开发，而我已经了解 JavaScript，这足以让我相信 TypeScript 会更容易使用。
• JavaScript 本质上是一种动态语言，而且根据微软的说法，任何 JavaScript 代码都被视为 TypeScript 代码（即它可以与新的 TypeScript 结构一起编译），因此很明显，我可以根据需要让 TypeScript 代码具有足够的动态性。
• 作为微软的产品，很有可能会有必要的开发工具可用（尽管你最终可能要花点钱）。果然，在 TypeScript 公开发布的当天，我就可以下载一个用于 Visual Studio 的 TypeScript 插件，它提供了智能感知、代码导航、静态错误消息和重构功能。（当然，这要求你确实拥有 Visual Studio，而我正好有，且我主要关心的是自己，所以这个要求通过了。）
• 最后，或许也是最重要的，如果你有一个有远见的经理，问题就变成了语言的生命周期。也就是说，如果我决定在 43 岁退休，我的老板能找到另一个 TypeScript 开发者吗？虽然无法预测未来（而且我可能不知道自己在说什么），但很明显，JavaScript 在其已经非常受欢迎的基础上正变得越来越流行。考虑到 JavaScript 是 Windows 8 开发的标准语言之一，并且 JavaScript 开始被认为是服务端开发（例如 Node.js）的一种有价值的语言。

对我来说，这个决定既简单又直接。即使是我那讨厌微软的老板也很难反驳这个逻辑。

所以，现在我已经使用 TypeScript 开发了近两个月，发现它和我所希望的一样好。我想分享一些我的经验，以及我认为这种新语言最有益的方面。

重要的是要认识到，由于 TypeScript 只是 JavaScript 的一个“门面”，并且 TypeScript 的编译输出只是可运行的 JavaScript，因此这里描述的任何 TypeScript 功能都可以用纯 JavaScript 编写。然而，除非你是专家级的 JavaScript 程序员，否则用纯 JavaScript 编写这些功能中的大部分会困难得多。对于已经熟悉几乎任何主流语言（如 C#、Java 和 PHP）的开发者来说尤其如此，因为 TypeScript 拥有与这些语言相似的面向对象结构。这才是重点……让 JavaScript 编码更容易！

Using the Code

每个控件的文档，包括如何使用它们，都可以在相应的 .ts 文件中找到。这里是一个使用其中一个控件的例子，但它们的使用方式都类似。

var cbList = new Zenith.CheckBoxList('baseElement');
 
cbList.NumColumns = 2;
cbList.ColumnSpace = 15;
cbList.MaximumHeight = 100;
cbList.PopUpControlId = 'testPopup';
cbList.PopUpPosition = 'right';
cbList.PopUpDirection = 'down';
cbList.OutputElementId = 'output1';
cbList.addZenithEventListener(Zenith.ZenithEvent.EventType.Selected, 
  function (value, text, checked) { alert(text + ' ' + (checked ? 'selected' : 'unselected')); });
cbList.addZenithEventListener(Zenith.ZenithEvent.EventType.Close, function () { });
 
// There are multiple ways to add the data to this control.  This is the simplest way:

cbList.AddItem(1, "Blue");
cbList.AddItem(2, "Yellow");
cbList.AddItem(3, "Red");
cbList.AddItem(4, "Green");
cbList.AddItem(5, "Turqoise");
cbList.AddItem(6, "Orange");
cbList.AddItem(7, "Black");
cbList.AddItem(8, "White");
cbList.AddItem(9, "Aqua");
cbList.AddItem(10, "Gray");
cbList.AddItem(11, "Purple");
cbList.Build();

工作原理

在这里，我们将只分析其中一个控件，即 CheckBoxList 控件。其他每个控件的构建方式都类似。

所有控件都派生（继承）自一个名为 ControlBase 的基类，该基类处理了它们之间大部分的通用逻辑，例如弹出逻辑、添加滚动条、执行通用事件，以及派生类需要的一些“protected”方法。

这是类定义的样子：

export class CheckBoxList extends Zenith.ControlBase

“Export”基本上表示该类应该在封闭模块的外部可用，“Zenith.ControlBase”引用了“Zenith”模块中的 ControlBase 类。请注意，即使每个控件都在其自己的文件中，所有控件都位于“Zenith”模块内。

每个控件类的构造函数都接受一个 HTML DIV 元素的 id，该元素被用作控件的“基础”元素，这意味着构成控件的所有 UI 元素都在这个 DIV 元素内部。每个构造函数都会调用基类的构造函数，在基类构造函数中，会从文档中检索该元素并将其分配给一个类属性，并围绕这个 DIV 元素创建一个边框。

以下是基类构造函数的实现：

constructor (baseDivElementId: string)
{
    if (baseDivElementId.length <= 0)
        throw Error("The id of a 'div' HTML element must be passed to the Zenith control when 
            creating.");

    this.BaseElement = document.getElementById(baseDivElementId);

    if (!this.BaseElement)
        throw Error("The id of the 'div' HTML element passed in is not valid.");

    if (!(this.BaseElement instanceof HTMLDivElement))
        throw Error("The element associated with the Zenith control must be a div element.");
   
    this.BaseElement.style.borderColor = '#B6B8BA';
    this.BaseElement.style.borderWidth = '1px';
    this.BaseElement.style.borderStyle = 'solid';
}

每个控件还有一个 Build 方法，该方法应在控件被构造并且在创建的对象上设置了适当的属性之后调用（参见上面的示例）。Build 方法（可能与其他 private 方法一起）将实际创建并定位构成控件的所有元素。元素的布局是通过一个 HTML 表格元素来处理的；也就是说，“基础”元素（DIV）下的“parent”元素是一个 <table> 元素。下面是 CheckBoxList 控件的 Build 方法的实现：

public Build(): void
{
    if (this.ItemList.Count() <= 0)
        throw new Error("The item list is empty.");

    this.Clear();

    var table: HTMLTableElement = <HTMLTableElement>document.createElement('table');
    this.BaseElement.appendChild(table);
    table.className = 'ZenithCheckBoxTable';

    var tbody: HTMLElement = document.createElement('tbody');
    table.appendChild(tbody);

    var trow: HTMLTableRowElement, tcell: HTMLTableCellElement;
    var colIndex: number = 0;

    for (var index = 0; index < this.ItemList.Count(); index++)
    {
        if (!trow || colIndex >= this.NumColumns)
        {
            trow = <HTMLTableRowElement>document.createElement('tr');
            tbody.appendChild(trow);
            colIndex = 0;
        }

        tcell = <HTMLTableCellElement>document.createElement('td');
        trow.appendChild(tcell);
        if (colIndex > 0)
            tcell.style.paddingLeft = this.ColumnSpace + "px";

        this.addEventListener(tcell, 'click', (event) => { this.selectedEventHandler(event); });

        var itemCheckbox: HTMLInputElement = <HTMLInputElement>document.createElement('input');
        itemCheckbox.type = 'checkbox';
        itemCheckbox.name = 'ZenithControlCheckBox';
        itemCheckbox.value = this.ItemList.ElementAt(index).Value;
        itemCheckbox.id = 'chk_' + this.ItemList.ElementAt(index).Value;
        tcell.appendChild(itemCheckbox);

        var label:HTMLLabelElement = <HTMLLabelElement>document.createElement('label');
        label.htmlFor = 'chk_' + this.ItemList.ElementAt(index).Value;
        label.className = 'ZenithCheckBoxLabel_Unselected';
        label.textContent = this.ItemList.ElementAt(index).Text;
        label.innerHTML = this.ItemList.ElementAt(index).Text;
        tcell.appendChild(label);

        colIndex++;
    }

    this.ParentElement = table;

    if (this.IsPopup())
        super.SetPopup();

    super.Build();
} 

this.addEventListener(this.BaseElement, 'mouseout', (event) =>
{
    var mouseEvent: MouseEvent = <MouseEvent>event;
    var targetElement: HTMLElement = <HTMLElement>mouseEvent.toElement;
    if (!targetElement)
        targetElement = <HTMLElement>document.elementFromPoint(mouseEvent.clientX, 
            mouseEvent.clientY);
    if (targetElement)
    {
        // The onmouseout event will happen event when leaving an element inside the element 
        // the event is tied to.
        while (targetElement && targetElement != this.BaseElement)
            targetElement = targetElement.parentElement;
        if (targetElement != this.BaseElement)
            this.Close();
    }
}); 

export class ZenithEvent
{
    public static EventType = { Selected: 1, Close: 2 };

    public eventType: number;
    public listener: Function;

    constructor (eventType: number, listener: Function)
    {
        this.eventType = eventType; this.listener = listener;
    }
} 

cbList.addZenithEventListener(Zenith.ZenithEvent.EventType.Selected, 
    function (value, text, checked)
    { 
        alert(text + ' ' + (checked ? 'selected' : 'unselected')); 
    }
);  

class DateHelper
{
    public static MonthNames: string[] = ['January', 'February', 'March', 'April', 'May', 
        'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    public static MonthShortNames: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    public static DayOfWeekNames: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
        'Thursday', 'Friday', 'Saturday'];
    public static DayOfWeekShortNames: string[] = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
    
    public static DaysInMonth(iMonth, iYear): number
    {
        return 32 - new Date(iYear, iMonth, 32).getDate();
    }

    public static toShortDate(date: Date): string
    {
        return date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString() + '-' +
            date.getDate().toString();
    }

    public static toLongDate(date: Date): string
    {
        return MonthNames[date.getMonth()] + ' ' + date.getDate().toString() + ', ' + 
            date.getFullYear().toString();
    }

    public static toShortDisplayDate(date: Date): string
    {
        return (date.getMonth() + 1).toString() + '/' + date.getDate().toString() + '/' + 
            date.getFullYear().toString();
    }
} 

module Zenith 
{ 
     export class ListBox extends Zenith.ControlBase 
     { 
         public NumColumns: number = 1; 
     } 
}

var lstList = new Zenith.ListBox('baseElement'); 

var table: HTMLTableElement = <HTMLTableElement>document.createElement('table'); 

///<reference path='ZenithControlBase.ts'/> 

class ListBox extends Zenith.ControlBase 
{ 
     static x: string = 'Test'; 
     public NumColumns: number = 1; 
     public ColumnSpace: number = 10; 
     private ItemList = new Zenith.List(); 
     constructor (baseDivElementId: string) 
     { 
           super(baseDivElementId); 
     } 
}