「 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,不迷路～

公众号

前端时刻