Javascript interop assignment in Clojurescript

ClojureScript is a Lisp dialect that compiles to JavaScript, providing functional programming features and immutability while leveraging the power of the JavaScript ecosystem. One of the most important features of ClojureScript is its interoperability with JavaScript. In this article, we will explore how to work with JavaScript objects in ClojureScript using interop assignment.

Interop Assignment

Interop assignment allows us to access and modify properties on JavaScript objects from ClojureScript. We can use it to call JavaScript functions, manipulate DOM elements, or interact with any JavaScript library.

To access a property on a JavaScript object, we use .- followed by the property name. For example:

(.-length "hello")
;; => 5

In this case, we are accessing the length property on the JavaScript string "hello". The result is returned as a ClojureScript number.

We can also use interop assignment to set properties on JavaScript objects. To do this, we use set! followed by the property name and the new value. For example:

(def my-object {})
(set! (.-name my-object) "John")
;; => "John"

In this case, we are creating an empty JavaScript object and setting its name property to "John". Note that set! returns the new value of the property.

Accessing JavaScript Libraries

One of the main benefits of interop assignment is its ability to work with JavaScript libraries. For example, let's say we want to use the lodash library in our ClojureScript code. First, we need to include the lodash script in our HTML file:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Now, we can access lodash functions in our ClojureScript code:

(def my-array [3 1 4 2])
(js/console.log (.-join (_ lodash) my-array ","))
;; => "3,1,4,2"

In this case, we are using the join function from lodash to join the elements of my-array into a string separated by commas. Note that we are using the _ symbol as a shorthand for the window object, which is where global JavaScript variables and functions are defined.

Manipulating DOM Elements

Interop assignment also allows us to manipulate the Document Object Model (DOM) of a web page. For example, let's say we have an HTML button with the id "my-button":

<button id="my-button">Click me!</button>

We can use interop assignment to add click event listener to the button:

(let [button (.getElementById js/document "my-button")]
  (set! (.-onclick button)
        (fn [event]
          (js/alert "Button clicked!"))))

In this case, we are using the getElementById function to get a reference to the button element, and then setting its onclick property to a new function that displays an alert message when the button is clicked.

Conclusion

ClojureScript's interop assignment feature provides a powerful way to work with JavaScript objects, libraries, and the DOM. By using it effectively, we can leverage the vast number of existing JavaScript resources while still enjoying the benefits of functional programming and immutability in our ClojureScript code.

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29104