源：https://www.sitepoint.com/

現(xiàn)代應(yīng)用相比普通的網(wǎng)頁有不同的要求。但是瀏覽器是一個(gè)有著一套（大部分）固定可用的技術(shù)的平臺(tái)，JavaScript依然是web應(yīng)用的核心語言；任何需要在瀏覽器上跑的應(yīng)用都需要使用這種語言。

我們都知道Javascript并不是最好的語言，特別是在復(fù)雜的應(yīng)用中，它可能不太能勝任。為了避免這種情況，一些新的語言或現(xiàn)有語言的編譯器被創(chuàng)造出來，你不用寫一行Javascript或者考慮這種語言的局限，就能生產(chǎn)在瀏覽器能運(yùn)行的代碼。

這篇文章包括了十種有趣的語言能夠編譯為Javascript，在瀏覽器或者Node.js中被執(zhí)行。

--ADVERTISEMENT--

Dart

Dart是一個(gè)典型的面向?qū)ο蟮恼Z言，任何東西都是一個(gè)對(duì)象并且任何對(duì)象都是一個(gè)類的實(shí)例（對(duì)象也可以表現(xiàn)為函數(shù)）。它的特殊性用于打造面向?yàn)g覽器，服務(wù)器和移動(dòng)設(shè)備的應(yīng)用。它由谷歌來維護(hù)，是用于驅(qū)動(dòng)下一代的AdWords UI。AdWords UI是谷歌盈利的重要產(chǎn)品，這也證明了它在體量上的強(qiáng)大。

這種語言可以編譯為JavaScript用于瀏覽器，或者直接通過Dart VM解釋，這樣也可以允許你構(gòu)建服務(wù)端應(yīng)用。移動(dòng)應(yīng)用可以通過Flutter SDK創(chuàng)建。

復(fù)雜的應(yīng)用還需要一系列特別為任務(wù)所設(shè)計(jì)的成熟的庫和語言特性，Dart這些都有。舉例來說一個(gè)流行的庫是AngularDart，一個(gè)Dart版本的Angular。

它允許你寫非侵入式的類型安全的代碼，但是這不是必須的，因?yàn)樗麄兛梢宰詣?dòng)檢測(cè)類型。它可以允許你快速構(gòu)建原型而不用過于思考細(xì)節(jié)，一旦你需要的時(shí)候，你可以加入類型讓它更健壯。

至于在VM中的并發(fā)編程，相比與共享內(nèi)存線程（Dart是單線程的）,Dart使用所謂的_Isolates_,有它自己的堆內(nèi)存，而交流是通過傳遞信息。在瀏覽器上，情況就有點(diǎn)不一樣了：相比與創(chuàng)建一個(gè)新的_isolates_,你創(chuàng)建一個(gè)新的_Workers_。

// Example extracted from dartlang.org

import 'dart:async';

import 'dart:math' show Random;

main() async {

print('Compute π using the Monte Carlo method.');

await for (var estimate in computePi()) {

print('π ? $estimate');

}

}

/// Generates a stream of increasingly accurate estimates of π.

Stream<double> computePi({int batch: 1000000}) async* {

var total = 0;

var count = 0;

while (true) {

var points = generateRandom().take(batch);

var inside = points.where((p) => p.isInsideUnitCircle);

total += batch;

count += inside.length;

var ratio = count / total;

// Area of a circle is A = π?r2, therefore π = A/r2.

// So, when given random points with x ∈ <0,1>,

// y ∈ <0,1>, the ratio of those inside a unit circle

// should approach π / 4\. Therefore, the value of π

// should be:

yield ratio * 4;

}

}

Iterable<Point> generateRandom([int seed]) sync* {

final random = new Random(seed);

while (true) {

yield new Point(random.nextDouble(), random.nextDouble());

}

}

class Point {

final double x, y;

const Point(this.x, this.y);

bool get isInsideUnitCircle => x * x + y * y <= 1;

}

Get started with Dart https://www.dartlang.org/guides/get-started

TypeScript

TypeScript 是Javascript的超集；一個(gè)有效的Javascript項(xiàng)目也是一個(gè)有效的TypeScript項(xiàng)目只是添加了靜態(tài)類型。編譯器也可以作為ES2015+到當(dāng)前實(shí)現(xiàn)的轉(zhuǎn)譯器，這樣你總是能得到最新的特性。

不同于其他語言，TypeScript保持了Javascript完整的精神，只是此外添加了增加代碼可靠性的功能。這些功能就是類型注釋和其他類型相關(guān)的功能，得益于專業(yè)工具像是靜態(tài)分析器和其他工具在重構(gòu)過程的加入，這些功能使寫Javascript更加有趣。并且，類型的加入改善了你的應(yīng)用不同組件之間的接口。

類型診斷是支持性的，你不必從一開始就寫所有的類型。你可以先快速的寫代碼，然后再加入類型來讓代碼更穩(wěn)定。

TypeScript同樣也支持高級(jí)類型，像是交叉類型，聯(lián)合類型，類型別名，可辨識(shí)聯(lián)合和類型保護(hù)。你可以在TypeScript Documentation網(wǎng)站的Advanced Types頁面查看。

如果你使用React的話，通過添加React類型，JSX也是支持的。

class Person {

private name: string;

private age: number;

private salary: number;

constructor(name: string, age: number, salary: number) {

this.name = name;

this.age = age;

this.salary = salary;

}

toString(): string {

return `${this.name} (${this.age}) (${this.salary})`;

}

}

——

Elm

Elm是一個(gè)可以編譯成JS，HTML和JS的純函數(shù)式編程語言。你可以只通過Elm創(chuàng)建一個(gè)完整的網(wǎng)站，這使得它是一個(gè)對(duì)像React這樣的Javascript框架的一個(gè)很好的代替。通過它創(chuàng)建的應(yīng)用自動(dòng)使用了虛擬DOM庫，使得它很快。一個(gè)大的加分項(xiàng)是內(nèi)建的結(jié)構(gòu)讓你忘記數(shù)據(jù)流而是關(guān)注于數(shù)據(jù)聲明和邏輯。

在Elm中，所有函數(shù)都是純粹的，這意味著他們總是對(duì)一個(gè)給予的輸入返回一個(gè)相同的輸出。T他們不能做其他任何事情，除非你指定。舉例來說，獲取一個(gè)遠(yuǎn)程的API你會(huì)創(chuàng)建一個(gè)_command_函數(shù)來通訊外部世界，和一個(gè) subscriptions 函數(shù)監(jiān)聽回復(fù)。另一個(gè)純粹的點(diǎn)是，值是不可變的，當(dāng)你需要什么的時(shí)候，你創(chuàng)建一個(gè)新值而不是改變它。

ELm的接受可以是平緩的；可以使用_ports_來和Javascript或其他庫溝通。雖然Elm還沒有到達(dá)版本1，它已經(jīng)用于復(fù)雜大型的應(yīng)用了，這使得它對(duì)復(fù)雜應(yīng)用是一個(gè)可行的解決方案。

ELm其中一個(gè)吸引人的功能是初學(xué)者友好的編譯器，它生成幫助你修復(fù)你的代碼的信息，而不是產(chǎn)生難以閱讀的信息。如果你正在學(xué)習(xí)這門語言，編譯器本身就是一個(gè)大的幫助。

module Main exposing (..)
import Html exposing (..)
-- MAIN
main : Program Never Model Msg
main =
 Html.program
 { init = init
 , update = update
 , view = view
 , subscriptions = subscriptions
 }
-- INIT
type alias Model = String
init : ( Model, Cmd Msg )
init = ( "Hello World!", Cmd.none )
-- UPDATE
type Msg
 = DoNothing
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
 case msg of
 DoNothing ->
 ( model, Cmd.none )
-- VIEW
view : Model -> Html Msg
view model =
 div [] [text model]
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
 Sub.none

Get Started with Elm:https://www.sitepoint.com/functional-reactive-programming-elm-introduction/

PureScript

PureScript 是一個(gè)純函數(shù)強(qiáng)類型的編程語言，由Phil Freeman創(chuàng)造。它旨在與現(xiàn)有的JavaScript庫進(jìn)行很好的兼容，與Haskell精神上類似，但是核心保留了Javascript。

PureScript一個(gè)重要的點(diǎn)是它的極簡主義。它沒有包含任何在其他語言認(rèn)為很重要的功能庫。比如，相比于在編譯器中包含generators和promises，你可以自己使用指定的庫來完成這個(gè)任務(wù)。你可以選擇你想要的功能的實(shí)現(xiàn)，當(dāng)使用PureScript的時(shí)候需要高效和個(gè)性化的經(jīng)驗(yàn)，能使生成的代碼盡可能的小。

這個(gè)編譯器另一個(gè)重要的功能是構(gòu)建出清晰可讀的代碼，能夠兼容Javascript包括庫和工具。

和其他語言一樣，PureScript有它自己的構(gòu)建工具稱為Pulp，可以和Gulp做對(duì)比，只是用這個(gè)語言寫的。

至于類型系統(tǒng)，不同于另一個(gè)ML類的語言Elm，PureScript支持更先進(jìn)的類型特性比如高級(jí)類類型和類型類，這些是從Haskell來的特性，允許創(chuàng)建復(fù)雜的抽象。

module Main where
import Prelude
import Data.Foldable (fold)
import TryPureScript
main =
 render $ fold
 [ h1 (text "Try PureScript!")
 , p (text "Try out the examples below, or create your own!")
 , h2 (text "Examples")
 , list (map fromExample examples)
 ]
 where
 fromExample { title, gist } =
 link ("?gist=" <> gist) (text title)
 examples =
 [ { title: "Algebraic Data Types"
 , gist: "37c3c97f47a43f20c548"
 }
 , { title: "Loops"
 , gist: "cfdabdcd085d4ac3dc46"
 }
 , { title: "Operators"
 , gist: "3044550f29a7c5d3d0d0"
 }
 ]

Get Started with PureScripthttps://github.com/purescript/documentation/blob/master/guides/Getting-Started.md

CoffeeScript

CoffeeScript是一個(gè)旨在暴露JavaScript的精華并提供一個(gè)干凈的語法并在合適地方保留語義的語言。雖然近年來這個(gè)語言的熱度在下降，它正在改變方向并且現(xiàn)在有一個(gè)新的大版本支持ES2015+特性。

你用CoffeeScript寫的代碼直接轉(zhuǎn)化為可讀的Javascript代碼并且兼容現(xiàn)有的庫。從2版本開始，編譯器會(huì)產(chǎn)生兼容最新版本的ECMAScript的代碼，比如，每次你使用class，你就在Javascript中得到class。并且，如果你使用React，好消息是，JSX兼容CoffeeScript。

這個(gè)編譯器有一個(gè)十分有特色的功能是有能力處理用literate style寫的代碼。literate style相比于強(qiáng)調(diào)代碼而把注釋作為添加這種方式，而是你需要在一開始就寫注釋，代碼只是偶爾出現(xiàn)。這種寫代碼的方式由Donald Knuth推薦，使得一個(gè)代碼文件非常像一個(gè)技術(shù)文檔。

相比于其他語言，CoffeeScript代碼可以在瀏覽器中用一個(gè)庫直接執(zhí)行。所以如果你想要寫一個(gè)快速測(cè)試，你可以寫你的代碼在一個(gè)text/coffeescriptscript標(biāo)簽中，并且引入編譯器，這樣就可以把你的代碼輕易的轉(zhuǎn)化為JavaScript了。

# Assignment:
number = 42
opposite = true
# Conditions:
number = -42 if opposite
# Functions:
square = (x) -> x * x
# Arrays:
list = [1, 2, 3, 4, 5]
# Objects:
math =
 root: Math.sqrt
 square: square
 cube: (x) -> x * square x
# Splats:
race = (winner, runners...) ->
 print winner, runners
# Existence:
alert "I knew it!" if elvis?
# Array comprehensions:
cubes = (math.cube num for num in list)

Get Started with CoffeeScript http://coffeescript.org/v2/#coffeescript-2

ClojureScript

ClojureScript是一個(gè)轉(zhuǎn)化Clojure編程語言為JavaScript的編譯器。Clojure是一個(gè)多用途的函數(shù)式原因伴隨著動(dòng)態(tài)類型和不可變數(shù)據(jù)結(jié)構(gòu)的支持。

這是這個(gè)列表中唯一一個(gè)屬于Lisp家族的語言，自然有著它們共同的特性。舉例來說，代碼可以作為數(shù)據(jù)，支持宏系統(tǒng)，使得元編程成為可能。Unlike other Lisps, Clojure has support for immutable data structures, making the management of side-effects easier.不同于其他類Lisp，Clojure支持不可變數(shù)據(jù)結(jié)構(gòu)，使得函數(shù)副作用的管理更容易。

這個(gè)語法對(duì)初學(xué)者看起嚇人，因?yàn)閳A括號(hào)的使用。但這樣使用是經(jīng)過深思熟慮的，并且在長遠(yuǎn)看來你一定會(huì)感謝這種語法的。語法的極簡和抽象能力使得Lisp成為一個(gè)解決高抽象問題的強(qiáng)力工具。

雖然Clojure主要是一個(gè)函數(shù)式語言，但是不像PureScript或者Elm那樣純粹。函數(shù)副作用還是會(huì)發(fā)生，但是其他函數(shù)式特性也會(huì)存在。

ClojureScript使用Google Closure做代碼優(yōu)化并且也兼容現(xiàn)有的JavaScript庫。

; Extracted from https://github.com/clojure/clojurescript/blob/master/samples/dom/src/dom/test.cljs
(ns dom.test
 (:require [clojure.browser.event :as event]
 [clojure.browser.dom :as dom]))
(defn log [& args]
 (.log js/console (apply pr-str args)))
(defn log-obj [obj]
 (.log js/console obj))
(defn log-listener-count []
 (log "listener count: " (event/total-listener-count)))
(def source (dom/get-element "source"))
(def destination (dom/get-element "destination"))
(dom/append source
 (dom/element "Testing me ")
 (dom/element "out!"))
(def success-count (atom 0))
(log-listener-count)
(event/listen source
 :click
 (fn [e]
 (let [i (swap! success-count inc)
 e (dom/element :li
 {:id "testing"
 :class "test me out please"}
 "It worked!")]
 (log-obj e)
 (log i)
 (dom/append destination
 e))))
(log-obj (dom/element "Text node"))
(log-obj (dom/element :li))
(log-obj (dom/element :li {:class "foo"}))
(log-obj (dom/element :li {:class "bar"} "text node"))
(log-obj (dom/element [:ul [:li :li :li]]))
(log-obj (dom/element :ul [:li :li :li]))
(log-obj (dom/element :li {} [:ul {} [:li :li :li]]))
(log-obj (dom/element [:li {:class "baz"} [:li {:class "quux"}]]))
(log-obj source)
(log-listener-count)

Get Started with ClojureScript https://clojurescript.org/guides/quick-start

Scala.js

Scala.js是一個(gè)將Scala編程語言轉(zhuǎn)化為JavaScript的編譯器。Scala是一個(gè)旨在融合面向?qū)ο蠛秃瘮?shù)式編程兩種思想到一種語言，為了打造容易接受的強(qiáng)力的工具

作為一個(gè)強(qiáng)類型語言，你會(huì)從它部分類型推斷這種靈活的類型系統(tǒng)中受益。大部分的值會(huì)被推斷，但函數(shù)參數(shù)仍然需要明確的類型注釋。

雖然許多通常的面向?qū)ο竽Ｊ蕉贾С郑ū热缛魏沃刀际且粋€(gè)對(duì)象并且操作是一個(gè)方法調(diào)用），但你也有函數(shù)式特性比如一等函數(shù)和不可變數(shù)據(jù)結(jié)構(gòu)。

Scala.js其中一個(gè)特殊的優(yōu)勢(shì)是，你可以毫不費(fèi)力的從你熟悉的面向?qū)ο箝_始向更函數(shù)式的轉(zhuǎn)移，以你自己的需要和步調(diào)。同樣的，現(xiàn)存的JavaScript代碼和庫和你的Scala代碼兼容。

Scala的初學(xué)者會(huì)發(fā)現(xiàn)這個(gè)語言和JavaScript并沒有多大不同，對(duì)比下面兩個(gè)意思一樣的代碼：

// JavaScript

var xhr = new XMLHttpRequest();

xhr.open("GET",

"https://api.twitter.com/1.1/search/" +

"tweets.json?q=%23scalajs"

);

xhr.onload = (e) => {

if (xhr.status === 200) {

var r = JSON.parse(xhr.responseText);

$("#tweets").html(parseTweets(r));

}

};

xhr.send();

// Scala.js

val xhr = new XMLHttpRequest()

xhr.open("GET",

"https://api.twitter.com/1.1/search/" +

"tweets.json?q=%23scalajs"

)

xhr.onload = { (e: Event) =>

if (xhr.status == 200) {

val r = JSON.parse(xhr.responseText)

$("#tweets").html(parseTweets(r))

}

}

xhr.send()

Get Started with Scala.jshttps://www.scala-js.org/tutorial/basic/

Reason

Reason是一個(gè)由Facebook創(chuàng)造和維護(hù)的語言，它為OCaml編譯器提供了新的語法，并且代碼可以轉(zhuǎn)換成JavaScript和原生代碼。

作為ML家族的一部分并且自己本身是函數(shù)式語言，它天生提供了強(qiáng)大但是靈活的伴隨類型推斷的類型系統(tǒng)，代數(shù)數(shù)據(jù)類型和模式匹配。它也支持不可變數(shù)據(jù)類型和參數(shù)多態(tài)（也被其他語言稱為泛型），但是在OCaml中，也是支持面向?qū)ο缶幊痰摹?/p>

通過 bucklescript綁定就可以使用現(xiàn)存的JavaScript庫。你也可以在你的Reason代碼旁邊混入你的JavaScript。插入的JavaScript代碼不會(huì)嚴(yán)格的檢查，但作為快速修復(fù)和原因也是不錯(cuò)的。

如果你是一個(gè)React開發(fā)者，綁定是可能的，并且這個(gè)語言也支持JSX。

/* A type variant being pattern matched */
let possiblyNullValue1 = None;
let possiblyNullValue2 = Some "Hello@";
switch possiblyNullValue2 {
| None => print_endline "Nothing to see here."
| Some message => print_endline message
};
/* Parametrized types */
type universityStudent = {gpa: float};
type response 'studentType = {status: int, student: 'studentType};
let result: response universityStudent = fetchDataFromServer ();
/* A simple typed object */
type payload = Js.t {.
 name: string,
 age: int
};
let obj1: payload = {"name": "John", "age": 30};

Get Started with Reason https://reasonml.github.io/guide/javascript/quickstart

Haxe

Haxe是一個(gè)多范式編程語言，并且它的編譯器可以產(chǎn)生二進(jìn)制或者其他語言的源代碼。

雖然Haxe提供了嚴(yán)格的類型系統(tǒng)并帶有類型推斷，它也可以作為動(dòng)態(tài)語言只要目標(biāo)語言支持。同樣的，它也支持多種的編程風(fēng)格比如面向?qū)ο螅盒停瘮?shù)式。

當(dāng)你寫Haxe代碼的時(shí)候，你可以為編譯指定多個(gè)平臺(tái)或語言，但不需要對(duì)代碼做什么大的改變。指定目標(biāo)的代碼塊也支持。

你可以用Haxe同時(shí)寫前端和后端用同樣的代碼，并且通過Haxe Remoting進(jìn)行溝通，既可以同步連接也可以異步連接。

不出所料，Haxe代碼可以兼容現(xiàn)有的庫但也提供了成熟的標(biāo)準(zhǔn)庫。

// Example extracted from http://code.haxe.org

extern class Database {

function new();

function getProperty<T>(property:Property<T>):T;

function setProperty<T>(property:Property<T>, value:T):Void;

}

abstract Property<T>(String) {

public inline function new(name) {

this = name;

}

}

class Main {

static inline var PLAYER_NAME = new Property<String>("playerName");

static inline var PLAYER_LEVEL = new Property<Int>("playerLevel");

static function main() {

var db = new Database();

var playerName = db.getProperty(PLAYER_NAME);

trace(playerName.toUpperCase());

db.setProperty(PLAYER_LEVEL, 1);

}

}

Get Started with Reasonhttps://haxe.org/documentation/introduction/language-introduction.html

Nim

Nim是一個(gè)靜態(tài)類型，多范式編程語言，有著極簡風(fēng)格與空格敏感的語法，編譯為C，C++和JavaScript。

這個(gè)語言本身很小，但它的元編程能力會(huì)吸引你自己去實(shí)現(xiàn)一些在別的語言內(nèi)置的功能。這些構(gòu)建模塊有宏，模板和泛型，通過它們你可以實(shí)現(xiàn)不論是簡單的功能還是不同的泛型。這使得Nim成為一個(gè)非常通用的語言可以適應(yīng)你的需求，有著Lisp的精髓。

Nim的語法抽象功能允許你去讓語言去適應(yīng)你的功能，讓真正的[DSLs][20]成為可能。如果你有著專門的任務(wù)需要處理，你可以獲得更高級(jí)的表達(dá)性。

# Reverse a string
proc reverse(s: string): string =
 result = ""
 for i in countdown(high(s), 0):
 result.add s[i]
var str1 = "Reverse This!"
echo "Reversed: ", reverse(str1)
# Using templates
template genType(name, fieldname: expr, fieldtype: typedesc) =
 type
 name = object
 fieldname: fieldtype
genType(Test, foo, int)
var x = Test(foo: 4566)
echo(x.foo) # 4566

Get Started with Nimhttps://nim-lang.org/documentation.html

結(jié)尾

如果JavaScript不是你最喜歡的語言，你依然可以創(chuàng)建web應(yīng)用而不用忍受這個(gè)技術(shù)的缺點(diǎn)。可供選擇的范圍很廣，從純粹的函數(shù)式語言，比如PureScript，到面向?qū)ο笳Z言，比如Dart。并且如果你想要不只是語言的轉(zhuǎn)化，你也可以選擇比如Elm，Elm提供像是虛擬DOM和內(nèi)置的架構(gòu)這樣的工具。

你是否有嘗試了這篇文章的任何一種語言，又或者你有自己的推薦？請(qǐng)?jiān)谠u(píng)論中讓我知道！