Summary of calling js methods in Kotlin

This article mainly introduces the relevant information about the detailed explanation of the method instance of calling JavaScript in the Kotlin language. Friends in need can refer to the detailed explanation of the instance of calling the JavaScript method in the Kotlin language.

Kotlin has been designed to easily interoperate with the Java platform. It treats Java classes as Kotlin classes, and Java treats Kotlin classes as Java classes. However, JavaScript is a dynamically typed language, which means it does not check types at compile time. You can freely communicate with JavaScript in Kotlin through dynamic typing, but if you want the full power of the Kotlin type system, you can create Kotlin header files for your JavaScript libraries.

Inline JavaScript

You can embed some JavaScript code into Kotlin code using the js("...") function. For example:

fun jsTypeOf(o: Any): String {
 return js("typeof o")
}

js parameters must be
string

constants. Therefore, the following code is incorrect:

fun jsTypeOf(o: Any): String {
 return js(getTypeof() + " o") // 此处报错
}
fun getTypeof() = "typeof"

external modifier

tells Kotlin that a certain declaration is made in pure JavaScript written, you should mark it with the external modifier. When the compiler sees such a declaration, it assumes that the implementation of the corresponding class, function, or property was provided by the developer, and therefore does not attempt to generate any JavaScript code from the declaration. This means you should omit the body of the external declaration content. For example:

external fun alert(message: Any?): Unit

external class Node {
 val firstChild: Node

 fun append(child: Node): Node

 fun removeChild(child: Node): Node

 // 等等
}
external val window: Window

Please note that nested declarations inherit the external modifier, that is, in the Node class, we do not place external before member functions and properties.

The external modifier is only allowed in package-level declarations. You cannot declare an external member of a non-external class.

Declaring (

static

) members of a classIn JavaScript, you can define members on the prototype or on the class itself. That is:

function MyClass() {
}
MyClass.sharedMember = function() { /* 实现 */ };
MyClass.prototype.ownMember = function() { /* 实现 */ };

There is no such syntax in Kotlin. However, in Kotlin we have companion objects. Kotlin treats companion objects of the external class in a special way: instead of expecting an object, it assumes that the members of the companion object are members of the class itself. To describe MyClass from the above example, you could write:

external class MyClass {
 companion object {
  fun sharedMember()
 }

 fun ownMember()
}

Declare optional parameters

An external function can There are optional parameters. How the JavaScript implementation actually calculates the default values ​​of these parameters is unknown to Kotlin, so it is not possible to declare these parameters using the usual syntax in Kotlin. You should use the following syntax:

external fun myFunWithOptionalArgs(x: Int,
 y: String = definedExternally,
 z: Long = definedExternally)

This means you can call myFunWithOptionalArgs with one required argument and two optional arguments (their default values ​​are figured out by some JavaScript code ).

Extending JavaScript classes

You can easily extend JavaScript classes because they are Kotlin classes. Just define an external class and extend it with non-external classes. For example:

external open class HTMLElement : Element() {
 /* 成员 */
}

class CustomElement : HTMLElement() {
 fun foo() {
  alert("bar")
 }
}

There are some restrictions:

When a function of an external base class is signed

overloaded

, it cannot be derived class override it.

Cannot override a function that uses default parameters.

Please note that you cannot extend a non-external class with an external class.

external interface

JavaScript has no concept of interface. When a function expects its arguments to support foo and bar methods, just pass the object that actually has those methods. For statically typed Kotlin, you can express this using interfaces, for example:

external interface HasFooAndBar {
 fun foo()

 fun bar()
}

external fun myFunction(p: HasFooAndBar)

Another use case for external interfaces is to describe settings objects. For example:

external interface JQueryAjaxSettings {
 var async: Boolean

 var cache: Boolean

 var complete: (JQueryXHR, String) -> Unit

 // 等等
}

fun JQueryAjaxSettings(): JQueryAjaxSettings = js("{}")

external class JQuery {
 companion object {
  fun get(settings: JQueryAjaxSettings): JQueryXHR
 }
}

fun sendQuery() {
 JQuery.get(JQueryAjaxSettings().apply {
  complete = { (xhr, data) ->
   window.alert("Request complete")
  }
 })
}

External interfaces have some restrictions:

They cannot be used on the right side of an is check. as conversion to an external interface always succeeds (and produces a warning at compile time).

They cannot be passed as reified type parameters.

They cannot be used in class literal
expressions
(i.e. I
::class).

The above is the detailed content of Summary of calling js methods in Kotlin. For more information, please follow other related articles on the PHP Chinese website!