「 Dart Js Ts 」給前端工程師的一張Dart語言入場券

前言

各位大佬很久不見啊～

啊～很久沒寫文章了,慚愧慚愧。🐶

小 null 最近跑去寫 Flutter 了 ~

Flutter 使用 Dart 語言進行開發,小 null 在寫 Flutter 的過程當中發現 Dart 和 Javascript/Typescript 有些類似之處～

本文分享上圖中這些類似之處,但願能幫助到打算上車的你～

You might already know Dart. - from 10 good reasons to learn Dart

是的,你還沒開始學 Dart,可能就對它很熟悉了。

Dart 的「 前世此生 . 衰落與崛起 」

Dart 語言的誕生

2011 年 9 月,網絡上出現了一封標題爲"Future of JavaScript"的谷歌內部電子郵件,郵件中代表,因爲 Javascript 語言發展緩慢,谷歌內部正在開發一門比 JavaScript 更好的 web 語言。這門新語言的目標是實現 JavaScript 所能實現的一切。它的主要目標是"保持 JavaScript 的動態特性,但要有更好的性能配置文件,並能適應大型項目的工具"。它還能夠交叉編譯成 JavaScript。這種語言做爲技術預覽版向更普遍的世界發佈,並命名爲 Dart。 - 引自 《Dart in Action》

2011 年 10 月 10 日的 GOTO 大會上,谷歌的兩位工程師 Lars Bak (V8 JavaScript engine 項目組長..)和 Gilad Bracha (實現定製 Java/JVM 規範,JVM 規範主要貢獻者..) 發佈了"Dart",也驗證了以前 email 傳聞。Dart 是一種全新的編程語言,旨在幫助開發者構建 Web 應用程序。

對 Dart 語言開發團隊有興趣的話~可戳 👉Dart 語言背後有哪些大牛？

Dart 1.0 《Dart 1.0: A stable SDK for structured web apps》

2013 年 11 月 14 日,谷歌發佈 Dart 1.0 版。Dart 1.0 版本發佈,不但推出了 Dart 語言 1.0 版本並且還推出了相關開源工具箱和配套的編輯器。爲了推廣 Dart,Google 在 Chrome 內置了 DartVM 引擎(已在 2015 年移除),彼時 JavaScript 由於 NodeJs 生態的崛起而煥發了第二春,而 Dart 卻不溫不火,且由於其運行效率飽受詬病。

就這樣,Dart 還在 2018 年 "榮獲 20 大糟糕語言榜首",總結 「 Javascript 很"忙",Dart 很"慘" 」。

Dart 2.0 《Announcing Dart 2 Stable and the Dart Web Platform》

2018 年 8 月 8 日,谷歌發佈 Dart2.0 版本。谷歌對 Dart 進行全新改版,從底層重構了 Dart 語言,加入了不少面向將來的新特性,語言性能大幅提供。Dart 開發團隊總結了 Dart1.0 版本的優缺點,決定打造一個運行更快、更加安全的強類型語言 Dart2.0（在 Dart2.0 以前,Dart 是一門弱類型語言。這次發佈谷歌不只發佈了 Dart 2.0 穩定版,並且還重寫了 Dart web platform。新版的 web platform 提供了一套高性能、可擴展的生產力工具。

Flutter 發佈 《Flutter 1.0: Google’s Portable UI Toolkit》

Google 內部用 Dart 編寫孵化了一個移動開發框架 Sky,以後又被命名爲 Flutter,進入了移動跨平臺開發的領域。

2018 年 12 月 4 日,谷歌發佈 Flutter 1.0 版本。

Flutter 是谷歌開源的移動應用開發 SDK,使用 Flutter 能夠直接開發 Android 和 iOS 應用。其最大的特色就是一套代碼多平臺運行、高性能和 Hot Reload（熱重載）。谷歌即將發佈 Fuchsia 系統就以 Flutter 爲主要開發框架。Flutter 採用 Dart 做爲其底層語言。Dart 也因爲 Flutter 美好將來而獲得衆多開發者的青睞。

Fuchsia 技術選型,Dart 笑到最後

Android 和 Chrome OS 多是谷歌最知名的 OS 項目,但實際上這兩年曝光量逐漸增大的是谷歌正在開發的第三個操做系統——Fuchsia。Fuchsia 是一個開源項目,相似於 AOSP（Android 開放源代碼項目）,但 Fuchsia 能夠運行各類設備,從智能家居設備到筆記本電腦和手機等等。它也被認爲是創建在一個谷歌構建的名爲「zircon」的全新內核之上,而不是構成 Android 和 Chrome 操做系統基礎的 Linux 內核。

近日谷歌 Fuchsia 網站上更新了一則「Fuchsia Programming Language Policy」的文檔,詳細解釋了 Fuchsia 項目在編程語言方面的選型考慮。據官方文檔披露,C/C++、Dart、Rust、Go 語言都是 Fuchsia 開發的候選語言,除了老牌編程語言 C 和 C++ 的江湖地位穩固獲得了官方開發人員的承認之外,新興編程語言中,Dart 擊敗了 Rust 和 Go 語言,成爲用戶 UI 界面的正式官方語言。

Javascript 🆚 Dart

變量聲明

// javascript

var name = 'null仔'

// dart

var name = 'null仔'

與 Javascript 同樣,在 Dart 中,咱們可使用 var 定義變量。

不同的是,在 Dart 中,變量都是引用類型,也就是說全部的變量都是對象,因此 Dart 是一門徹底面向對象的語言。

Dart 是類型安全的,因此當你使用 var 關鍵字定義變量時,本質其實就是具體類型的引用。

好比上文代碼其實就是一個 String 類型對象的引用,這個對象的內容是 null 仔 。

在 Dart 中,聲明一個未初始化的變量,變量的類型能夠更改,它的初始值是 null。

在 Dart 中,聲明一個初始化的變量,變量類型不能再更改 。

常量聲明

// javascript

const name = 'null仔';

// dart

const name = 'null仔';

與 Javascript 同樣,在 Dart 中,咱們可使用 const 定義常量。

Dart 中,還可使用 final 定義常量,因爲本文主要將與 Javascript 的類似點,這裏就不細說了。

模版字符串

// javascript

const name = 'null仔';

const word = `My name is ${name}`;

// dart

const name = 'null仔';

const word = 'My name is $name';

與 Javascript 同樣,Dart 一樣支持模板字符串,語法爲：${expression},若是expression是一個變量,那麼能夠省略{},即爲$varibale。

若是表達式的結果是一個對象,那麼會調用對象的 toString()方法。

箭頭函數

// javascript

  const getName = (name) => name;

  getName('null仔');

// dart

  String getName(name) => name;

  getName('null仔');

與 Javascript 同樣,Dart 一樣支持箭頭函數,若是函數只包含一個表達式,可使用箭頭表達式方法進行簡寫。=> 後面的表達式將做爲函數的返回結果。

擴展運算符 (Spread Operator)

// javascript

  const list=[1,2,3,4,5];

  [0,...list,6];

// dart

  const list=[1,2,3,4,5];

  [0,...list,6];

Dart v2.3 引入了 Spread Operator,咱們在 Javascript 中很喜歡用的神器,在 Dart 中也能夠用啦～嗯,真香~

參數默認值與可選參數

// javascript

  function getInfo({name='null仔',age}){
    console.log(`你們好,我是${name},今年${age}歲`);
  }
  getInfo({age:18});

// dart

  void getInfo({name="null仔",age}){
    print('你們好,我是$name,今年$age歲');
  }
  getInfo(age:18);

與 Javascript 類似,Dart 支持函數參數默認值與可選參數,Get it ~

async/await 函數

// javascript

  async function getData(){

    const name= await new Promise((resolve)=>setTimeout(()=>resolve('null仔'),1000));

    console.log(name);  // null仔
  }
  getData();

// dart

  Future getData() async{

    String name =  await Future.delayed(Duration(seconds: 1),()=>'null仔');

    print(name);  // null仔
  }
  getData();

與 Javascript 相同,Dart 也提供了 async/await 語法糖,讓咱們更好的處理異步操做～

Javascript async 函數返回的是 Promise 對象,而 Dart async 函數返回的是 Future 對象～

級聯函數(鏈式調用)

// javascript

new Promise((r) => {
  r(1)
})
  .then((res) => ++res)
  .then((res) => ++res)
  .then((res) => console.log(++res)) // 4

// dart

 List<int> list =

   []..addAll([1,2,3,4,5])
     ..replaceRange(0,1,[6])
     ..sort((a,b)=>a-b);

  print(list);  // [2, 3, 4, 5, 6]

在 Javascript 中 咱們通常經過手動 "return this" 來實現鏈式調用,而 Dart 提供了 Cascade (級聯運算符) .. 幫咱們實現鏈式調用～ 真香！

模塊導入和導出 import

Javascript 和 Dart 都使用 import 來導入模塊,不過不一樣的是,Dart 並不須要使用 export 來導出模塊。

// 徹底導入

// javascript

import abc from "abc";
import * as xx from "abc";

// dart

import 'package:abc/abc';

// 部分導入

// javascript

import { xx } from "abc";

// dart

import 'package:abc/abc' show xxx; // 只導出其中一個對象/方法 xxx
import 'package:abc/abc' hide xxx; // 導出模塊時不導出xxx

類 class

//javascript

class Person{
  // 私有屬性提案
  #age=0;
  // 構造函數及參數默認值
  constructor(name='null仔'){
    this.name=name;
  }
  // 實例方法
  getName(){
    console.log(this.name);
  }
  // 靜態方法
  static say(){
    console.log(`hello world`);
  }
  // getter && setter
  get age(){
    return this.#age;
  }
  set age(value){
    this.#age=value;
  }
}

//dart

class Person{
  // 私有屬性
  int _age;
  String name;
   // 構造函數及參數默認值
  Person({this.name='null仔'});
   // 實例方法
  void getName(){
    print(this.name);
  }
   // 靜態方法
  static say(){
    print("hello world");
  }
  // getter && setter
  int get age =>this._age;
  set age(int value)=>this._age=value;
}

Typescript 🆚 Dart

泛型

Typescript 與 Dart 中都存在泛型,下面咱們以一個簡單的泛型函數簡單介紹下～

// typescript

  function identity<T>(arg: T): T {
    return arg;
  };

  identity<String>('null仔'); // null仔

  identity<Number>(18); // 18

// dart

  T identity<T>(T arg){
    return arg;
  }

  identity<String>('null仔'); // null仔

  identity<int>(18);  // 18

Typescript Type Assertion 🆚 Dart as 運算符

類型斷言（Type Assertion）能夠用來手動指定一個值的類型。

值 as 類型

Typescript Optional Chaining 🆚 Dart ?. 運算符

TypeScript 3.7 實現了呼聲最高的 ECMAScript 功能之一：可選鏈（Optional Chaining）！

終於不用再寫 一坨長長臭臭的&& 運算符執行中間屬性檢查 和 null/undefined 判斷了～

// before
if (foo && foo.bar && foo.bar.baz) {
  // ...
}
// after

if (foo?.bar?.baz) {
  // ...
}

Dart 提供了?.運算符,咱們來瞧瞧～

// typescript

let foo;

console.log(foo?.bar?.baz);


// dart

var foo;

print(foo?.bar?.baz);

Typescript Nullish Coalescing 🆚 Dart ?? 運算符

TypeScript 3.7 實現了另外一個即將推出的 ECMAScript 功能是 空值合併運算符（nullish coalescing operator）!

?? 運算符能夠在處理 null 或 undefined 時「回退」到一個默認值上 !

// typescript

let x = foo ?? bar()

// 等價於

let x = foo !== null && foo !== void 0 ? foo : bar()

Dart 提供了??運算符,咱們來瞧瞧～

// typescript
  let age;

  function setAge() {
    age = 18;
  }

  age ?? setAge();

  console.log(age) // 18

// dart

  var age;

  void setAge() {
    age = 18;
  }

  age ?? setAge();

  print(age); // 18

參考

Dart 語言的前世此生

後記

若是你和我同樣喜歡前端,也愛動手摺騰,歡迎關注我一塊兒玩耍啊～ ❤️

github 地址,歡迎 follow 哦～

博客

個人博客,點 star,不迷路～

公衆號

前端時刻