首頁 > web前端 > js教程 > 十種可編譯成javascript的有趣語言

十種可編譯成javascript的有趣語言

青灯夜游
發布: 2020-10-21 17:41:50
轉載
3210 人瀏覽過

十種可編譯成javascript的有趣語言

本文列出了十種有趣的語言,它們可以編譯成JavaScript,以便在瀏覽器或Node.js之類的平台上執行。

現代應用程式與簡單的網站有不同的要求。但是瀏覽器是一個擁有(大部分)固定可用技術的平台,JavaScript仍然是web應用程式的核心語言。任何需要在瀏覽器中運行的應用程式都必須用這種語言實作。

我們都知道JavaScript並不是每個任務的最佳語言,當涉及複雜的應用程式時,它可能會有不足之處。

為了避免這個問題,已經創建了幾種新語言和現有語言的轉置器,它們都產生了可以在瀏覽器中工作的程式碼,而不需要編寫任何JavaScript行,也不需要考慮該語言的限制。

Dart

DART是一種經典的物件導向語言,其中所有內容都是對象,任何物件都是類別的實例(物件也可以充當函數)。它是專門為瀏覽器、伺服器和行動裝置建立應用程式的。

它是由Google維護的,是下一代adwords用戶介面的驅動語言,是Google最重要的收入產品,這本身就是它在規模上強大的證明。

該語言可以轉換為JavaScript以在瀏覽器中使用,也可以由Dart VM直接解釋,從而也可以建立伺服器應用程式。可以使用Flutter SDK製作行動應用程式。

複雜的應用程式還需要為該任務專門設計的一組成熟的庫和語言特性,Dart包括所有這些。一個流行庫的例子是AngularDart,它是Dart的Angular版本。

它允許您編寫類型安全的程式碼,而不會太麻煩。您可以編寫類型,但不需要這樣做,*因為可以推斷它們。這允許快速建立原型,而不必過多考慮細節,但是一旦您有了工作,您就可以添加類型,使其更加健壯。

關於VM中的並發編程,Dart不是使用共享記憶體線程(Dart是單線程的),而是使用他們所謂的隔離記憶體堆,在那裡使用訊息來實現通訊。在瀏覽器中,情況有點不同:不是創建新的隔離,而是創建新的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 = π⋅r², therefore π = A/r².
    // 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;
}
登入後複製

有關更多閱讀,推薦Dart的Dart入門資源。

TypeScript

TypeScript是JavaScript的超集合。一個有效的JavaScript程式也是有效的TypeScript,但卻增加了靜態型別。編譯器還可以作為從ES2015 到目前實現的轉換程序,因此您總是可以獲得最新的特性。

與許多其他語言不同,TypeScript保留了JavaScript的精神,只是增加了一些功能來提高程式碼的健全性。這些是類型註解和其他與類型相關的功能,它們使編寫JavaScript更加令人愉快,這要感謝支援靜態分析程式等專門工具和其他工具來幫助重構過程。

此外,新增類型還可以改進應用程式不同元件之間的介面。

支援類型推斷,因此不必從頭開始編寫所有類型。您可以編寫快速的解決方案,然後添加所有類型,以便對您的程式碼有信心。

TypeScript也支援高階類型,例如交集類型、聯合型別、型別別名、區分的聯合和型別保護。您可以在TypeScript文件網站的進階類型頁面中查看所有這些。

如果使用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是一種純函數式程式語言,可以編譯為JavaScript、HTML和CSS。您可以使用Elm建立一個完整的站點,使其成為React等JavaScript框架的一個很好的替代品。

使用它建立的應用程式自動使用一個虛擬DOM庫,使其運行非常快。一個很大的優點是內建的體系結構,它使您忘記了資料流,轉而專注於資料聲明和邏輯。

在Elm中,所有函數都是純函數,這意味著對於給定的輸入,它們總是會傳回相同的輸出。他們不能做任何事情,除非你指定它。例如,要存取遠端API,您需要建立命令函數來與外部世界通信,並建立訂閱來偵聽回應。

純度的另一點是,值是不可變的:當您需要某些東西時,您會建立新的值,而不是修改它們。

Elm的采用可以是渐进的。可以使用端口与JavaScript和其他库通信。虽然Elm还没有达到版本1,但是它已经被用于复杂和大型应用程序,这使得它成为复杂应用程序的可行解决方案。

Elm最吸引人的特性之一是初学者友好的编译器,它不是生成难以阅读的消息,而是生成帮助您修复代码的代码。如果你正在学习这门语言,编译器本身会有很大的帮助。

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是一种纯功能的强类型编程语言,由phil freeman创建。它的目标是提供与可用javascript库的强兼容性,在精神上类似于haskell,但保持javascript的核心。

PureScript的一个优点是它的极简主义。它不包含任何在其他语言中被认为是必不可少的功能库。例如,您可以为任务使用特定的库,而不是在编译器本身中包含生成器和承诺。

您可以为您需要的特性选择您想要的实现,这允许在使用PureScript时获得高效和个性化的体验,同时使生成的代码尽可能小。

它的编译器的另一个独特的特性是,在保持与JavaScript兼容的同时,能够生成干净且可读的代码,包括库和工具。

与其他语言一样,PureScript也有自己的构建工具Pulp,它可以与Gulp进行比较,但是对于用这种语言编写的项目来说。

关于类型系统——不像Elm,它是另一种类似于ml的语言——PureScript支持高级类型特性,比如高级类型和类型类,它们来自Haskell,允许创建复杂的抽象:

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"
        }
      ]
登入後複製

要使用purescript执行下一步,请查看github上的purescript入门指南。

CoffeeScript

CoffeeScript是一种语言,旨在公开JavaScript的优秀部分,同时提供更干净的语法和保持语义。尽管近年来该语言的受欢迎程度有所下降,但它正在改变方向,最近又获得了一个新的主要版本,支持ES2015+特性。

您在CoffeeScript中编写的代码将直接转换为可读的JavaScript代码,并保持与现有库的兼容性。 从版本2开始,编译器将生成与最新版本的ECMAScript兼容的代码。

例如,每次使用类时,您都会在JavaScript中获得一个类。 另外,如果您使用React,则有个好消息:JSX与CoffeeScript兼容。

编译器的一个非常独特的功能是能够处理以素养风格编写的代码,您无需在代码中强调重点和添加注释,而是首先编写注释,并且代码仅偶尔出现。 Donald Knuth引入了这种编程风格,使代码文件与技术文章非常相似。

与其他语言不同,CoffeeScript代码可以在浏览器中使用库直接解释。因此,如果你想创建一个快速测试,你可以用text/coffeescript脚本标签编写代码,并包含编译器,编译器会实时将代码翻译成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站点有一个方便的coffeescript 2资源入门

ClojureScript

ClojureScript是一个编译器,它将Clojure编程语言翻译成JavaScript。它是一种通用的函数式语言,具有动态类型和对不可变数据结构的支持。

它是这个列表中唯一属于Lisp编程语言家族的,并且自然地,它共享了许多特性。例如,可以将代码视为数据,并且可以使用宏系统,从而使元编程技术成为可能。与其他lisp不同,Clojure支持不可变的数据结构,这使得副作用的管理更加容易。

由于使用了括号,语法对新手来说可能有些吓人,但这样做有其深刻的原因,从长远来看,您肯定会喜欢它。语法中的这种极简主义及其语法抽象功能使Lisp成为解决需要高抽象级别的问题的强大工具。

虽然Clojure主要是一种函数式语言,但它不像PureScript或Elm那样纯粹。副作用仍然可能发生,但是其他功能特性仍然存在。

ClojureScript使用谷歌闭包进行代码优化,并且与现有的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)
登入後複製

要了解更多,请访问ClojureScript站点的ClojureScript资源入门

Scala.js

Scala.js是将Scala编程语言转换为JavaScript的编译器。 Scala是一种语言,旨在将来自面向对象和函数式编程的思想融合为一种语言,以创建功能强大且易于采用的工具。

作为一种强类型语言,您可以从具有部分类型推断的灵活类型系统中获益。大多数值都可以推断,但是函数参数仍然需要显式的类型注释。

虽然支持许多常见的面向对象模式(例如,每个值都是一个对象,操作是方法调用),但是也可以获得一些函数特性,比如支持一流函数和不可变数据结构。

Scala.js的一个特殊优势是,您可以从熟悉的面向对象的方法开始,然后根据需要以自己的速度迁移到功能更强的方法,而不需要做很多工作。另外,现有的JavaScript代码和库与Scala代码兼容。

初学Scala的开发人员会发现这种语言与JavaScript并没有太大的不同。比较以下等价代码:

// 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创建和维护的一种语言,它为OCaml编译器提供了一种新的语法,代码可以翻译成JavaScript和原生代码。

作为ml家族和函数语言本身的一部分,它自然提供了一个强大而灵活的类型系统,包括推理、代数数据类型和模式匹配。它还支持不可变的数据类型和参数多态性(在其他语言中也称为泛型),但与ocaml一样,也支持面向对象编程。

使用现有的JavaScript库可以使用bucklescript绑定。您还可以在理性代码中混合使用JavaScript。插入的JavaScript代码不会被严格检查,但是对于快速修复或原型来说,它工作得很好。

如果您是react开发人员,则可以使用绑定,并且该语言还支持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 &#39;studentType = {status: int, student: &#39;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站点的《Reason Guide入门》了解更多信息。

Haxe

Haxe是一种多范式编程语言,它的编译器可以用其他语言生成二进制文件和源代码。

虽然Haxe提供了一个支持类型推断的严格类型系统,但是如果目标语言支持它,它也可以作为动态语言工作。同样,它还支持各种编程风格,如面向对象、泛型和函数式。

当您编写Haxe代码时,您可以针对几个平台和语言进行编译,而不需要进行大量更改。还可以使用特定于目标的代码块。

您可以使用相同的代码在haxe中编写后端和前端,并使用haxe remoting实现同步和异步连接的通信。

正如所料,Haxe代码兼容现有库,但它也提供了一个成熟的标准库:

// 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站点的haxe页面入门了解更多信息。

Nim

Nim是一种静态类型的多范式编程语言,具有极简主义和对空格敏感的语法,可以编译成JavaScript以及C、c++。

该语言本身非常小,但是它的元编程功能使得您可以自己实现其他语言内置的特性。它的构建块是宏、模板和泛型,使用它们可以实现从简单功能到不同范例的各种功能。本着Lisp的精神,这使得Nim成为一种非常通用的语言,可以根据您的需要进行调整。

Nim的语法抽象特性允许您根据问题调整语言,从而使真正的dsl成为可能。如果你有特殊的任务要解决,你可以得到更高的表达能力:

# 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站点有一些有用的入门文档,以获取更多信息。

结论

如果JavaScript不是您最喜欢的语言,您仍然可以创建web应用程序,而不必忍受该技术的缺点。用于创建这些应用程序的选项可以满足各种各样的需求,从纯函数语言(如PureScript)到面向对象语言(如Dart)。

如果您想要比一对一语言翻译更多的东西,您可以选择Elm,它为您提供了虚拟DOM和内置体系结构等工具。

相关免费学习推荐:js视频教程

以上是十種可編譯成javascript的有趣語言的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:sitepoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板