可編譯成javascript的語言有哪些

這篇文章主要介紹了可編譯成javascript的語言有哪些，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

本文列出了十種有趣的語言，它們可以編譯成JavaScript，以便在瀏覽器或Node.js之類的平臺(tái)上執(zhí)行。

現(xiàn)代應(yīng)用程序與簡(jiǎn)單的網(wǎng)站有不同的要求。但是瀏覽器是一個(gè)擁有(大部分)固定可用技術(shù)的平臺(tái)，JavaScript仍然是web應(yīng)用程序的核心語言。任何需要在瀏覽器中運(yùn)行的應(yīng)用程序都必須用這種語言實(shí)現(xiàn)。

我們都知道JavaScript并不是每個(gè)任務(wù)的最佳語言，當(dāng)涉及到復(fù)雜的應(yīng)用程序時(shí)，它可能會(huì)有不足之處。

為了避免這個(gè)問題，已經(jīng)創(chuàng)建了幾種新語言和現(xiàn)有語言的轉(zhuǎn)置器，它們都生成了可以在瀏覽器中工作的代碼，而不需要編寫任何JavaScript行，也不需要考慮該語言的限制。

Dart

DART是一種經(jīng)典的面向?qū)ο笳Z言，其中所有內(nèi)容都是對(duì)象，任何對(duì)象都是類的實(shí)例（對(duì)象也可以充當(dāng)函數(shù)）。它是專門為瀏覽器、服務(wù)器和移動(dòng)設(shè)備構(gòu)建應(yīng)用程序的。

它是由谷歌維護(hù)的，是下一代adwords用戶界面的驅(qū)動(dòng)語言，是谷歌最重要的收入產(chǎn)品，這本身就是它在規(guī)模上強(qiáng)大的證明。

該語言可以轉(zhuǎn)換為JavaScript以在瀏覽器中使用，也可以由Dart VM直接解釋，從而也可以構(gòu)建服務(wù)器應(yīng)用程序。 可以使用Flutter SDK制作移動(dòng)應(yīng)用程序。

復(fù)雜的應(yīng)用程序還需要為該任務(wù)專門設(shè)計(jì)的一組成熟的庫和語言特性，Dart包括所有這些。一個(gè)流行庫的例子是AngularDart，它是Dart的Angular版本。

它允許您編寫類型安全的代碼，而不會(huì)太麻煩。您可以編寫類型，但不需要這樣做，*因?yàn)榭梢酝茢嗨鼈?。這允許快速構(gòu)建原型，而不必過多考慮細(xì)節(jié)，但是一旦您有了工作，您就可以添加類型，使其更加健壯。

關(guān)于VM中的并發(fā)編程，Dart不是使用共享內(nèi)存線程(Dart是單線程的)，而是使用他們所謂的隔離內(nèi)存堆，在那里使用消息來實(shí)現(xiàn)通信。在瀏覽器中，情況有點(diǎn)不同:不是創(chuàng)建新的隔離，而是創(chuàng)建新的worker。

// 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;
}

TypeScript

TypeScript是JavaScript的超集。一個(gè)有效的JavaScript程序也是有效的TypeScript，但是添加了靜態(tài)類型。編譯器還可以作為從ES2015+到當(dāng)前實(shí)現(xiàn)的轉(zhuǎn)換程序，因此您總是可以獲得最新的特性。

與許多其他語言不同，TypeScript保留了JavaScript的精神，只是添加了一些特性來提高代碼的健壯性。這些是類型注釋和其他與類型相關(guān)的功能，它們使編寫JavaScript更加令人愉快，這要感謝支持靜態(tài)分析程序等專門工具和其他工具來幫助重構(gòu)過程。

此外，添加類型還可以改進(jìn)應(yīng)用程序不同組件之間的接口。

支持類型推斷，因此不必從頭編寫所有類型。您可以編寫快速的解決方案，然后添加所有類型，以便對(duì)您的代碼有信心。

TypeScript還支持高級(jí)類型，比如交集類型、聯(lián)合類型、類型別名、區(qū)分的聯(lián)合和類型保護(hù)。您可以在TypeScript文檔站點(diǎn)的高級(jí)類型頁面中查看所有這些。

如果使用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是一種純函數(shù)式編程語言，可以編譯為JavaScript、HTML和CSS。您可以使用Elm構(gòu)建一個(gè)完整的站點(diǎn)，使其成為React等JavaScript框架的一個(gè)很好的替代品。

使用它構(gòu)建的應(yīng)用程序自動(dòng)使用一個(gè)虛擬DOM庫，使其運(yùn)行非?？?。一個(gè)很大的優(yōu)點(diǎn)是內(nèi)置的體系結(jié)構(gòu)，它使您忘記了數(shù)據(jù)流，轉(zhuǎn)而專注于數(shù)據(jù)聲明和邏輯。

在Elm中，所有函數(shù)都是純函數(shù)，這意味著對(duì)于給定的輸入，它們總是返回相同的輸出。他們不能做任何事情，除非你指定它。例如，要訪問遠(yuǎn)程API，您需要?jiǎng)?chuàng)建命令函數(shù)來與外部世界通信，并創(chuàng)建訂閱來偵聽響應(yīng)。

純度的另一點(diǎn)是，值是不可變的:當(dāng)您需要某些東西時(shí)，您創(chuàng)建新的值，而不是修改它們。

Elm的采用可以是漸進(jìn)的?？梢允褂枚丝谂cJavaScript和其他庫通信。雖然Elm還沒有達(dá)到版本1，但是它已經(jīng)被用于復(fù)雜和大型應(yīng)用程序，這使得它成為復(fù)雜應(yīng)用程序的可行解決方案。

Elm最吸引人的特性之一是初學(xué)者友好的編譯器，它不是生成難以閱讀的消息，而是生成幫助您修復(fù)代碼的代碼。如果你正在學(xué)習(xí)這門語言，編譯器本身會(huì)有很大的幫助。

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

PureScript

purescript是一種純功能的強(qiáng)類型編程語言，由phil freeman創(chuàng)建。它的目標(biāo)是提供與可用javascript庫的強(qiáng)兼容性，在精神上類似于haskell，但保持javascript的核心。

PureScript的一個(gè)優(yōu)點(diǎn)是它的極簡(jiǎn)主義。它不包含任何在其他語言中被認(rèn)為是必不可少的功能庫。例如，您可以為任務(wù)使用特定的庫，而不是在編譯器本身中包含生成器和承諾。

您可以為您需要的特性選擇您想要的實(shí)現(xiàn)，這允許在使用PureScript時(shí)獲得高效和個(gè)性化的體驗(yàn)，同時(shí)使生成的代碼盡可能小。

它的編譯器的另一個(gè)獨(dú)特的特性是，在保持與JavaScript兼容的同時(shí)，能夠生成干凈且可讀的代碼，包括庫和工具。

與其他語言一樣，PureScript也有自己的構(gòu)建工具Pulp，它可以與Gulp進(jìn)行比較，但是對(duì)于用這種語言編寫的項(xiàng)目來說。

關(guān)于類型系統(tǒng)——不像Elm，它是另一種類似于ml的語言——PureScript支持高級(jí)類型特性，比如高級(jí)類型和類型類，它們來自Haskell，允許創(chuàng)建復(fù)雜的抽象:

module Main where

import Prelude
import Data.Foldable (fold)
import TryPureScript

main =
    render $ fold
      [ h2 (text "Try PureScript!")
      , p (text "Try out the examples below, or create your own!")
      , h3 (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"
        }
      ]

要使用purescript執(zhí)行下一步，請(qǐng)查看github上的purescript入門指南。

CoffeeScript

CoffeeScript是一種語言，旨在公開JavaScript的優(yōu)秀部分，同時(shí)提供更干凈的語法和保持語義。盡管近年來該語言的受歡迎程度有所下降，但它正在改變方向，最近又獲得了一個(gè)新的主要版本，支持ES2015+特性。

您在CoffeeScript中編寫的代碼將直接轉(zhuǎn)換為可讀的JavaScript代碼，并保持與現(xiàn)有庫的兼容性。 從版本2開始，編譯器將生成與最新版本的ECMAScript兼容的代碼。

例如，每次使用類時(shí)，您都會(huì)在JavaScript中獲得一個(gè)類。 另外，如果您使用React，則有個(gè)好消息：JSX與CoffeeScript兼容。

編譯器的一個(gè)非常獨(dú)特的功能是能夠處理以素養(yǎng)風(fēng)格編寫的代碼，您無需在代碼中強(qiáng)調(diào)重點(diǎn)和添加注釋，而是首先編寫注釋，并且代碼僅偶爾出現(xiàn)。 Donald Knuth引入了這種編程風(fēng)格，使代碼文件與技術(shù)文章非常相似。

與其他語言不同，CoffeeScript代碼可以在瀏覽器中使用庫直接解釋。因此，如果你想創(chuàng)建一個(gè)快速測(cè)試，你可以用text/coffeescript腳本標(biāo)簽編寫代碼，并包含編譯器，編譯器會(huì)實(shí)時(shí)將代碼翻譯成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)

coffeescript站點(diǎn)有一個(gè)方便的coffeescript 2資源入門。

ClojureScript

ClojureScript是一個(gè)編譯器，它將Clojure編程語言翻譯成JavaScript。它是一種通用的函數(shù)式語言，具有動(dòng)態(tài)類型和對(duì)不可變數(shù)據(jù)結(jié)構(gòu)的支持。

它是這個(gè)列表中唯一屬于Lisp編程語言家族的，并且自然地，它共享了許多特性。例如，可以將代碼視為數(shù)據(jù)，并且可以使用宏系統(tǒng)，從而使元編程技術(shù)成為可能。與其他lisp不同，Clojure支持不可變的數(shù)據(jù)結(jié)構(gòu)，這使得副作用的管理更加容易。

由于使用了括號(hào)，語法對(duì)新手來說可能有些嚇人，但這樣做有其深刻的原因，從長遠(yuǎn)來看，您肯定會(huì)喜歡它。語法中的這種極簡(jiǎn)主義及其語法抽象功能使Lisp成為解決需要高抽象級(jí)別的問題的強(qiáng)大工具。

雖然Clojure主要是一種函數(shù)式語言，但它不像PureScript或Elm那樣純粹。副作用仍然可能發(fā)生，但是其他功能特性仍然存在。

ClojureScript使用谷歌閉包進(jìn)行代碼優(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)

要了解更多，請(qǐng)?jiān)L問ClojureScript站點(diǎn)的ClojureScript資源入門。

Scala.js

Scala.js是將Scala編程語言轉(zhuǎn)換為JavaScript的編譯器。 Scala是一種語言，旨在將來自面向?qū)ο蠛秃瘮?shù)式編程的思想融合為一種語言，以創(chuàng)建功能強(qiáng)大且易于采用的工具。

作為一種強(qiáng)類型語言，您可以從具有部分類型推斷的靈活類型系統(tǒng)中獲益。大多數(shù)值都可以推斷，但是函數(shù)參數(shù)仍然需要顯式的類型注釋。

雖然支持許多常見的面向?qū)ο竽Ｊ?例如，每個(gè)值都是一個(gè)對(duì)象，操作是方法調(diào)用)，但是也可以獲得一些函數(shù)特性，比如支持一流函數(shù)和不可變數(shù)據(jù)結(jié)構(gòu)。

Scala.js的一個(gè)特殊優(yōu)勢(shì)是，您可以從熟悉的面向?qū)ο蟮姆椒ㄩ_始，然后根據(jù)需要以自己的速度遷移到功能更強(qiáng)的方法，而不需要做很多工作。另外，現(xiàn)有的JavaScript代碼和庫與Scala代碼兼容。

初學(xué)Scala的開發(fā)人員會(huì)發(fā)現(xiàn)這種語言與JavaScript并沒有太大的不同。比較以下等價(jià)代碼:

// 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()

查看scala.js“scala.js入門”文檔了解更多信息。

Reason

Reason是Facebook創(chuàng)建和維護(hù)的一種語言，它為OCaml編譯器提供了一種新的語法，代碼可以翻譯成JavaScript和原生代碼。

作為ml家族和函數(shù)語言本身的一部分，它自然提供了一個(gè)強(qiáng)大而靈活的類型系統(tǒng)，包括推理、代數(shù)數(shù)據(jù)類型和模式匹配。它還支持不可變的數(shù)據(jù)類型和參數(shù)多態(tài)性（在其他語言中也稱為泛型），但與ocaml一樣，也支持面向?qū)ο缶幊獭?/p>

使用現(xiàn)有的JavaScript庫可以使用bucklescript綁定。您還可以在理性代碼中混合使用JavaScript。插入的JavaScript代碼不會(huì)被嚴(yán)格檢查，但是對(duì)于快速修復(fù)或原型來說，它工作得很好。

如果您是react開發(fā)人員，則可以使用綁定，并且該語言還支持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};

查看Reason站點(diǎn)的《Reason Guide入門》了解更多信息。

Haxe

Haxe是一種多范式編程語言，它的編譯器可以用其他語言生成二進(jìn)制文件和源代碼。

雖然Haxe提供了一個(gè)支持類型推斷的嚴(yán)格類型系統(tǒng)，但是如果目標(biāo)語言支持它，它也可以作為動(dòng)態(tài)語言工作。同樣，它還支持各種編程風(fēng)格，如面向?qū)ο?、泛型和函?shù)式。

當(dāng)您編寫Haxe代碼時(shí)，您可以針對(duì)幾個(gè)平臺(tái)和語言進(jìn)行編譯，而不需要進(jìn)行大量更改。還可以使用特定于目標(biāo)的代碼塊。

您可以使用相同的代碼在haxe中編寫后端和前端，并使用haxe remoting實(shí)現(xiàn)同步和異步連接的通信。

正如所料，Haxe代碼兼容現(xiàn)有庫，但它也提供了一個(gè)成熟的標(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);
  }
}

查看haxe站點(diǎn)的haxe頁面入門了解更多信息。

Nim

Nim是一種靜態(tài)類型的多范式編程語言，具有極簡(jiǎn)主義和對(duì)空格敏感的語法，可以編譯成JavaScript以及C、c++。

該語言本身非常小，但是它的元編程功能使得您可以自己實(shí)現(xiàn)其他語言內(nèi)置的特性。它的構(gòu)建塊是宏、模板和泛型，使用它們可以實(shí)現(xiàn)從簡(jiǎn)單功能到不同范例的各種功能。本著Lisp的精神，這使得Nim成為一種非常通用的語言，可以根據(jù)您的需要進(jìn)行調(diào)整。

Nim的語法抽象特性允許您根據(jù)問題調(diào)整語言，從而使真正的dsl成為可能。如果你有特殊的任務(wù)要解決，你可以得到更高的表達(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

nim站點(diǎn)有一些有用的入門文檔，以獲取更多信息。

結(jié)論

如果JavaScript不是您最喜歡的語言，您仍然可以創(chuàng)建web應(yīng)用程序，而不必忍受該技術(shù)的缺點(diǎn)。用于創(chuàng)建這些應(yīng)用程序的選項(xiàng)可以滿足各種各樣的需求，從純函數(shù)語言(如PureScript)到面向?qū)ο笳Z言(如Dart)。

如果您想要比一對(duì)一語言翻譯更多的東西，您可以選擇Elm，它為您提供了虛擬DOM和內(nèi)置體系結(jié)構(gòu)等工具。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享可編譯成javascript的語言有哪些內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!