vivo TWS Air開箱體驗：真輕 臻好聽
在vivo S15系列新機的發布會上，vivo的最新款真無線藍牙耳機vivo TWS Air也一同發布，本次就這款耳機新品給大家帶來一個簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產
由于在 Dart 3.3 中達到了令人興奮的 JavaScript 互操作里程碑，Wasm 的支持剛剛登陸當前的 Flutter 測試版。為了慶祝這一里程碑，我們回顧了 Dart 和 JavaScript 互操作性長達十年的歷程。
從 Dart 誕生之初，互操作性就是一個核心重點。2011 年 Dart 首次發布時，它被設計為可嵌入和多平臺的。它可以運行在獨立的虛擬機上，嵌入到瀏覽器中，并編譯為 JavaScript。2015 年 Flutter 出現時，我們也準備將其嵌入其中。現在，我們也很高興能將 WasmGC 運行時作為目標。
起初，我們很快就暴露了嵌入 Dart 的各個平臺的功能。這就是我們的 SDK 平臺特定庫出現的方式：dart:io 暴露了虛擬機上的文件系統，dart:html 暴露了 Web 上的瀏覽器 API，等等。這些庫在外觀和感覺上都與普通的 Dart 庫無異，但其背后卻隱藏著一些復雜的底層本地原語，以使它們能正常工作。這是我們發明的第一種互操作形式。它具有很強的表現力，但僅限于 SDK 庫。
在 Web 上，開發人員需要訪問的不僅僅是瀏覽器 API。因此，我們開始研究如何開放互操作性，以覆蓋更多目標。作為起點，我們在 2013 年推出了 dart:js，以實現對 JavaScript 庫的訪問。
// 用于說明 Dart/JS 互操作的簡短 JavaScript 代碼示例window.myTopLevel = { field1: 0, method2() { return this.field1; }}// 通過“dart:js”訪問（2013）import 'dart:js' as js;void main() { // 這一行有一個錯字！哎呀 :( var object = js.context['myTopLevl']; object['field1'] = 1; // 此調用因 noSuchMethod 失敗，因為 method2 返回一個 int，哎呀 object.callMethod('method2', []).substr(1);}我們當時就知道，dart:js 并不是我們想要的編程模型。你必須使用字符串來訪問 JavaScript 中的名稱--別提在編譯時發現問題了，也別提代碼自動補全了！實現成本也很高。大多數操作都嚴重依賴盒和深度拷貝。因此，我們在 2014 年和 2015 年繼續起草各種想法，直到 package:js 的 v0.6 版本發布。
// 通過 `package:js` 訪問 (2015)import 'package:js/js.dart';// @JS 注解允許我們聲明 API 簽名：@JS()class MyObject { external int get field1; external void set field1(int value); external String method2();}@JS()external MyObject get myTopLevel;void main() { // 訪問代碼不容易出錯：分析器可以檢查 // 這些符號與聲明相匹配，而且我們還能獲得代碼補全！ var object = myTopLevel; object.field1 = 1; // 但是沒有檢查類型，這就在一個 int 上調用了子串，這是不正確的。 object.method2().substring(1);}有了 package:js，我們終于有了高效、用戶友好的開放式 API。你可以在抽象類上添加一些注解，然后就可以訪問 JavaScript API 了。這一切就像魔法一樣神奇，直到它失效。使用 package:js 有很多無法實現的功能：直接訪問瀏覽器 API、重命名成員、轉換、附加 Dart 邏輯等等。為了彌補這些不足，我們還提供了 dart:js_util--一個類似于 dart:js 的輕量級、高效的底層 API 作為備用。package:js 中的所有限制確實困擾著我們，但我們束手無策。我們需要更多的 Dart 語言來做得更好。
大約在那個時候，我們已經在致力于對語言進行有史以來最大的改變——我們讓 Dart 聽起來更有趣。諷刺的是，當我們在 2018 年發布帶有 Dart 2.0 的新類型系統時，互操作性變得更糟！除了這些早期的限制之外，使 package:js 變得特別的魔法也有一個黑暗的一面——它無法檢查類型的有效性。這意味著我們的互操作性是我們原本健全的語言中不健全的根源。
之后，我們的工作重心發生了變化，轉而集中精力改進 Dart 和 JS-interop。我們遵循明確的原則（習慣化、表現力強、組合性強、精確、平易近人、務實、非神化和完整），轉向以類型和靜態分派為基礎的設計，并對 Dart 語言提出了挑戰。接下來的發展是并行的。
那一年，我們為 WasmGC 引入了編譯功能，并利用 JS 互操作在其上運行 Flutter web 等豐富的框架。這引發了 JS Types 的工作，以在編程模型中明確定義 Dart 和 JS 的邊界，并找到在 Wasm 和 JS 編譯目標中使用 JS 的一致方法。我們還開始了擴展類型語言實驗--這是 Dart 3.3 中推出的一項功能，它在 Dart 語言和 JS 互操作之間架起了一座橋梁。多年來，JS 互操作的行為（如類型擦除）與 Dart 中的任何其他行為都不匹配。有了擴展類型，JS 互操作終于可以習以為常，并在 Dart 開發工具中獲得應有的支持。
盡管一路走來經歷了許多轉變和轉折，但有一件事在整個十年中始終如一：我們的 Dart 社區的積極參與。社區成員采取了早期步驟測試并為 dart:js 做出貢獻，然后影響 package:js 的設計。他們編寫了工具來解決功能差距 (package:js_wrapping[1])，并嘗試通過自動生成 Dart API 來提高生產力的方法 (package:js_facade_gen[2] 、 package:js_bindings[3] 、 package:typings[4])
最后，我們已經到了 2024 年了。我們在 Dart 3.3 中發布了 dart:js_interop 以及 package:web ，這是 Dart 中 JS 互操作的最新解決方案，使將 Flutter 編譯為 Wasm 成為可能。
// 通過 `dart:js_interop` 訪問 (2024)import 'dart:js_interop';// 聲明使用擴展類型，這與 package:js// 聲明非常相似。主要區別在于：它們是靜態調度的。extension type MyObject._(JSObject _) implements JSObject { external int get field1; external void set field1(int value); external String method2();}@JS()external MyObject get myTopLevel;void main() { var object = myTopLevel; object.field1 = 1; // At last, access is sound - this line fails with a type error // when returning from method2. object.method2().substring(1);}今天，我們很高興慶祝 Dart/JS 互操作的新形式及其所帶來的未來。了解我們的過去，我們確信這不是旅程的終點，而是我們歷史上令人興奮的時刻。
我們迫不及待地想看看您將用它構建什么！
原文：https://medium.com/dartlang/history-of-js-interop-in-dart-98b06991158f
[1]package:js_wrapping: https://github.com/a14n/dart-js-wrapping
[2]package:js_facade_gen: https://github.com/dart-archive/js_facade_gen
[3]package:js_bindings: https://pub.dev/packages/js_bindings
[4]package:typings: https://pub.dev/packages/typings
本文鏈接：http://www.www897cc.com/showinfo-26-82365-0.htmlDart 中 JS 互操作的歷史，你知道嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 教你如何玩轉Next Image
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號