针对 JavaScript 开发者的 Dart 介绍
- 针对 JavaScript 开发者的 Dart 介绍

针对 JavaScript 开发者的 Dart 介绍

和 React Native 一样，Flutter 使用 reactive 风格的视图。然而，RN 需要被转译为本地对应的 widget，而 Flutter 是直接编译成本地原生代码。Flutter 可以控制屏幕上的每一个像素，如此可以避免由于使用 JavaScript Bridge 导致的性能问题。

Dart 学习起来非常简单而且有如下特性：

它针对 web 服务和移动应用开发提供了一种开源的，可扩展的编程语言。
它提供了一种面向对象的单继承语言，使用 C 语言风格的语法并且可通过 AOT 编译为本地代码。
可转译为 JavaScript 代码。
支持接口和抽象类。

下面的几个例子解释了 JavaScript 和 Dart 的区别。

入口函数

JavaScript 并没有预定义的入口函数。


// JavaScript
function startHere() {
  // Can be used as entry point
  //这里可以当做入口函数
}

在 Dart 里，每个应用程序必须有一个最顶级的 main() 函数，该函数作为应用程序的入口函数。

// Dart
main() {
}

可以在这里查看效果 DartPad。

在控制台打印输出

在 Dart 中如果需要在控制台进行输出，调用 print()。

// JavaScript
console.log('Hello world!');
```  ```
// Dart
print('Hello world!');

可以在这里查看效果 DartPad。

变量

Dart 是类型安全的，它结合静态类型检查和运行时检查来保证变量的值总是和变量的静态类型相匹配。虽然类型是语法要求，有些类型标注也并不是必须要填的，因为 Dart 使用类型推断。

创建变量并赋值

在 JavaScript 中，变量是无法指定类型的。

在 Dart 中，变量要么被显式定义类型，要么系统会自动判断变量的类型。

// JavaScript
var name = 'JavaScript';
```  ```
// Dart
String name = 'dart'; // Explicitly typed as a string.

String name = 'dart'; // 显式声明为字符串。

var otherName = 'Dart'; // Inferred string.

var otherName = 'Dart'; // 推断为字符串。

// Both are acceptable in Dart.

// 两种定义方式在 Dart 中都可以。

可以在这里查看效果 DartPad。

如果想了解更多相关信息，请转向该页面 Dart’s TypeSystem。

默认值

在 JavaScript 中，未初始化的变量是 ‘undefined’。

在 Dart 中，未初始化的变量会有一个初始值 null。因为数字在 Dart 是对象，甚至未初始化的数字类型的变量也会是 null。

// JavaScript
var name; // == undefined
```  ```
// Dart
var name; // == null
int x; // == null

可以在这里查看效果 DartPad。

如果想了解更多详细内容，请查看这个文档 variables。

检查 null 或者零值。

在 JavaScript 中，1 或者任何非空对象都相当于 true。

// JavaScript
var myNull = null;
if (!myNull) {
  console.log('null is treated as false');
}
var zero = 0;
if (!zero) {
  console.log('0 is treated as false');
}

在 Dart 中，只有布尔类型值 true 才是 true。

// Dart
var myNull = null;
if (myNull == null) {
  print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
  print('use "== 0" to check zero');
}

可以在这里查看效果 DartPad。

函数

Dart 和 JavaScript 中的函数很相似。最大的区别是声明格式。

// JavaScript
function fn() {
  return true;
}
```  ```
// Dart
fn() {
  return true;
}
// can also be written as
bool fn() {
  return true;
}

可以在这里查看效果 DartPad。

如果想了解更多相关信息，请转向该页面functions。

异步编程

Futures

和 JavaScript 类似，Dart 支持单线程。在 JavaScript 中， Promise 对象代表异步操作的完成或者失败。

Dart 使用 Future 对象来实现该机制。

// JavaScript
class Example {
  _getIPAddress() {
    const url = 'https://httpbin.org/ip';
    return fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        const ip = responseJson.origin;
        return ip;
      });
  }
}

function main() {
  const example = new Example();
  example
    ._getIPAddress()
    .then(ip => console.log(ip))
    .catch(error => console.error(error));
}

main();
```  ```
// Dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Example {
  Future<String> _getIPAddress() {
    final url = 'https://httpbin.org/ip';
    return http.get(url).then((response) {
      String ip = jsonDecode(response.body)['origin'];
      return ip;
    });
  }
}

main() {
  final example = new Example();
  example
      ._getIPAddress()
      .then((ip) => print(ip))
      .catchError((error) => print(error));
}

可以在这里查看效果 DartPad。

如果想了解更多相关信息，请参考 Futures 的相关文档。

async 和 await

async 函数声明定义了一个异步函数。

在 JavaScript 中， async 函数返回一个 Promise。await 操作符用于等待 Promise。

// JavaScript
class Example {
  async function _getIPAddress() {
    const url = 'https://httpbin.org/ip';
    const response = await fetch(url);
    const json = await response.json();
    const data = await json.origin;
    return data;
  }
}

async function main() {
  const example = new Example();
  try {
    const ip = await example._getIPAddress();
    console.log(ip);
  } catch (error) {
    console.error(error);
  }
}

main();

在 Dart 中，async 函数返回一个 Future，而函数体会在未来执行。await 操作符用于等待 Future。

// Dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class Example {
  Future<String> _getIPAddress() async {
    final url = 'https://httpbin.org/ip';
    final response = await http.get(url);
    String ip = jsonDecode(response.body)['origin'];
    return ip;
  }
}

main() async {
  final example = new Example();
  try {
    final ip = await example._getIPAddress();
    print(ip);
  } catch (error) {
    print(error);
  }
}

可以在这里查看效果 DartPad。

如果想了解更多相关信息，请参考 async 和await 的相关文档。