gpt4 book ai didi

javascript - 使用 DOM 和封装方法,使用 Javascript OOP 传递参数。多少算太多?

转载 作者:行者123 更新时间:2023-11-28 10:15:10 29 4
gpt4 key购买 nike

这是对我之前问题的更新,我将按原样发布整个代码以及我想要添加的内容。感谢大家迄今为止的支持。

本质上,我正在尝试构建一个队列或数组来保存 Clip 对象,每个对象具有三个不同的属性:url、inpoint 和 outpoint。该数组将成为我系统的核心,它将使用 Youtube API 存储不同的 Youtube 视频,以便用户基本上可以编辑和提示他们输入数组的视频。我将这个数组称为时间轴,并且应该能够插入新对象、重新排列其他元素等。

现在我正在尝试让它插入一个新对象;但是,当我尝试运行队列时,它只会显示我应该向队列添加某些内容的警报。我一直在环顾四周,似乎找不到一个很好的例子来说明如何做到这一点,所以我开始怀疑我解决这个问题的逻辑是否有任何好处。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>Building an Array OOP - WIP</title>
<script type="text/javascript">

function Clip() {
this.url = userInput.url.value;
this.in = userInput.in.value;
this.out = userInput.out.value;
}

function Timeline() {
this.clips = [];

this.queue = function() {
this.clips.push(new Clip());
alert("Your url is: " + this.clips.length);
}

this.dequeue = function() {
if(this.clips.length != 0) this.clips.pop();
}

this.runQueue = function() {
if(this.clips.length == 0) {
alert("You need to add something to the queue.");
}
else {
var i = this.clips.length;
var slot = 0;
alert("in else.");
while(i!=0) {
document.getElementById('queue').innerHTML+= this.clips[slot].url + "<br>";
i--;
slot++;
}
}
}

}

var myTime = new Timeline();

</script>
</head>
<body>
<div id="wrapper">
<header id="mainHeader">
<h1>Building an Array with Object Oriented Programming</h1>
</header>
<section id = "addVideo">
<h1> Add a Video </h1>
<form name = "userInput">

<p>
Url: <input type="text" name="url" size="30" />
Start Time: <input type="text" name="in" size="2" />
End Time: <input type="text" name="out" size="2" />
<input type="button" onclick="myTime.queue()" value="Add" />
</p>
</form>

<!-- <table border = "1" id = "tblVideo">
<tr>
<th>Youtube URL</th>
</tr>
</table> //-->
</section>
<aside>
<h1>Show Contents of Timeline</h1>
<p>
<input type="button" onclick="myTime.runQueue()" value="Show Timeline" />

</p>
Your Queue:<br>
<div id="queue"></div>
</aside>
</div>
</body>

我很好奇我可以将多少个队列方法封装到 Timeline 对象中。我最终想添加 DOM 来更新一个表,其中包含添加到队列中的内容,并且很好奇我是否应该将其放入同一个对象中,或者将其分解到另一个函数中,如果是这样,我该如何传递争论?

这是我已经在代码中使用的函数示例,该函数用于获取 url 并通过简单地放置 addTableRow(url); 来更新队列中的表。在函数中,但我不确定如何用对象来实现它。你会直接写addTableRow(this.clips.url)吗?或者我应该将其封装到 Timeline 对象中?

    function addTableRow(url) {
function delayed() {
var table=document.getElementById("tblVideo");
var lastRow = table.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = table.insertRow(lastRow);
var cell1=row.insertCell(0);
cell1.innerHTML=url;
}
setTimeout(delayed,500);
}

我已经制作了一个非常简单的版本,没有看到任何 OOP here 。我认为 OOP 会提高代码的灵 active ,并允许我存储包含更多信息的多个对象。

如果这听起来过于简单,我深表歉意,但我很好奇 OOP 是否真的是解决此类问题的方法。

最佳答案

最初我的输入类型是提交,这不会更新数组

<input type="submit" onclick="myTime.queue()" value="Add" />

所以我将其更改为按钮。

<input type="button" onclick="myTime.queue()" value="Add" />

经过更多研究后,DOM 问题已经发展成为它自己的问题,这需要另一个问题。

关于javascript - 使用 DOM 和封装方法,使用 Javascript OOP 传递参数。多少算太多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6727978/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com