Это обновление к моему предыдущему вопросу, и я публикую весь код как есть, плюс то, что я хотел бы добавить к нему.Спасибо всем за их поддержку.
По сути, я пытаюсь создать очередь или массив, который будет содержать объекты Clip, каждый из которых имеет три различных свойства: url, inpoint и outpoint.Этот массив будет ядром моей системы, которая будет хранить различные видео Youtube с использованием API YouTube, чтобы пользователь мог по существу редактировать и отслеживать видео, которые они вводят в массив.Этот массив я назвал Timeline и должен иметь возможность вставлять новые объекты, переставлять другие элементы и т. Д.
Сейчас я пытаюсь заставить его просто вставить новый объект;однако, когда я пытаюсь запустить очередь, она отображает только предупреждение о том, что я должен добавить что-то в очередь.Я оглядывался по сторонам и, похоже, не могу найти очень хороший пример того, как это сделать, поэтому начинаю задумываться, а хороша ли вообще моя логика решения этой проблемы.
<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);
}
Я уже сделал очень простую версию этого уже без ООП здесь .Я думал, что ООП увеличит гибкость моего кода и позволит мне хранить несколько объектов, содержащих больше информации.
Я извиняюсь, если что-то из этого кажется слишком простым, но мне любопытно, действительно ли ООП действительно такпойти на такого рода проблемы.