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:

--------- --------
-- -- -

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:

---- --------- ---
----- ------- ---------- -------
-- -- ------

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:

------- -------------------------------------------------------------------------

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

---- -------- -- - - ---
--------------- ------- -- ------- -------- -----
-- -- ---------

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":

------- -------------------- ------------

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

---- ------- ---------------- ----------- -------------
  ----- ---------- -------
        --- -------
          --------- ------- -------------

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


猜你喜欢

  • 如何在当前日期上添加20分钟?

    在前端开发中,我们经常需要进行日期和时间的计算。在这篇文章中,我们将讨论如何使用 JavaScript 在当前日期上添加20分钟。 Date 对象 JavaScript 中的 Date 对象用于处理日...

    7 年前
  • LeafletJS: 如何移除缩放控件

    在Leaflet中,缩放控件是一个常见的UI元素,通常用于允许用户控制地图的缩放级别。但是,在某些情况下,您可能需要完全删除缩放控件以自定义地图的外观和行为。本文将向您展示如何通过使用LeafletJ...

    7 年前
  • 如何在 JavaScript 中解码 JWT Token

    JWT(JSON Web Token)是一种轻量级的身份验证和授权机制,由于其简单、可扩展和跨平台等特点,在前端应用程序中得到广泛应用。然而,当我们从后端获取到 JWT Token 时,我们需要对其进...

    7 年前
  • Mongoose: Find, Modify, Save

    Mongoose 是 Node.js 中用于操作 MongoDB 的优秀 ORM 框架,它提供了一系列方便易用的 API,使得与 MongoDB 的交互变得更加高效。

    7 年前
  • 如何在 AngularJS 服务中创建自定义事件

    在使用 AngularJS 开发应用程序时,你可能需要在服务中发送自定义事件。本文将介绍如何在 AngularJS 服务中创建和触发自定义事件。 创建自定义事件 首先,在服务中创建自定义事件需要使用 ...

    7 年前
  • 如何将复选框设置为只读?

    在前端开发中,我们经常需要将表单元素设置为只读或禁用状态,以便用户无法编辑或更改其值。在某些情况下,我们可能需要保留表单元素的当前值,并且仍然允许它们在视觉上呈现为可选状态。

    7 年前
  • 是否存在“on DOM change”事件?[重复问题]

    在前端开发中,我们需要经常监听 DOM 元素的变化,并在变化发生时执行相应的操作。然而,在实际开发中,我们可能会遇到需要监听 DOM 变化却找不到适合的事件的情况。

    7 年前
  • 前端部署工具🛠

    在前端开发过程中,部署是一个至关重要的环节。良好的部署工具可以大大提高开发效率和代码管理方便性。本文将介绍几种常见的前端部署工具,并对其使用方法、优缺点以及实际应用进行详细讲解。

    7 年前
  • JavaScript:处理值为'undefined'的7个技巧

    在 JavaScript 中,当一个变量未被初始化或者赋值为 undefined 时,这个变量将拥有一个特殊的类型和值。在代码中没有处理好这种情况会导致各种错误和不可预知的行为。

    7 年前
  • 在大型网站中管理document.ready事件

    在前端开发中,我们经常需要在文档加载完成后执行一些JavaScript代码。为此,我们可以使用$(document).ready()方法或简写形式$(function(){})。

    7 年前
  • 如何为默认邮件客户端为 Gmail 的用户在新标签页中打开“mailto”链接?

    当用户点击网站上的“mailto”链接时,浏览器将尝试使用默认邮件客户端来创建一封新的电子邮件。然而,对于许多用户来说,他们的默认邮件客户端是 Gmail 而不是本地安装的邮件客户端。

    7 年前
  • PhoneGap 3 中的 alert 弹窗会导致“OK”崩溃浏览器

    在开发移动应用程序时,我们经常使用 PhoneGap 框架来构建跨平台的应用程序。然而,在使用 PhoneGap 3.0 版本时,你可能会遇到一个问题:当用户点击 alert 弹窗中的“OK”按钮时,...

    7 年前
  • 如何使用 webpack 在控制台中 require()?

    在前端开发中,我们经常需要在控制台中执行一些 JavaScript 代码来调试和测试。而在使用 webpack 进行模块化管理时,我们可能会遇到在控制台中无法直接访问模块的情况。

    7 年前
  • WebStorm IDE 的高效使用

    WebStorm 是一个强大的前端集成开发环境(IDE),提供了许多功能,可以帮助开发人员更快地编写代码并提高生产力。本文将介绍一些 WebStorm 的高效用法,包括: 快速导航 代码自动完成 调...

    7 年前
  • 使用 bootstrap-modal 作为 Backbone.js 视图

    Backbone.js 是一款流行的前端 JavaScript 框架,它提供了一套简单而强大的工具来帮助构建复杂的单页面应用程序。在使用 Backbone.js 进行视图管理时,一个常见的需求是显示模...

    7 年前
  • Speed of comparing to null vs undefined in JavaScript

    在 JavaScript 中,比较值是否为 null 或 undefined 经常是编写代码时需要考虑的问题。然而,这两者之间的比较速度却存在很大差异。让我们来深入了解一下这个问题,并探讨如何优化你的...

    7 年前
  • 在浏览器中的页面渲染过程

    在浏览器中展示网页的过程是一个复杂的流程,包括从服务器下载HTML、CSS和JavaScript文件,解析它们,创建DOM树和渲染页面等多个步骤。本文将详细介绍浏览器中的页面渲染过程。

    7 年前
  • AngularJS - 模块依赖和命名冲突

    简介 AngularJS 是一款流行的前端 JavaScript 框架,它采用模块化的方式组织代码。模块化是指将整个应用程序拆分成多个模块,每个模块都有自己的职责和功能,可以独立地开发、测试和维护。

    7 年前
  • 如何使用 jQuery 的 .ajax 方法取消正在进行的 AJAX 请求?

    在前端开发中,我们通常会使用 AJAX 技术来向服务器请求数据。但有时候我们可能需要取消正在进行的 AJAX 请求,比如用户在进行搜索时,如果频繁地输入关键词,就会发出多个 AJAX 请求,这时候就需...

    7 年前
  • JavaScript 中是否可以删除给定元素的所有事件处理程序?

    在前端开发中,我们通常需要为 HTML 元素添加事件处理程序。有时候我们想要移除一个元素的所有事件处理程序,这可能是因为我们希望重置元素到其默认状态,或者因为我们想要优化性能并避免不必要的事件绑定。

    7 年前

相关推荐

    暂无文章