繁体   English   中英

在Vanilla JS中将Javascript对象绑定到DOM元素

[英]Binding Javascript Objects to DOM Elements in Vanilla JS

因此,这主要是最佳Javascript做法的问题。 我正在使用香草JS创建一个闹钟库。

它类似于:

HTML

<div>current time</div>
<form> ... </form>         <!-- create new alarm -->
<ul id="alarms"></ul>

JS

 // init variables to select DOM elements
 var Alarm = function() {
   // has a ring function, private vars for name, ringtone, time, isActive
 }
 var AlarmClock = function() {
    var alarms = []
    this.createAlarm = function() {
      // creates Alarm and pushes it to alarms array
      // also creates Alarm DOM element to append to the <ul>
    }
 }

我绝对觉得为警报创建DOM元素和Javascript对象是多余的,所以我想知道是否可以将它们合并到一个方法中? 我认为我们可以将DOM Elements推送到AlarmClock类中的alarms数组,以便在实现警报删除时,可以将其拼接起来,而DOM对象将消失。

或者,如果有某种方法可以将HTML DOM元素绑定到Javascript类。 我看着这个提示使用jQuery数据(),但我想与香草JS来完成它。 我以为我也可以只向引用相应DOM元素的Alarm对象添加一个属性,但是我很想听听一些经验丰富的程序员对最佳实践的看法。

我写的关于JavaScript对象的文章中

在JavaScript中,所有内容都是对象,即使其他内容也是如此。 功能是对象。 字符串是对象。 数字是对象。 数组是对象。 对象就是对象。 结果,任何事物都可以分配有属性。

这意味着,可以将这些属性直接分配给DOM节点(或更具体地说,将其缓存到JS变量)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM