TypeScript 強類型 JavaScript – Rafy Web 框架選型


今天看到了 AngularJs 2.0 版本將基於 TypeScript 構建 的消息。與同事們對 TypeScript 展開了討論。本文記錄一些個人的想法。

 

理想的 JavaScript 開發模式


其實早在 TypeScript 發布早期的時候,我就已經開始關注這個語言。因為在2012年初時,我需要為 Rafy/OEA 平台選型編寫 Web 端自動界面生成框架:Rafy.js。而這個客戶端框架需要基於一些流行的 JS 庫來進行開發,當時選型的重點就是選擇哪一個基礎框架。

當時,我期望能找到一種可以編寫大型 JavaScript 框架程序的開發模式。理想情況下,這種開發模式需要:

  • 支持面向對象設計。無疑,面向對象設計方法依然是當下最重要的設計方法。.NET、Java、C++ 等都是面向對象的語言。封裝、繼承、多態,大大的提高了程序的可重用性、可維護性、靈活性。所以,支持面向對象是大規模框架開發的必要條件。
  • 支持快速重構。我認為重構是高級開發者必備的一個非常重要的能力。沒有不變的完美設計,只有不斷進步的設計。框架中的依賴關系、調用關系往往比較復雜,雖然外部的接口要盡量保持穩定、兼容,但是框架內部的接口卻會經常變動。而框架中動輒上萬行、不重復的代碼,如果沒有對重構的支持,很難想象如何維護好這么多的代碼。
  • 編譯時錯誤檢查、程序包管理、高效的代碼提示……一說到代碼的可維護性,可能我們都是在說程序本身的設計。但是開發工具的提升,也能大大提升開發者的開發效率,以及對程序代碼的維護成本。所以上述的這些提升開發效率的功能,對於開發大型程序來說,也是必要的。

上面說的這些要求,對於強類型的 .NET、Java 開發來說,其實都是最基本的。但是,對於弱類型的動態語言 JavaScript 來說,卻不是易事。弱類型、動態的特性,導致如果不到運行時,就很難確定一個變量的具體類型,所以也就很難提供代碼提示、重構等。從我開發 JavaScript 的第一天開始,我就一直被這些問題困擾,希望未來有一天能有技術解決它們。

 

Rafy.js 的基礎框架選型


當時在編寫 Rafy Web 前端框架時,為了解決上述的問題,我挑選了幾個方案。其中一個就是 TypeScript!我經過試用后發現,強類型的 JavaScript,確實可以解決這些困擾。但無奈的是,當時的 TypeScript 只是一個剛出生的嬰兒,版本號 0.8,連第一個正式版本都沒有發布,實在不敢用在真實項目上,由於項目的時間要求,所以不得不放棄了這個語言。

此外,我也考察了幾個 JS 框架,最終選定了 ExtJs 4。一是因為我要做的是 SinglePageApplication 的 Web 界面框架,而 ExtJs 4 中帶了大量的界面控件,非常方便使用;其次,ExtJs 4 提供了客戶端的實體模型,這可以與 Rafy 服務端實體可以更好地結合起來。更重要的是,ExtJs 4 帶來了全新的面向對象類型系統,這解決了面向對象設計的基礎設施問題。雖說如 prototype.js 等其它框架也或多或少地支持了部分的面向對象設計,但是 ExtJs4 的類型系統,無疑是支持得最全面的:命名空間、封裝、繼承、接口、靜態、單例、類型引用管理。所以,Rafy.js 最終是基於 ExtJs4 來構建的。

下面是當時 Rafy.js 開發完成后的框架類截圖:

imageimage

注意到,為了更好地解決開發過程中的上述問題。我們不得不人為地添加了一個《Javascript 類庫開發規范》。該文檔中的內容其實還是約定了一些封裝、繼承、多態的編寫約定(ExtJS 給出的面向對象類型系統同樣不完美)、以及一些代碼的規范。這些問題,其實完全可以從語言、工具的角度解決,但是我們不得不人工約定、人工檢查!

雖然 ExtJs4 大體上解決了面向對象設計的問題。但是由於重構困難,編寫低效,導致 Rafy.js 的第一個版本只寫了幾千行,就已經感覺到維護起來很吃力了。

 

TypeScript


上面說了這么多,無非就是想表達:強類型很重要、重構很重要、工具很重要。而這些正是 TypeScript 語言設計的主要目標:“As we look to the 2.0 release, we 're focusing on two goals in addition to our main goal of bringing good tooling to JavaScript development.  The first is to align with ES6…….“

 

先來說明一下,TypeScript(強類型 JavaScript)的優勢:

  • 更好的開發工具:支持重構、代碼自動完成、代碼導航、編譯檢查(靜態代碼分析:顯示警告和錯誤)、程序包管理……
  • 更好的語言特性:類型指定、泛型、面向對象支持。
  • 兼容原生的 JavaScript 。

這正是我想要的東西,也是開發大型 JS 項目的利器。

 

但是,TypeScript 並不適應於所有的開發人員、所有的項目,下面是 TypeScript 適應的場景:

  • 適應較大、復雜的項目。例如 SinglePageApplication、大型 JS 框架、前端游戲。
  • 需要支持面向對象設計、高可重用性、組件化開發的 JS 代碼。

下面是 TypeScript 不適應的場景:

一些簡單的、不需要 OOD、靈活性高、動態性高的代碼就不適合選擇 TypeScript。例如一般性的 Web 應用或站點的前端開發,這種頁面級的邏輯往往編寫在頁面中,即簡單,也不需要 OOD;再如,JQuery 框架的開發,這種框架的目標是靈活、方便、動態,而不是面向對象,所以也不太適合,所以 JQuery 框架應該不會使用 TypeScript 來重寫。

 

目前,TypeScript 已經發布了 1.4 版本。打開 Visual Studio 2013 的擴展管理器,即可安裝:

image

 

接下來的計划


接下來,我將使用 TypeScript 來把 Rafy.js 重新編寫。在正式改 Rafy.js 之前,我還會把之前做的這個 Web 游戲《Javascript 坦克游戲》改造一下試試。

敬請期待。

 

 

相關文章:

TypeScript MSDN Blog

TypeScript 官網

TypeScript 在線試用

Dart、CoffeeScript、TypeScript 和 JavaScript 哪種最適合專門學習?

為何TypeScript是任何事情的答案?

Type入門(JavaScript的超集)-譯


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM