The dart:js library

The core set of Dart libraries include dart:js to facilitate interoperation between the Dart and JavaScript code. The Dart code can create new instances, invoke methods, and read and write properties of the code written in JavaScript. While communicating, the dart:js library translates the JavaScript objects to Dart objects and vice versa, or uses proxy classes. Let's take a look at the class hierarchy of the dart:js library:

The dart:js library

JsObject

Similar to an Object class in JavaScript, JsObject is a main class in the dart:js library. It represents a proxy of a JavaScript object and provides the following advantages:

  • Access to all the properties of the underlying JavaScript object by indexing the [] and []= operators
  • Access to invoke any methods of the underlying JavaScript object through callMethod
  • Access to the global JavaScript object (usually window) in the web browser through the context property
  • Usage of the instanceOf method to check if the underlying JavaScript object has the specified type in its prototype chain
  • Checks the existence of the property of the underlying JavaScript object via the hasProperty method; this method is equivalent to the in operator in JavaScript
  • Any property of the underline JavaScript object can be removed with the deleteProperty method; this method is equivalent to the delete operator in JavaScript

JsObject can be acquired from the JavaScript object or can be created using the following factory constructors:

  • factory JsObject(JsFunction constructor, [List arguments]): This constructor creates a new JavaScript object from the JavaScript constructor function and returns a proxy on it.
  • factory JsObject.fromBrowserObject(object): This constructor creates a new JavaScript object from a native Dart object and returns a proxy on it. Use this factory constructor only if you wish to access the properties of the browser-hosted objects such as Node or Blob. This constructor throws an exception if the object is null or has the type bool, num, or string.
  • factory JsObject.jsify(object): This constructor creates a new JavaScript object or an array from the Dart Map or Iterable and returns a proxy on it. This constructor recursively converts each Dart object from the collection into a JavaScript object.

A library has a top-level context getter that provides the JsObject class instance, which represents the JavaScript global object in a web browser, as shown in the following code:

import 'dart:js' as js;

void main() {
  print('Context is ${js.context}'),
}

The print result of the preceding code confirms that the context points to the Window object:

Context is [object Window]

Let's assume we need to log some information on the console from Dart. This can be done as follows:

import 'dart:js' as js;

void main() {
  js.JsObject console = js.context['console'];
  console.callMethod('log', ['Hello World!']);
}

Firstly, we used js.context to receive the proxy of the JsObject console object. Then, we used callMethod of JsObject to invoke the log function of the console. The second optional argument of callMethod delivers arguments in the underline JavaScript function. Finally, we get the Hello World! message on the web browser's console.

Note

The context returns null if the requested object does not exist.

JsFunction

The next important piece of JavaScript is the Function type. The dart:js library has the JsFunction class that extends JsObject to represent a proxy to the JavaScript function. To call the alert JavaScript function from the Dart code, you can use the following code:

import 'dart:js' as js;

void main() {
  js.JsFunction alert = js.context['alert'];
  alert.apply(['Hello World!']);
}

When we get a proxy of the alert function, we invoke the apply method with a list of parameters and get the following result:

JsFunction

JsArray

An array in JavaScript is the object used to store multiple values in a single variable. JsArray extends the JsObject class by representing a JavaScript array and proxy underlying instance to be available in the Dart code. I created a JavaScript code with the colors array, as shown in the following code:

var colors = ['red', 'green', 'white'];

To get all the colors and print them in Dart, we use the following code:

import 'dart:js' as js;

void main() {
  js.JsArray colorsArray = js.context['colors'];
  print(colorsArray);
}

Now, we assign a proxy to the array from the colors in JavaScript and finally print them all, as shown in the following screenshot:

JsArray

If you select the colorsArray property in the variable inspector of Dart Editor when it reaches the breakpoint, you might see a set of items from the JavaScript array:

JsArray
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.79.147