源碼下載

源碼我已經(jīng)上傳到 CSDN 了，無(wú)需資源分，下載地址：http://download.csdn.net/detail/zgynhqf/8565873。

源碼使用 VS 2013 +TypeScript 1.4 進(jìn)行開(kāi)發(fā)。打開(kāi)后，顯示如下圖：

JsTankGame 1.0：老的使用 JS 編寫的坦克游戲。

JsTankGame 2.0：新的使用 TS 直接翻譯過(guò)來(lái)的游戲。

JsTankGame：在 2.0 的基礎(chǔ)上，對(duì)類型進(jìn)行了重構(gòu)后的新游戲。

重構(gòu)步驟

由于老的 JS 游戲是采用 MS Ajax Client Library 構(gòu)建，并且采用了 OOD 的方式來(lái)進(jìn)行設(shè)計(jì)，再加之 TypeScript 可以兼容 JS 的全部代碼。所以使用 TypeScript 來(lái)移植的工作也比較簡(jiǎn)單，主要是替換類型設(shè)計(jì)的代碼：類、繼承、接口等。

完成以上工作后，也就得到了使用 TS 編寫的 2.0 版本。過(guò)程中體會(huì)到了強(qiáng)類型語(yǔ)言的諸多好處，當(dāng)然也有一些 TS 目前并不完善的地方（后面會(huì)說(shuō)）。

得到了強(qiáng)類型的 2.0 版本后，并沒(méi)有結(jié)束。為了體驗(yàn)強(qiáng)類型對(duì)于重構(gòu)的好處，我決定在這個(gè)版本之上做代碼結(jié)構(gòu)上的重構(gòu)。

有了強(qiáng)類型編寫的代碼，我可以很方便地分析出每一個(gè)類型、每一個(gè)方法，具體在哪些地方被使用。這樣，我就能很快地知道類型之間的依賴關(guān)系。不看不知道，一看嚇一跳。之前一點(diǎn)一點(diǎn)隨心寫的代碼，本以為類型設(shè)計(jì)得還不錯(cuò)，之間耦合性應(yīng)該不是很高。但是圖畫完之后，才發(fā)現(xiàn)與想象中差點(diǎn)很遠(yuǎn)，這就是沒(méi)有畫圖直接編寫代碼的結(jié)果，見(jiàn)下面兩張圖：

可以看出各精靈類型之間的關(guān)系是比較亂的，雙向依賴隨處可見(jiàn)。（其實(shí)圖中因?yàn)榘?SpriteManager 畫到了另外一張圖，所以沒(méi)有顯示出更復(fù)雜、更亂的關(guān)系。）

據(jù)此，我繪制了新的關(guān)系圖，然后按照此關(guān)系來(lái)重構(gòu)了所有的代碼。這樣就得到了最新的 3.0 版本。

新版本的類型關(guān)系圖如下：

分層：

精靈：

管理器：

代碼層面，主要是把各精靈之間耦合的代碼，都移植到了上層的管理器中。同時(shí)，為精靈定義事件來(lái)解除精靈與管理器的直接耦合。

 TS 首次體驗(yàn)中感受的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)： Lambda 非常好地解決了 this 指針的問(wèn)題。 Chrome、IE 都能直接調(diào)試 TypeScript！ 過(guò)程中還發(fā)現(xiàn)了弱類型無(wú)法發(fā)現(xiàn)的錯(cuò)誤。因?yàn)橹孛?，還沒(méi)有修改原來(lái)的代碼。（SpriteManager.js 98 行）

缺點(diǎn)： 開(kāi)發(fā)環(huán)境-還沒(méi)有集成代碼注釋功能，只能手動(dòng)拷貝。 開(kāi)發(fā)環(huán)境-目前還不支持 Code Snippets。 開(kāi)發(fā)環(huán)境-不支持關(guān)鍵字代碼生成：if、while、swith、括號(hào)匹配等。 開(kāi)發(fā)環(huán)境-不支持代碼區(qū)域的定義（Region）。 語(yǔ)法-不支持事件的定義。 語(yǔ)法-暫時(shí)還不支持為類定義重載方法。見(jiàn) SpriteBase.IsCollided 方法。

其它：

編譯出的 JS 代碼有一定的冗余。命令空間處顯得特別明顯。 重寫基類方法，沒(méi)有提示。 基類的屬性獲取器/設(shè)置器無(wú)法重寫。 無(wú)法分辨哪些方法是虛方法。 接口中不能定義只讀的屬性。 還存在 BUG。（SpriteManager.ts line 93）。 簡(jiǎn)單定義一個(gè)數(shù)字類型的字段的話，默認(rèn)值并不是 0，而是 NaN。

總結(jié) 

總體說(shuō)來(lái)，經(jīng)過(guò)試用，我感覺(jué) TS 到目前的 1.4 版本，已經(jīng)可以用于正式的大型 JS 項(xiàng)目開(kāi)發(fā)。但是還有很多地方需要改進(jìn)！ 

附 Chrome、IE 調(diào)試 TS 截圖：

以上所述就是本文的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹沂炀氄莆誸ypescript有所幫助。

最新評(píng)論