免費(fèi)AI編程助手
Flutter實(shí)戰(zhàn) Dart語言簡介
在之前我們已經(jīng)介紹過 Dart 語言的相關(guān)特性，讀者可以翻看一下，如果讀者已經(jīng)熟悉 Dart 語法，可以跳過本節(jié)，如果你還不了解 Dart，也不用擔(dān)心，按照筆者經(jīng)驗(yàn)，如果你有過其他編程語言經(jīng)驗(yàn)（尤其是 Java 和 JavaScript）的話會(huì)非常容易上手Dart。當(dāng)然，如果你是 iOS 開發(fā)者，也不用擔(dān)心，Dart 中也有一些與 Swift 比較相似的特性，如命名參數(shù)等，筆者當(dāng)時(shí)學(xué)習(xí) Dart 時(shí)，只是花了一個(gè)小時(shí)，看完 Dart 官網(wǎng)的 Language Tour，就開始動(dòng)手寫 Flutter 了。
在筆者看來，Dart 的設(shè)計(jì)目標(biāo)應(yīng)該是同時(shí)借鑒了 java 和 JavaScript。Dart 在靜態(tài)語法方面和 Java 非常相似，如類型定義、函數(shù)聲明、泛型等，而在動(dòng)態(tài)特性方面又和 JavaScript 很像，如函數(shù)式特性、異步支持等。除了融合 Java 和 JavaScript 語言之所長之外，Dart 也具有一些其它具有表現(xiàn)力的語法，如可選命名參數(shù)、..（級(jí)聯(lián)運(yùn)算符）和?.（條件成員訪問運(yùn)算符）以及??（判空賦值運(yùn)算符）。其實(shí)，對(duì)編程語言了解比較多的讀者會(huì)發(fā)現(xiàn)，在 Dart 中其實(shí)看到的不僅有 Java 和 JavaScript 的影子，它還具有其它編程語言中的身影，如命名參數(shù)在 Objective-C 和 Swift 中早就很普遍，而??操作符在 PHP 7.0 語法中就已經(jīng)存在了，因此我們可以看到 Google 對(duì) Dart 語言給予厚望，是想把 Dart 打造成一門集百家之所長的編程語言。
接下來，我們先對(duì) Dart 語法做一個(gè)簡單的介紹，然后再將 Dart 與 JavaScript 和 Java 做一個(gè)簡要的對(duì)比，方便讀者更好的理解。
注意：由于本書并非專門介紹 Dart 語言的書籍，所以本章主要會(huì)介紹一下在 Flutter 開發(fā)中常用的語法特性，如果想更多了解 Dart，讀者可以去 Dart 官網(wǎng)學(xué)習(xí)，現(xiàn)在互聯(lián)網(wǎng)上 Dart 相關(guān)資料已經(jīng)很多了。另外 Dart 2.0已經(jīng)正式發(fā)布，所以本書所有示例均采用 Dart 2.0 語法。
#1.4.1 變量聲明
- var
類似于 JavaScript 中的var，它可以接收任何類型的變量，但最大的不同是 Dart 中 var 變量一旦賦值，類型便會(huì)確定，則不能再改變其類型，如：
var t;
t = "hi world";
// 下面代碼在dart中會(huì)報(bào)錯(cuò)，因?yàn)樽兞縯的類型已經(jīng)確定為String，
// 類型一旦確定后則不能再更改其類型。
t = 1000;
上面的代碼在 JavaScript 是沒有問題的，前端開發(fā)者需要注意一下，之所以有此差異是因?yàn)?Dart 本身是一個(gè)強(qiáng)類型語言，任何變量都是有確定類型的，在 Dart 中，當(dāng)用var聲明一個(gè)變量后， Dart 在編譯時(shí)會(huì)根據(jù)第一次賦值數(shù)據(jù)的類型來推斷其類型，編譯結(jié)束后其類型就已經(jīng)被確定，而 JavaScript 是純粹的弱類型腳本語言，var 只是變量的聲明方式而已。
- dynamic 和 Object
Object 是Dart所有對(duì)象的根基類，也就是說所有類型都是Object的子類(包括 Function 和Null)，所以任何類型的數(shù)據(jù)都可以賦值給Object聲明的對(duì)象. dynamic與var一樣都是關(guān)鍵詞,聲明的變量可以賦值任意對(duì)象。 而dynamic與Object相同之處在于,他們聲明的變量可以在后期改變賦值類型。
dynamic t;
Object x;
t = "hi world";
x = 'Hello Object';
//下面代碼沒有問題
t = 1000;
x = 1000;
dynamic與Object不同的是,dynamic聲明的對(duì)象編譯器會(huì)提供所有可能的組合, 而Object聲明的對(duì)象只能使用 Object 的屬性與方法, 否則編譯器會(huì)報(bào)錯(cuò)。如:
dynamic a;
Object b;
main() {
a = "";
b = "";
printLengths();
}
printLengths() {
// no warning
print(a.length);
// warning:
// The getter 'length' is not defined for the class 'Object'
print(b.length);
}變量 a 不會(huì)報(bào)錯(cuò), 變量 b 編譯器會(huì)報(bào)錯(cuò)
dynamic的這個(gè)特性與Objective-C中的id作用很像. dynamic的這個(gè)特點(diǎn)使得我們?cè)谑褂盟鼤r(shí)需要格外注意,這很容易引入一個(gè)運(yùn)行時(shí)錯(cuò)誤.
- final和const
如果您從未打算更改一個(gè)變量，那么使用 final 或 const，不是var，也不是一個(gè)類型。 一個(gè) final 變量只能被設(shè)置一次，兩者區(qū)別在于：const 變量是一個(gè)編譯時(shí)常量，final變量在第一次使用時(shí)被初始化。被final或者const修飾的變量，變量類型可以省略，如：
//可以省略String這個(gè)類型聲明
final str = "hi world";
//final String str = "hi world";
const str1 = "hi world";
//const String str1 = "hi world";#1.4.2 函數(shù)
Dart 是一種真正的面向?qū)ο蟮恼Z言，所以即使是函數(shù)也是對(duì)象，并且有一個(gè)類型 Function。這意味著函數(shù)可以賦值給變量或作為參數(shù)傳遞給其他函數(shù)，這是函數(shù)式編程的典型特征。
- 函數(shù)聲明
bool isNoble(int atomicNumber) {
return _nobleGases[atomicNumber] != null;
}
Dart 函數(shù)聲明如果沒有顯式聲明返回值類型時(shí)會(huì)默認(rèn)當(dāng)做dynamic處理，注意，函數(shù)返回值沒有類型推斷：
typedef bool CALLBACK();
//不指定返回類型，此時(shí)默認(rèn)為dynamic，不是bool
isNoble(int atomicNumber) {
return _nobleGases[atomicNumber] != null;
}
void test(CALLBACK cb){
print(cb());
}
//報(bào)錯(cuò)，isNoble不是bool類型
test(isNoble);- 對(duì)于只包含一個(gè)表達(dá)式的函數(shù)，可以使用簡寫語法
bool isNoble (int atomicNumber)=> _nobleGases [ atomicNumber ] ！= null ; - 函數(shù)作為變量
var say = (str){
print(str);
};
say("hi world");- 函數(shù)作為參數(shù)傳遞
void execute(var callback) {
callback();
}
execute(() => print("xxx"))- 可選的位置參數(shù)
包裝一組函數(shù)參數(shù)，用[]標(biāo)記為可選的位置參數(shù)，并放在參數(shù)列表的最后面：
String say(String from, String msg, [String device]) {
var result = '$from says $msg';
if (device != null) {
result = '$result with a $device';
}
return result;
}下面是一個(gè)不帶可選參數(shù)調(diào)用這個(gè)函數(shù)的例子：
say('Bob', 'Howdy'); //結(jié)果是： Bob says Howdy下面是用第三個(gè)參數(shù)調(diào)用這個(gè)函數(shù)的例子：
say('Bob', 'Howdy', 'smoke signal'); //結(jié)果是：Bob says Howdy with a smoke signal- 可選的命名參數(shù)
定義函數(shù)時(shí)，使用{param1, param2, …}，放在參數(shù)列表的最后面，用于指定命名參數(shù)。例如：
//設(shè)置[bold]和[hidden]標(biāo)志
void enableFlags({bool bold, bool hidden}) {
// ...
}
調(diào)用函數(shù)時(shí)，可以使用指定命名參數(shù)。例如：paramName: value
enableFlags(bold: true, hidden: false);可選命名參數(shù)在 Flutter 中使用非常多。
注意，不能同時(shí)使用可選的位置參數(shù)和可選的命名參數(shù)
#1.4.3 異步支持
Dart 類庫有非常多的返回Future或者Stream對(duì)象的函數(shù)。 這些函數(shù)被稱為異步函數(shù)：它們只會(huì)在設(shè)置好一些耗時(shí)操作之后返回，比如像 IO 操作。而不是等到這個(gè)操作完成。
async和await關(guān)鍵詞支持了異步編程，允許您寫出和同步代碼很像的異步代碼。
#Future
Future與 JavaScript 中的Promise非常相似，表示一個(gè)異步操作的最終完成（或失?。┘捌浣Y(jié)果值的表示。簡單來說，它就是用于處理異步操作的，異步處理成功了就執(zhí)行成功的操作，異步處理失敗了就捕獲錯(cuò)誤或者停止后續(xù)操作。一個(gè) Future 只會(huì)對(duì)應(yīng)一個(gè)結(jié)果，要么成功，要么失敗。
由于本身功能較多，這里我們只介紹其常用的 API 及特性。還有，請(qǐng)記住，Future 的所有 API 的返回值仍然是一個(gè)Future對(duì)象，所以可以很方便的進(jìn)行鏈?zhǔn)秸{(diào)用。
#Future.then
為了方便示例，在本例中我們使用Future.delayed 創(chuàng)建了一個(gè)延時(shí)任務(wù)（實(shí)際場景會(huì)是一個(gè)真正的耗時(shí)任務(wù)，比如一次網(wǎng)絡(luò)請(qǐng)求），即2秒后返回結(jié)果字符串"hi world!"，然后我們?cè)?code>then中接收異步結(jié)果并打印結(jié)果，代碼如下：
Future.delayed(new Duration(seconds: 2),(){
return "hi world!";
}).then((data){
print(data);
});#Future.catchError
如果異步任務(wù)發(fā)生錯(cuò)誤，我們可以在catchError中捕獲錯(cuò)誤，我們將上面示例改為：
Future.delayed(new Duration(seconds: 2),(){
//return "hi world!";
throw AssertionError("Error");
}).then((data){
//執(zhí)行成功會(huì)走到這里
print("success");
}).catchError((e){
//執(zhí)行失敗會(huì)走到這里
print(e);
});
在本示例中，我們?cè)诋惒饺蝿?wù)中拋出了一個(gè)異常，then的回調(diào)函數(shù)將不會(huì)被執(zhí)行，取而代之的是 catchError回調(diào)函數(shù)將被調(diào)用；但是，并不是只有 catchError回調(diào)才能捕獲錯(cuò)誤，then方法還有一個(gè)可選參數(shù)onError，我們也可以它來捕獲異常：
Future.delayed(new Duration(seconds: 2), () {
//return "hi world!";
throw AssertionError("Error");
}).then((data) {
print("success");
}, onError: (e) {
print(e);
});#Future.whenComplete
有些時(shí)候，我們會(huì)遇到無論異步任務(wù)執(zhí)行成功或失敗都需要做一些事的場景，比如在網(wǎng)絡(luò)請(qǐng)求前彈出加載對(duì)話框，在請(qǐng)求結(jié)束后關(guān)閉對(duì)話框。這種場景，有兩種方法，第一種是分別在then或catch中關(guān)閉一下對(duì)話框，第二種就是使用Future的whenComplete回調(diào)，我們將上面示例改一下：
Future.delayed(new Duration(seconds: 2),(){
//return "hi world!";
throw AssertionError("Error");
}).then((data){
//執(zhí)行成功會(huì)走到這里
print(data);
}).catchError((e){
//執(zhí)行失敗會(huì)走到這里
print(e);
}).whenComplete((){
//無論成功或失敗都會(huì)走到這里
});#Future.wait
有些時(shí)候，我們需要等待多個(gè)異步任務(wù)都執(zhí)行結(jié)束后才進(jìn)行一些操作，比如我們有一個(gè)界面，需要先分別從兩個(gè)網(wǎng)絡(luò)接口獲取數(shù)據(jù)，獲取成功后，我們需要將兩個(gè)接口數(shù)據(jù)進(jìn)行特定的處理后再顯示到UI界面上，應(yīng)該怎么做？答案是Future.wait，它接受一個(gè)Future數(shù)組參數(shù)，只有數(shù)組中所有Future都執(zhí)行成功后，才會(huì)觸發(fā)then的成功回調(diào)，只要有一個(gè)Future執(zhí)行失敗，就會(huì)觸發(fā)錯(cuò)誤回調(diào)。下面，我們通過模擬Future.delayed 來模擬兩個(gè)數(shù)據(jù)獲取的異步任務(wù)，等兩個(gè)異步任務(wù)都執(zhí)行成功時(shí)，將兩個(gè)異步任務(wù)的結(jié)果拼接打印出來，代碼如下：
Future.wait([
// 2秒后返回結(jié)果
Future.delayed(new Duration(seconds: 2), () {
return "hello";
}),
// 4秒后返回結(jié)果
Future.delayed(new Duration(seconds: 4), () {
return " world";
})
]).then((results){
print(results[0]+results[1]);
}).catchError((e){
print(e);
});執(zhí)行上面代碼，4秒后你會(huì)在控制臺(tái)中看到“hello world”。
#Async/await
Dart 中的async/await 和JavaScript中的async/await功能和用法是一模一樣的，如果你已經(jīng)了解 JavaScript 中的async/await的用法，可以直接跳過本節(jié)。
#回調(diào)地獄(Callback Hell)
如果代碼中有大量異步邏輯，并且出現(xiàn)大量異步任務(wù)依賴其它異步任務(wù)的結(jié)果時(shí)，必然會(huì)出現(xiàn)Future.then回調(diào)中套回調(diào)情況。舉個(gè)例子，比如現(xiàn)在有個(gè)需求場景是用戶先登錄，登錄成功后會(huì)獲得用戶ID，然后通過用戶ID，再去請(qǐng)求用戶個(gè)人信息，獲取到用戶個(gè)人信息后，為了使用方便，我們需要將其緩存在本地文件系統(tǒng)，代碼如下：
//先分別定義各個(gè)異步任務(wù)
Future<String> login(String userName, String pwd){
...
//用戶登錄
};
Future<String> getUserInfo(String id){
...
//獲取用戶信息
};
Future saveUserInfo(String userInfo){
...
// 保存用戶信息
}; 接下來，執(zhí)行整個(gè)任務(wù)流：
login("alice","******").then((id){
//登錄成功后通過，id獲取用戶信息
getUserInfo(id).then((userInfo){
//獲取用戶信息后保存
saveUserInfo(userInfo).then((){
//保存用戶信息，接下來執(zhí)行其它操作
...
});
});
})
可以感受一下，如果業(yè)務(wù)邏輯中有大量異步依賴的情況，將會(huì)出現(xiàn)上面這種在回調(diào)里面套回調(diào)的情況，過多的嵌套會(huì)導(dǎo)致的代碼可讀性下降以及出錯(cuò)率提高，并且非常難維護(hù)，這個(gè)問題被形象的稱為回調(diào)地獄（Callback Hell）。回調(diào)地獄問題在之前 JavaScript 中非常突出，也是 JavaScript 被吐槽最多的點(diǎn)，但隨著 ECMAScript6 和 ECMAScript7 標(biāo)準(zhǔn)發(fā)布后，這個(gè)問題得到了非常好的解決，而解決回調(diào)地獄的兩大神器正是 ECMAScript6 引入了Promise，以及 ECMAScript7 中引入的async/await。 而在 Dart 中幾乎是完全平移了 JavaScript 中的這兩者：Future相當(dāng)于Promise，而async/await連名字都沒改。接下來我們看看通過Future和async/await如何消除上面示例中的嵌套問題。
#使用 Future 消除 Callback Hell
login("alice","******").then((id){
return getUserInfo(id);
}).then((userInfo){
return saveUserInfo(userInfo);
}).then((e){
//執(zhí)行接下來的操作
}).catchError((e){
//錯(cuò)誤處理
print(e);
});
正如上文所述， “Future 的所有API的返回值仍然是一個(gè)Future對(duì)象，所以可以很方便的進(jìn)行鏈?zhǔn)秸{(diào)用” ，如果在 then 中返回的是一個(gè)Future的話，該future會(huì)執(zhí)行，執(zhí)行結(jié)束后會(huì)觸發(fā)后面的then回調(diào)，這樣依次向下，就避免了層層嵌套。
#使用 async/await 消除 callback hell
通過Future回調(diào)中再返回Future的方式雖然能避免層層嵌套，但是還是有一層回調(diào)，有沒有一種方式能夠讓我們可以像寫同步代碼那樣來執(zhí)行異步任務(wù)而不使用回調(diào)的方式？答案是肯定的，這就要使用async/await了，下面我們先直接看代碼，然后再解釋，代碼如下：
task() async {
try{
String id = await login("alice","******");
String userInfo = await getUserInfo(id);
await saveUserInfo(userInfo);
//執(zhí)行接下來的操作
} catch(e){
//錯(cuò)誤處理
print(e);
}
}async用來表示函數(shù)是異步的，定義的函數(shù)會(huì)返回一個(gè)Future對(duì)象，可以使用 then 方法添加回調(diào)函數(shù)。await后面是一個(gè)Future，表示等待該異步任務(wù)完成，異步完成后才會(huì)往下走；await必須出現(xiàn)在async函數(shù)內(nèi)部。
可以看到，我們通過async/await將一個(gè)異步流用同步的代碼表示出來了。
其實(shí)，無論是在 JavaScript 還是 Dart 中，
async/await都只是一個(gè)語法糖，編譯器或解釋器最終都會(huì)將其轉(zhuǎn)化為一個(gè) Promise（Future）的調(diào)用鏈。
#1.4.4 Stream
Stream 也是用于接收異步事件數(shù)據(jù)，和Future 不同的是，它可以接收多個(gè)異步操作的結(jié)果（成功或失敗）。 也就是說，在執(zhí)行異步任務(wù)時(shí)，可以通過多次觸發(fā)成功或失敗事件來傳遞結(jié)果數(shù)據(jù)或錯(cuò)誤異常。 Stream 常用于會(huì)多次讀取數(shù)據(jù)的異步任務(wù)場景，如網(wǎng)絡(luò)內(nèi)容下載、文件讀寫等。舉個(gè)例子：
Stream.fromFutures([
// 1秒后返回結(jié)果
Future.delayed(new Duration(seconds: 1), () {
return "hello 1";
}),
// 拋出一個(gè)異常
Future.delayed(new Duration(seconds: 2),(){
throw AssertionError("Error");
}),
// 3秒后返回結(jié)果
Future.delayed(new Duration(seconds: 3), () {
return "hello 3";
})
]).listen((data){
print(data);
}, onError: (e){
print(e.message);
},onDone: (){
});上面的代碼依次會(huì)輸出：
I/flutter (17666): hello 1
I/flutter (17666): Error
I/flutter (17666): hello 3代碼很簡單，就不贅述了。
思考題：既然 Stream 可以接收多次事件，那能不能用 Stream 來實(shí)現(xiàn)一個(gè)訂閱者模式的事件總線？
#1.4.5 Dart 和 Java 及 JavaScript 對(duì)比
通過上面介紹，相信你對(duì) Dart 應(yīng)該有了一個(gè)初步的印象，由于筆者平時(shí)也使用 Java 和 JavaScript，下面筆者根據(jù)自己的經(jīng)驗(yàn)，結(jié)合 Java 和 JavaScript，談一下自己的看法。
之所以將 Dart 與 Java 和 JavaScript 對(duì)比，是因?yàn)椋@兩者分別是強(qiáng)類型語言和弱類型語言的典型代表，并且 Dart 語法中很多地方也都借鑒了 Java 和 JavaScript。
#Dart vs Java
客觀的來講，Dart 在語法層面確實(shí)比 Java 更有表現(xiàn)力；在 VM 層面，Dart VM 在內(nèi)存回收和吞吐量都進(jìn)行了反復(fù)的優(yōu)化，但具體的性能對(duì)比，筆者沒有找到相關(guān)測試數(shù)據(jù)，但在筆者看來，只要 Dart 語言能流行，VM的性能就不用擔(dān)心，畢竟 Google 在 Go（沒用VM但有GC）、JavaScript（v8）、 Dalvik（Android上的Java VM）上已經(jīng)有了很多技術(shù)積淀。值得注意的是 Dart 在 Flutter 中已經(jīng)可以將 GC 做到 10ms 以內(nèi)，所以 Dart 和 Java 相比，決勝因素并不會(huì)是在性能方面。而在語法層面，Dart 要比Java更有表現(xiàn)力，最重要的是 Dart 對(duì)函數(shù)式編程支持要遠(yuǎn)強(qiáng)于 Java(目前只停留在 Lambda 表達(dá)式)，而 Dart 目前真正的不足是生態(tài)，但筆者相信，隨著 Flutter 的逐漸火熱，會(huì)回過頭來反推 Dart 生態(tài)加速發(fā)展，對(duì)于 Dart 來說，現(xiàn)在需要的是時(shí)間。
#Dart vs JavaScript
JavaScript 的弱類型一直被抓短，所以 TypeScript、CoffeeScript 甚至是 Facebook 的 flow（雖然并不能算 JavaScript 的一個(gè)超集，但也通過標(biāo)注和打包工具提供了靜態(tài)類型檢查）才有市場。就筆者使用過的腳本語言中（筆者曾使用過Python、PHP），JavaScript 無疑是動(dòng)態(tài)化支持最好的腳本語言，比如在 JavaScript 中，可以給任何對(duì)象在任何時(shí)候動(dòng)態(tài)擴(kuò)展屬性，對(duì)于精通 JavaScript 的高手來說，這無疑是一把利劍。但是，任何事物都有兩面性，JavaScript 的強(qiáng)大的動(dòng)態(tài)化特性也是把雙刃劍，你可經(jīng)常聽到另一個(gè)聲音，認(rèn)為 JavaScript 的這種動(dòng)態(tài)性糟糕透了，太過靈活反而導(dǎo)致代碼很難預(yù)期，無法限制不被期望的修改。畢竟有些人總是對(duì)自己或別人寫的代碼不放心，他們希望能夠讓代碼變得可控，并期望有一套靜態(tài)類型檢查系統(tǒng)來幫助自己減少錯(cuò)誤。正因如此，在 Flutter 中，Dart 幾乎放棄了腳本語言動(dòng)態(tài)化的特性，如不支持反射、也不支持動(dòng)態(tài)創(chuàng)建函數(shù)等。并且 Dart 在2.0強(qiáng)制開啟了類型檢查（Strong Mode），原先的檢查模式（checked mode）和可選類型（optional type）將淡出，所以在類型安全這個(gè)層面來說，Dart 和 TypeScript、CoffeeScript 是差不多的，所以單從這一點(diǎn)來看，Dart 并不具備什么明顯優(yōu)勢(shì)，但綜合起來看，Dart 既能進(jìn)行服務(wù)端腳本、APP 開發(fā)、web 開發(fā)，這就有優(yōu)勢(shì)了！
綜上所述，筆者還是很看好 Dart 語言的將來，之所以表這個(gè)態(tài)，是因?yàn)樵谛录夹g(shù)發(fā)展初期，很多人可能還有所搖擺，有所猶豫，所以有必要給大家打一劑強(qiáng)心針，當(dāng)然，這是一個(gè)見仁見智的問題，大家可以各抒己見。
更多建議：