分享8個可以編譯爲JavaScript的語言

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript 並不是最好的語言，特別是在複雜的應用中，它可能不太能勝任。爲了避免這種情況，一些新的語言或現有語言的編譯器被創造出來，不用寫一行 JavaScript 或者考慮這種語言的侷限，就能生產在瀏覽器能運行的代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文介紹幾種能夠編譯爲 JavaScript 的語言，可以在瀏覽器或者 Node.js 中執行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從代碼簡潔的角度考慮的話，個人還是比較喜歡 ClojureScript ，可以用簡短的代碼實現複雜的邏輯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而想嘗試 TypeScript 來開發最新的項目，是因爲看到報道說在谷歌到處可以看到 TypeScript 的身影，也想體驗下 TypeScript 項目開發。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. TypeScript","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://www.typescriptlang.org/","title":"","type":null},"content":[{"type":"text","text":"Get started with TypeScript","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript 是一種由微軟開發的自由和開源的編程語言，是 JavaScript 的超集；一個有效的 JavaScript 項目也是一個有效的 TypeScript 項目只是添加了靜態類型。編譯器也可以作爲ES2015+到當前實現的轉譯器，這樣你總是能得到最新的特性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同於其他語言，TypeScript 保持了JavaScript 完整的精神，只是此外添加了增加代碼可靠性的功能。這些功能就是類型註釋和其他類型相關的功能，得益於專業工具像是靜態分析器和其他工具在重構過程的加入，這些功能使寫 JavaScript 更加有趣。並且，類型的加入改善了你的應用不同組件之間的接口。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"類型診斷是支持性的，你不必從一開始就寫所有的類型。你可以先快速的寫代碼，然後再加入類型來讓代碼更穩定。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript同樣也支持高級類型，像是交叉類型，聯合類型，類型別名，可辨識聯合和類型保護。可以在 TypeScript 網站的 Advanced Types 頁面查看。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你使用React的話，通過添加React類型，JSX也是支持的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"class Person {\n private name: string;\n private age: number;\n private salary: number;\n\n constructor(name: string, age: number, salary: number) {\n this.name = name;\n this.age = age;\n this.salary = salary;\n }\n\n toString(): string {\n return `${this.name} (${this.age}) (${this.salary})`;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. ClojureScript","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://clojurescript.org/guides/quick-start","title":"","type":null},"content":[{"type":"text","text":"Get started with ClojureScript","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ClojureScript 是將 Clojure 編程語言轉換爲 JavaScript 的編譯器。它是一種通用的函數式語言，支持動態類型和不可變數據結構。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它是這個列表中唯一屬於 Lisp 家族系列的編程語言，當然，它擁有很多功能。 例如，代碼可以被視爲數據，並且支持宏系統，這使得元編程技術成爲可能。與其他 Lisps 不同的是，Clojure 支持不可變的數據結構，使副作用的管理更加容易。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於新手來說，它的語法使用括號可能看起來很恐怖，但是這樣做有着深刻的意義，從長遠來看，你一定會感謝這種做法。語法上的簡約性和語法抽象能力使 Lisp 成爲解決那些需要高抽象層次的問題的強大工具。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然 Clojure 主要是函數式語言，但它不像 PureScript 或 Elm 那樣純粹；副作用仍然可以發生，但其他函數式特徵仍然存在。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ClojureScript 使用 Google Closure 進行代碼優化，並且與現有的 JavaScript 庫兼容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"(ns dom.test\n (:require [clojure.browser.event :as event]\n [clojure.browser.dom :as dom]))\n\n(defn log [& args]\n (.log js/console (apply pr-str args)))\n\n(defn log-obj [obj]\n (.log js/console obj))\n\n(defn log-listener-count []\n (log \"listener count: \" (event/total-listener-count)))\n\n(def source (dom/get-element \"source\"))\n(def destination (dom/get-element \"destination\"))\n\n(dom/append source\n (dom/element \"Testing me \")\n (dom/element \"out!\"))\n\n(def success-count (atom 0))\n\n(log-listener-count)\n\n(event/listen source\n :click\n (fn [e]\n (let [i (swap! success-count inc)\n e (dom/element :li\n {:id \"testing\"\n :class \"test me out please\"}\n \"It worked!\")]\n (log-obj e)\n (log i)\n (dom/append destination\n e))))\n\n(log-obj (dom/element \"Text node\"))\n(log-obj (dom/element :li))\n(log-obj (dom/element :li {:class \"foo\"}))\n(log-obj (dom/element :li {:class \"bar\"} \"text node\"))\n(log-obj (dom/element [:ul [:li :li :li]]))\n(log-obj (dom/element :ul [:li :li :li]))\n(log-obj (dom/element :li {} [:ul {} [:li :li :li]]))\n(log-obj (dom/element [:li {:class \"baz\"} [:li {:class \"quux\"}]]))\n\n(log-obj source)\n(log-listener-count)\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3. Dart","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://www.dartlang.org/guides/get-started","title":"","type":null},"content":[{"type":"text","text":"Get started with Dart","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Dart是一個典型的面向對象的語言，任何東西都是一個對象並且任何對象都是一個類的實例（對象也可以表現爲函數）。它的特殊性用於打造面向瀏覽器，服務器和移動設備的應用。 它由谷歌來維護，是用於驅動下一代的AdWords UI。AdWords UI是谷歌盈利的重要產品，這也證明了它在體量上的強大。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種語言可以編譯爲JavaScript用於瀏覽器，或者直接通過Dart VM解釋，這樣也可以允許你構建服務端應用。移動應用可以通過Flutter SDK創建。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"複雜的應用還需要一系列特別爲任務所設計的成熟的庫和語言特性，Dart這些都有。舉例來說一個流行的庫是AngularDart，一個Dart版本的Angular。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它允許你寫非侵入式的類型安全的代碼，但是這不是必須的，因爲他們可以自動檢測類型。它可以允許你快速構建原型而不用過於思考細節，一旦你需要的時候，你可以加入類型讓它更健壯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至於在VM中的併發編程，相比與共享內存線程（Dart是單線程的）,Dart使用所謂的Isolates,有它自己的堆內存，而交流是通過傳遞信息。在瀏覽器上，情況就有點不一樣了：相比與創建一個新的isolates,你創建一個新的Workers。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// Example extracted from dartlang.org\nimport 'dart:async';\nimport 'dart:math' show Random;\n\nmain() async {\n print('Compute π using the Monte Carlo method.');\n await for (var estimate in computePi()) {\n print('π ≅ $estimate');\n }\n}\n\n/// Generates a stream of increasingly accurate estimates of π.\nStream computePi({int batch: 1000000}) async* {\n var total = 0;\n var count = 0;\n while (true) {\n var points = generateRandom().take(batch);\n var inside = points.where((p) => p.isInsideUnitCircle);\n total += batch;\n count += inside.length;\n var ratio = count / total;\n // Area of a circle is A = π⋅r², therefore π = A/r².\n // So, when given random points with x ∈ <0,1>,\n // y ∈ <0,1>, the ratio of those inside a unit circle\n // should approach π / 4\\. Therefore, the value of π\n // should be:\n yield ratio * 4;\n }\n}\n\nIterable generateRandom([int seed]) sync* {\n final random = new Random(seed);\n while (true) {\n yield new Point(random.nextDouble(), random.nextDouble());\n }\n}\n\nclass Point {\n final double x, y;\n const Point(this.x, this.y);\n bool get isInsideUnitCircle => x * x + y * y <= 1;\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4. Elm","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://elm-lang.org/","title":"","type":null},"content":[{"type":"text","text":"Get Started with Elm","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Elm是一個可以編譯成JS，HTML和JS的純函數式編程語言。你可以只通過Elm創建一個完整的網站，這使得它是一個對像React這樣的Javascript框架的一個很好的代替。通過它創建的應用自動使用了虛擬DOM庫，使得它很快。一個大的加分項是內建的結構讓你忘記數據流而是關注於數據聲明和邏輯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在Elm中，所有函數都是純粹的，這意味着他們總是對一個給予的輸入返回一個相同的輸出。T他們不能做其他任何事情，除非你指定。舉例來說，獲取一個遠程的API你會創建一個command函數來通訊外部世界，和一個 subscriptions 函數監聽回覆。另一個純粹的點是，值是不可變的，當你需要什麼的時候，你創建一個新值而不是改變它。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ELm的接受可以是平緩的；可以使用ports來和Javascript或其他庫溝通。雖然Elm還沒有到達版本1，它已經用於複雜大型的應用了，這使得它對複雜應用是一個可行的解決方案。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ELm其中一個吸引人的功能是初學者友好的編譯器，它生成幫助你修復你的代碼的信息，而不是產生難以閱讀的信息。如果你正在學習這門語言，編譯器本身就是一個大的幫助。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"module Main exposing (..)\n\nimport Html exposing (..)\n\n-- MAIN\n\nmain : Program Never Model Msg\nmain =\n Html.program\n { init = init\n , update = update\n , view = view\n , subscriptions = subscriptions\n }\n\n-- INIT\n\ntype alias Model = String\n\ninit : ( Model, Cmd Msg )\ninit = ( \"Hello World!\", Cmd.none )\n\n-- UPDATE\n\ntype Msg\n = DoNothing\n\nupdate : Msg -> Model -> ( Model, Cmd Msg )\nupdate msg model =\n case msg of\n DoNothing ->\n ( model, Cmd.none )\n\n-- VIEW\n\nview : Model -> Html Msg\nview model =\n div [] [text model]\n\n-- SUBSCRIPTIONS\n\nsubscriptions : Model -> Sub Msg\nsubscriptions model =\n Sub.none\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5. CoffeeScript","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://coffeescript.org/v2/#introduction","title":"","type":null},"content":[{"type":"text","text":"Get Started with CoffeeScript","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CoffeeScript是一個旨在暴露JavaScript的精華並提供一個乾淨的語法並在合適地方保留語義的語言。雖然近年來這個語言的熱度在下降，它正在改變方向並且現在有一個新的大版本支持ES2015+特性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你用CoffeeScript寫的代碼直接轉化爲可讀的Javascript代碼並且兼容現有的庫。從2版本開始，編譯器會產生兼容最新版本的ECMAScript的代碼，比如，每次你使用class，你就在Javascript中得到class。並且，如果你使用React，好消息是，JSX兼容CoffeeScript。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個編譯器有一個十分有特色的功能是有能力處理用literate style寫的代碼。literate style相比於強調代碼而把註釋作爲添加這種方式，而是你需要在一開始就寫註釋，代碼只是偶爾出現。這種寫代碼的方式由Donald Knuth推薦，使得一個代碼文件非常像一個技術文檔。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比於其他語言，CoffeeScript代碼可以在瀏覽器中用一個庫直接執行。所以如果你想要寫一個快速測試，你可以寫你的代碼在一個text/coffeescriptscript標籤中，並且引入編譯器，這樣就可以把你的代碼輕易的轉化爲JavaScript了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"# Assignment:\nnumber = 42\nopposite = true\n\n# Conditions:\nnumber = -42 if opposite\n\n# Functions:\nsquare = (x) -> x * x\n\n# Arrays:\nlist = [1, 2, 3, 4, 5]\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n\n# Existence:\nalert \"I knew it!\" if elvis?\n\n# Array comprehensions:\ncubes = (math.cube num for num in list)\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6. PureScript","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/purescript/purescript","title":"","type":null},"content":[{"type":"text","text":"Get Started with PureScript","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PureScript 是由 Phil Freeman 創建的純函數式強類型的編程語言。它旨在給可用的 JavaScript 庫提供強大的兼容性，在精神上類似於 Haskell，但保持 JavaScript 的核心。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PureScript 的一個強項是它的極簡主義。它不包括在其他語言中被認爲是必需的功能的任何庫。例如，不是編譯器本身包含生成器和 promises，而是你可以使用特定的庫來完成任務。你可以爲所需功能選擇想要的實現，這樣可以在使用 PureScript 時實現高效和個性化的體驗，同時保持生成的代碼儘可能小。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其編譯器的另一個顯著特徵就是能夠在保持與 JavaScript 的兼容性的同時， 用庫和工具生成整潔和可讀的代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像其他語言一樣，PureScript 有自己的構建工具叫做 Pulp，可以與 Gulp 進行比較， 但是用於以這種語言編寫的項目。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於類型系統，與 Elm不同，即另一種 ML 式的語言，PureScript 支持高級類型的功能，如取自 Haskell 的 higher-kinded types（高級類類型） 以及 type classes（類型類）， 從而允許創建複雜的抽象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"module Main where\n\nimport Prelude\nimport Data.Foldable (fold)\nimport TryPureScript\n\nmain =\n render $ fold\n [ h1 (text \"Try PureScript!\")\n , p (text \"Try out the examples below, or create your own!\")\n , h2 (text \"Examples\")\n , list (map fromExample examples)\n ]\n where\n fromExample { title, gist } =\n link (\"?gist=\" <> gist) (text title)\n\n examples =\n [ { title: \"Algebraic Data Types\"\n , gist: \"37c3c97f47a43f20c548\"\n }\n , { title: \"Loops\"\n , gist: \"cfdabdcd085d4ac3dc46\"\n }\n , { title: \"Operators\"\n , gist: \"3044550f29a7c5d3d0d0\"\n }\n ]\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7. Scala.js","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://www.scala-js.org/tutorial/basic/","title":"","type":null},"content":[{"type":"text","text":"Get Started with Scala.js","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Scala.js 是將 Scala 編程語言轉換成 JavaScript 語言的編譯器。Scala 語言的目標是合併面向對象編程和函數式編程到一種語言中來，並創建一套強有力的易於使用的工具。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲一種強類型語言，你可以在靈活的類型系統中獲取局部類型推斷的好處。其最大的價值在於可以被推測，但是它的函數參數還是需要強制類型說明。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然支持許多常見的面向對象模式（例如，每個值都是一個對象，操作是方法調用），但你也可以獲得函數特性，如支持一級函數和不可變數據結構。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Scala.js 的一個特殊優點是，你可以從熟悉的面向對象方式開始，並且按需要以自己的速度移動到更加函數的方式，而無需做大量的工作。此外，現有的 JavaScript 代碼和庫與你的 Scala 代碼兼容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新手 Scala 開發人員會發現這門語言與 JavaScript 沒有太大差異，比較下面的等效代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// JavaScript\nvar xhr = new XMLHttpRequest();\n\nxhr.open(\"GET\",\n \"https://api.twitter.com/1.1/search/\" +\n \"tweets.json?q=%23scalajs\"\n);\nxhr.onload = (e) => {\n if (xhr.status === 200) {\n var r = JSON.parse(xhr.responseText);\n $(\"#tweets\").html(parseTweets(r));\n }\n};\nxhr.send();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// Scala.js\nval xhr = new XMLHttpRequest()\n\nxhr.open(\"GET\",\n \"https://api.twitter.com/1.1/search/\" +\n \"tweets.json?q=%23scalajs\"\n)\nxhr.onload = { (e: Event) =>\n if (xhr.status == 200) {\n val r = JSON.parse(xhr.responseText)\n $(\"#tweets\").html(parseTweets(r))\n }\n}\nxhr.send()\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"8. Reason","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站：","attrs":{}},{"type":"link","attrs":{"href":"https://reasonml.github.io/docs/en/installation.html","title":"","type":null},"content":[{"type":"text","text":"Get Started with Reason","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Reason是一個由Facebook創造和維護的語言，它爲OCaml編譯器提供了新的語法，並且代碼可以轉換成JavaScript和原生代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲ML家族的一部分並且自己本身是函數式語言，它天生提供了強大但是靈活的伴隨類型推斷的類型系統，代數數據類型和模式匹配。它也支持不可變數據類型和參數多態（也被其他語言稱爲泛型），但是在OCaml中，也是支持面向對象編程的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過 bucklescript綁定就可以使用現存的JavaScript庫。你也可以在你的Reason代碼旁邊混入你的JavaScript。插入的JavaScript代碼不會嚴格的檢查，但作爲快速修復和原因也是不錯的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你是一個React開發者，綁定是可能的，並且這個語言也支持JSX。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* A type variant being pattern matched */\n\nlet possiblyNullValue1 = None;\nlet possiblyNullValue2 = Some \"Hello@\";\n\nswitch possiblyNullValue2 {\n| None => print_endline \"Nothing to see here.\"\n| Some message => print_endline message\n};\n\n/* Parametrized types */\n\ntype universityStudent = {gpa: float};\ntype response 'studentType = {status: int, student: 'studentType};\nlet result: response universityStudent = fetchDataFromServer ();\n\n/* A simple typed object */\n\ntype payload = Js.t {.\n name: string,\n age: int\n};\nlet obj1: payload = {\"name\": \"John\", \"age\": 30};\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"介紹了這麼多可以編譯爲JavaScript的語言，並不是說要放棄JavaScript，現在主流前端開發是使用 TypeScript，JavaScript 現在也變得越來越好，不管哪種語言，適合的纔是最好的。","attrs":{}}]}]}