dart
डार्ट-जावास्क्रिप्ट इंटरऑपरेबिलिटी

परिचय

एक वैश्विक समारोह का आह्वान

मान लीजिए कि हम जावास्क्रिप्ट फ़ंक्शन JSON.stringify को प्राप्त करना चाहते हैं, जो एक ऑब्जेक्ट प्राप्त करता है, इसे JSON स्ट्रिंग में एन्कोड करता है और इसे वापस करता है।

हमें बस इतना करना होगा कि फ़ंक्शन हस्ताक्षर लिखें, इसे बाहरी के रूप में चिह्नित करें और इसे @JS एनोटेशन के साथ एनोटेट करें:

 @JS("JSON.stringify")
external String stringify(obj);

@JS एनोटेशन का उपयोग यहाँ से डार्ट क्लासेस को चिन्हित करने के लिए किया जाएगा जिसे हम जावास्क्रिप्ट में भी उपयोग करना चाहते हैं।

जावास्क्रिप्ट कक्षाएं / नामस्थान लपेटना

मान लीजिए कि हम Google मैप्स जावास्क्रिप्ट एपीआई google.maps को लपेटना चाहते हैं:

@JS('google.maps')
library maps;

import "package:js/js.dart";

@JS()
class Map {
  external Map(Location location);
  external Location getLocation();
}

अब हमारे पास मैप डार्ट क्लास है जो जावास्क्रिप्ट google.maps.Map क्लास से मेल खाती है।

डार्ट में new Map(someLocation) चलने से जावास्क्रिप्ट में new google.maps.Map(location) होगा।

ध्यान दें कि आपको अपने डार्ट वर्ग का नाम जावास्क्रिप्ट वर्ग के समान नहीं रखना है:

@JS("LatLng")
class Location {
  external Location(num lat, num lng);
}

Location Dart वर्ग google.maps.LatLng वर्ग से मेल खाता है।

असंगत नामों का उपयोग हतोत्साहित किया जाता है क्योंकि वे भ्रम पैदा कर सकते हैं।

वस्तु शाब्दिक पासिंग

फ़ंक्शंस में ऑब्जेक्ट शाब्दिक पास करने के लिए जावास्क्रिप्ट में यह आम बात है:

// JavaScript
printOptions({responsive: true});
Unfortunately we cannot pass Dart Map objects to JavaScript in these cases.

हमें जो करना है वह एक डार्ट ऑब्जेक्ट बनाता है जो ऑब्जेक्ट शाब्दिक का प्रतिनिधित्व करता है और इसके सभी क्षेत्र शामिल हैं:

// Dart
@JS()
@anonymous
class Options {
  external bool get responsive;

  external factory Options({bool responsive});
}

ध्यान दें कि Options डार्ट क्लास किसी भी जावास्क्रिप्ट क्लास के अनुरूप नहीं है। जैसे कि हमें इसे @anonymous एनोटेशन के साथ चिन्हित करना चाहिए।

अब हम मूल PrintOptions फ़ंक्शन के लिए एक स्टब बना सकते हैं और इसे एक नए विकल्प ऑब्जेक्ट के साथ कॉल कर सकते हैं:

// Dart
@JS()
external printOptions(Options options);

printOptions(new Options(responsive: true));