json

Flutter系列的文章我會持續(xù)更新一個月左右，力求利用1個月帶大家入門Flutter，抓住這波技術風口，歡迎大家關注。同時如果覺得這里代碼排版不是很舒服的讀者可以關注我的微信公眾號“IT工匠”，我會同步更新，另外微信公眾號上還有很多互聯(lián)網(wǎng)必備資源（涉及算法、數(shù)據(jù)結構、java、深度學習、計算機網(wǎng)絡、python、Android等互聯(lián)網(wǎng)技術資料），歡迎大家關注、交流。

本文目錄如下：

概述

現(xiàn)在大多數(shù)app都需要與Web服務器進行通信，而要與Web服務器端進行通信，就必須選擇一種文本格式進行傳輸，當前用到最多的可能是JSON格式，我們通常會將需要發(fā)送的數(shù)據(jù)序列化為JSON格式的字符流進行傳輸，本文主要介紹如何正確地在Flutter中使用JSON。

術語解釋：編碼和序列化是一個東西，二者都是指將數(shù)據(jù)結構轉(zhuǎn)換為字符串（序列化的定義1）。解碼和反序列化是編碼和序列化的相反過程：將字符串轉(zhuǎn)換為數(shù)據(jù)結構。但是，序列化通常也指將數(shù)據(jù)結構轉(zhuǎn)換為更易于閱讀的格式的整個過程（序列化的定義2）。

為避免混淆，本文中提到的“序列化”指的是序列化的定義2。

我們應該選擇哪種JSON序列化方法？

本文主要介紹JSON序列化的兩種方法：

手動序列化使用代碼進行自動序列化

不同的項目具有不同的復雜性和場景，對于小項目或者示例項目來說，使用代碼自動序列化顯得大材小用，對于復雜度較高的JSON實例（比如有較多層次的嵌套），手動序列化就會顯得很繁雜，而且容易出現(xiàn)錯誤。

在小項目中進行手動序列化

手動進行JSON的解碼是指使用dart:convert包內(nèi)置的JSON解碼器進行解碼。做法是將原始JSON字符串傳遞給jsonDecode（）函數(shù)，然后在該函數(shù)的返回值（返回值類型為Map <String，dynamic>）中查找所需的值。這種方法不需要任何外部依賴，比較適合在小項目或者復雜度較低的應用場景下使用。

當項目變大時，手動解碼就會暴露出其缺點：手動編寫解碼邏輯可能很容易出現(xiàn)錯誤，如果由于拼寫錯誤等原因試圖訪問JSON中不存在的字段，代碼會在運行時拋出異常從而導致應用崩潰。

如果你的項目中沒有很多JSON模型，并且應用常見比較簡單，那么手動序列化會比較適合你。

在大型項目中使用代碼自動序列化

使用代碼自動進行JSON序列化是指我們使用外部庫進行編碼樣板的生成，通過一些初始設置后，就可以使用外部庫進行模型類代碼的生成，json_rializable和built_value是我們比較經(jīng)常用到的外部庫。

這種方法適用于較大的或者是應用場景比較復雜的項目，特點是不需要手動編寫的樣板文件，并且可以在編譯時捕獲可能存在的JSON字段的錯誤訪問。當然這種方法也是有缺點的：它需要一些初始設置，而且外部庫生成的源文件會造成我們項目的結構視圖顯得有點混亂，強迫癥選手可能會有點心痛。

這種方法我會在下面進行實例講解。

兩種序列化方法實踐

手動序列化JSON

Flutter中實現(xiàn)基本的JSON序列化非常簡單，F(xiàn)lutter有一個內(nèi)置dart:convert庫，其中包含一個簡單的JSON編碼器和解碼器。

以下是一個JSON字符串：

{ "name": "John Smith", "email": "john@example.com"}

基于dart:convert包，我們可以用兩種方式來將這個字符串解析為我們的變量：

內(nèi)聯(lián)序列化JSON在模型類中序列化JSON

內(nèi)連序列化JSON

我們可以通過調(diào)用JSON.decode()方法來解碼JSON字符串 ，只需要將待解析的JSON字符串作為該方法的參數(shù)傳入進去即可：

Map<String, dynamic> ur = JSON.decode(json);print('Howdy, ${ur['name']}!');print('We nt the verification link to ${ur['email']}.');

這種方法的缺點是，JSON.decode()的返回值類型是Map<String, dynamic>的，這意味著我們直到運行時才能知道值的類型，這樣我們失去了大部分靜態(tài)語言的特性：類型安全、自動補全和最重要的編譯時異常檢測。

這里解釋一下這個編譯時異常檢測：一般來說異常/錯誤會發(fā)生在兩個地方：編譯時、運行時。如果錯誤是在編譯時發(fā)生，我們可以很容易地定位到出現(xiàn)錯誤的位置并及時改正，但是如果異常發(fā)生在運行時，就會在對應異常被觸發(fā)時導致整個應用崩潰退出，而且較難排查異常原因。所以，最好的場景是盡可能將可能出現(xiàn)的異常解決在編譯階段，而等運行時出現(xiàn)異常才去解決。

例如，當我們試圖訪問name或email字段時，一不小心將字段名打錯了，由于這個解碼后的JSON在存儲在map結構中，編譯器不可能再編譯時檢測到我們字段名的輸入錯誤，所以編譯時不會出錯，但是運行時會出現(xiàn)異常，甚至導致整個應用程序崩潰退出，用戶體驗很不好。

在模型類中序列化JSON

我們可以通過引入一個簡單的模型類(model class)來解決上一小節(jié)提到的問題，以上一小節(jié)的實例來說，我們可以引入一個稱之為Ur的模型類。在Ur類內(nèi)部，我們有：

一個Ur.fromJson() 構造函數(shù), 用于從一個map構造出一個 Ur實例(對應反序列化/解碼)一個toJson() 方法, 用于將 Ur 實例轉(zhuǎn)化為一個map(對應序列化/編碼)

代碼在執(zhí)行的時候可以具有類型安全、自動補全字段（name和email）以及編譯時異常檢測。如果我們使用了拼寫錯誤的字段,我們的應用程序會在編譯時報錯，而不是在運行時使應用程序崩潰。

具體的代碼實現(xiàn)是這樣的：

ur.dart

class Ur { final String name; final String email; Ur(this.name, this.email); Ur.fromJson(Map<String, dynamic> json) : name = json['name'], email = json['email']; Map<String, dynamic> toJson() => { 'name': name, 'email': email, };}

現(xiàn)在，我們在模型類的內(nèi)部實現(xiàn)了序列化和反序列化的邏輯，這樣我們就可以非常容易地對ur進行解碼：

Map urMap = JSON.decode(json);var ur = new Ur.fromJson(urMap);print('Howdy, ${ur.name}!');print('We nt the verification link to ${ur.email}.');

要序列化/編碼一個ur，我們需要將需要序列化的Ur對象傳遞給JSON.encode()方法，不需要手動調(diào)用ur.toJson()這個方法，因為JSON.encode(ur)底層會為我們調(diào)用ur.toJson()方法：

String json = JSON.encode(ur);

以上就是兩種手動序列化JSON的實現(xiàn)方法，這種方法在應用場景簡單的情況下可以很好地實現(xiàn)我們的序列化需求，但是如果出現(xiàn)像多層JSON嵌套這樣的復雜應用場景，上述方法就顯得有點捉襟見肘了，所以我們需要了解如何使用代碼生成庫來進行JSON的序列化，這樣可以大大提高生產(chǎn)力，Let's Go!

使用代碼生成庫序列化JSON

FLutter有不止一種代碼生成庫可以使用，在本例中，我們使用json_rializable這個庫，它是Flutter官方推薦的一個序列化的庫，主要的功能是自動化生成序列化源代碼(核心在于為我們自動生成上面提到的fromJson()構造方法和toJson()方法)。

在項目中引入json_rializable依賴

要將json_rializable庫包含到我們的項目中，我們需要一個常規(guī)依賴項（dependencies）和兩個開發(fā)依賴項（dev_dependencies），很多人可能不清楚常規(guī)依賴項和開發(fā)依賴項的區(qū)別，一句話解釋就是我們最終發(fā)布的應用程序源代碼中是不包含開發(fā)依賴項的，但是包含常規(guī)依賴項。

我們可以在https://github.com/dart-lang/json_rializable/blob/master/example/pubspec.yaml查看當前依賴庫的最新版本，我寫這篇文章的時候最新版本如下：

pubspec.yaml

dependencies: json_annotation: ^2.4.0dev_dependencies: build_runner: ^1.0.0 json_rializable: ^3.0.0

完成pubspec.yaml文件中的依賴項添加之后，可以在你項目的根目錄下運行 flutter packages get 或者在編輯器中點擊 “Packages Get”以將這些這些依賴項的必要資源下載到本地。

基于json_rializable創(chuàng)建model類

讓我們看看如何將我們的Ur類轉(zhuǎn)換為一個json_rializable。為了簡單起見，我們使用前面示例中的簡化JSON model。

ur.dart

import 'package:json_annotation/json_annotation.dart';// ur.g.dart這個文件現(xiàn)在還沒有（所以會報錯，但是不要慫，就是剛），但是直接按照這個格式寫就好，在一會運行完生成命令之后這個文件會自動生成part 'ur.g.dart';///這個注解是告訴生成器，這個類是需要生成Model類的@JsonSerializable()class Ur{ Ur(this.name, this.email); String name; String email; //不同的類使用不同的mixin即可，注意格式一定要寫正確 factory Ur.fromJson(Map<String, dynamic> json) => _$UrFromJson(json); Map<String, dynamic> toJson() => _$UrToJson(this);}

完成了上述代碼中的配置后，源碼生成器將會為我們生成用于序列化name和email字段的JSON代。需要說明的是，如果像上面那樣配置，默認最后生成的JSON字符串中的鍵為name和email，如果你想自定義命名策略，比如你想讓變量名為name的變量和JSON字符串中名為MyName的鍵對應起來，可以使用@JsonKey注解來進行實現(xiàn)：

@JsonKey(name: 'MyName')final String name;

運行代碼生成程序

json_rializable第一次創(chuàng)建類時，您會看到與下圖類似的錯誤。

這些錯誤是完全正常的，這是因為剛寫好這個代碼的時候ur.g.dart（該文件存儲生成的代碼）還不存在，需要我們運行代碼生成程序才能生成這個文件，一般來說有兩種運行代碼生成器的方法：

一次性生成通過在我們項目的根目錄下運行flutter pub run build_runner build命令，我們可以為模型生成JSON序列化代碼。這個命令會觸發(fā)一次性構建（one-time build），構建過程中會遍歷源文件，選擇需要生成JSON序列化代碼的文件，為它們生成必要的序列化代碼。這種做法的優(yōu)點是可以僅僅通過一條命令搞定代碼的生成，缺點是如果我們這次生成完了代碼，下次對Modek類進行了一點改動，那么原來生成的代碼就不能用了，必須重新運行上述命令進行生成，難免有些麻煩。持續(xù)生成使用watcher可以使我們源代碼的生成過程更加方便，它會監(jiān)聽我們項目中文件的變化，在必要時自動構建必要的文件。我們可以通過在項目根目錄下運行flutter packages pub run build_runner watch命令來啟動watcher。這樣我們只需啟動一次watcher，他就會一直在在后臺運行，不存在任何安全隱患。

實現(xiàn)最終的序列化和反序列化

要通過json_rializable方式反序列化JSON字符串，我們不需要對先前的代碼進行任何修改：

Map urMap = JSON.decode(json);var ur = new Ur.fromJson(urMap);

序列化也和之前的代碼一樣：

String json = JSON.encode(ur);

有了json_rializable，我們可以不用在Ur類上進行任何手動的JSON序列化 ，源代碼生成器會為我們創(chuàng)建一個名為ur.g.dart的文件，它具有所有必需的序列化邏輯，在提供快捷性的前提下還可以保證不會出錯，真是太香了。

Flutter中是否存在GSON/Jackson/Moshiquivalent這些類庫？

答案是不存在~

原因在于，這些類庫需要使用運行時反射，這在Flutter中是禁用的。運行時反射會干擾Dart的tree shaking。這個tree shaking的作用是，我們可以在打包程序時去除那些沒有實際使用到的代碼，這可以顯著減小應用程序的大小。而反射會默認使用所有代碼，因此tree shaking就會失靈。

筆者結語

其實在Android或者其他平臺用過像GSON這類第三方庫的人可能都能很明顯感覺到Flutter在JSON序列化這塊的缺點，目前Flutter還沒有一個像GSON這樣簡單易用的JSON序列化解決方案，但是相信隨著Flutter生態(tài)的不斷完善，會出現(xiàn)一些更好的開源解決方案，如果一直沒有，筆者會利用閑余時間自己寫一套，屆時也將開源在此處，歡迎大家關注~

好了，以上就是本文的所有內(nèi)容，我們昨天預告本來今天要更新Flutter動畫相關的內(nèi)容，但是今天梳理了一下動畫部分的內(nèi)容，發(fā)現(xiàn)內(nèi)容很多，所以決定先更新Flutter中最核心的部分，至于動畫這些加分技能會在更新完核心部分后逐步更新，歡迎大家持續(xù)關注，最后預告一下我們明天的更新內(nèi)容：明天我會向大家介紹如何在Flutter中實現(xiàn)平臺特定代碼的編寫，比如Flutter如何與Android/Ios平臺的代碼進行通信、Flutter如何訪問平臺特定API等，我們明天見~