Menampilkan Media dengan HTML dan JavaScript
Saya memiliki situs web pribadi yang saya gunakan untuk berbagi video dan gambar dengan teman. Di bawah ini adalah generator media yang menggunakan JavaScript dan HTML. Tujuan utamanya adalah untuk menampilkan gambar satu per satu dengan mengklik tombol, tetapi semua jenis media dapat ditampilkan. Tujuan saya adalah membuat halaman yang memuat cepat untuk menampung semua media saya.
//VIDEO ARRAY
var oddvideo = [
'video1',
'video2',
'video3',
'video4',
'video5',
];
//AUDIO ARRAY
var oddaudio = [
'audio1',
'audio2',
'audio3',
'audio4',
'audio5',
];
//PHOTO ARRAY
var oddphoto = [
'photo1',
'photo2',
'photo3',
'photo4',
'photo5',
];
//TEXT ARRAY
var oddtext = [
'text1',
'text2',
'text3',
'text4',
'text5',
];
//RANDOM UNUSED ARRAY ITEMS
var Uvideo = [];
var Uaudio = [];
var Uphoto = [];
var Utext = [];
//OLD-NEW VARIABLES
var videoFor = 0;
var audioFor = 0;
var photoFor = 0;
var textFor = 0;
//NEW-OLD VARIABLES
var videoRev = oddvideo.length - 1;
var audioRev = oddaudio.length - 1;
var photoRev = oddphoto.length - 1;
var textRev = oddtext.length - 1;
//GENERATOR FUNCTION
function newThing() {
//RANDOM MODE
if(mode1.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if (videoCheck.checked) {
if (!Uvideo.length) Uvideo = [...oddvideo];
var randomY = Uvideo;
}
if (audioCheck.checked) {
if (!Uaudio.length) Uaudio = [...oddaudio];
var randomY = Uaudio;
}
if (photoCheck.checked) {
if (!Uphoto.length) Uphoto = [...oddphoto];
var randomY = Uphoto;
}
if (textCheck.checked) {
if (!Utext.length) Utext = [...oddtext];
var randomY = Utext;
}
var randomX = Math.floor(Math.random() * (randomY.length));
var y = randomY;
var x = randomX;
document.getElementById("thingDisplay").innerHTML = y[x];
// remove randomx from the unused array since it's been used now
randomY.splice(randomX, 1);
}
//OLD-NEW MODE
if(mode2.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if(videoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddvideo[videoFor];
videoFor++;
if (videoFor >= oddvideo.length) videoFor = 0;
}
if(audioCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddaudio[audioFor];
audioFor++;
if (audioFor >= oddaudio.length) audioFor = 0;
}
if(photoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddphoto[photoFor];
photoFor++;
if (photoFor >= oddphoto.length) photoFor = 0;
}
if(textCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddtext[textFor];
textFor++;
if (textFor >= oddtext.length) textFor = 0;
}
}
//NEW-OLD MODE
if(mode3.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
if(videoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddvideo[videoRev];
videoRev--;
if (videoRev < 0) videoRev = oddvideo.length - 1;
}
if(audioCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddaudio[audioRev];
audioRev--;
if (audioRev < 0) audioRev = oddaudio.length - 1;
}
if(photoCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddphoto[photoRev];
photoRev--;
if (photoRev < 0) photoRev = oddphoto.length - 1;
}
if(textCheck.checked) {
document.getElementById('thingDisplay').innerHTML = oddtext[textRev];
textRev--;
if (textRev < 0) textRev = oddtext.length - 1;
}
}
}<body>
<div align="center" id='thingDisplay'></div>
<div align="center">
<button onclick="newThing()">New Thing</button>
</div>
<form id="mode">
<label><input type="radio" name="modes" id="mode1"/></label> Random
<br/><label><input type="radio" name="modes" id="mode2"/></label> Old - New
<br/><label><input type="radio" name="modes" id="mode3"/></label> New - Old
</form>
<div align="right">
<form id="categories" align="right">
Video<label> <input type="radio" name="thing" id="videoCheck"/></label><br/>
Audio<label> <input type="radio" name="thing" id="audioCheck"/></label><br/>
Photo<label> <input type="radio" name="thing" id="photoCheck"/></label><br/>
Text<label> <input type="radio" name="thing" id="textCheck"/></label>
</form>
</div>
</body>Beberapa Hal yang Perlu Diperhatikan ...
Saya mengatur array JavaScript dengan yang termuda di atas dan tertua di bawah (dengan tanggal, akan terlihat seperti ini:
oddDate = ['Oct. 1', 'Oct. 2', 'Oct. 3', 'Oct. 4', 'Oct. 5'];Mode acak adalah pseudo random , dan dirancang untuk menampilkan semua item array satu kali sebelum mengulangnya.
Mode lama-baru dan baru-lama bergerak melalui array dari atas ke bawah dan bawah ke atas , masing-masing.
Setiap mode dan kategori menyimpan tempatnya saat Anda beralih ke mode yang berbeda. Misalnya, Anda mengaktifkan mode lama-baru dan berada di item 3 kategori teks. Anda beralih ke kategori foto, menjalankan sedikit array, lalu kembali ke kategori teks. Ini akan menampilkan item berikutnya dari mana Anda tinggalkan sebelumnya - yaitu item 4 . Hal yang sama dapat dikatakan untuk beralih di antara tiga mode; mereka semua tidak bergantung satu sama lain. Ini adalah sesuatu yang ingin saya pertahankan.
Satu kekhawatiran adalah bahwa generator dan halaman akan menjadi lebih lambat dan lebih lambat karena saya terus menambahkan lebih banyak item ke array, tetapi saya tidak yakin apakah ini sah. Dalam versi live, ada 500+ item di setiap array dan lebih banyak lagi akan ditambahkan seiring waktu.
Jawaban
Umpan Balik Keseluruhan
Kode ini tampaknya berfungsi dengan baik, meskipun semantik "lama - baru" tampaknya terbalik.
Poin pertama dalam catatan menyatakan:
- Saya mengatur susunan JavaScript dengan yang termuda di atas dan tertua di bawah (dengan tanggal, akan terlihat seperti ini: oddDate = ['Oct. 1', 'Oct. 2', 'Oct. 3', 'Oct. 4 ',' 5 Oktober '];)
Namun peluru ketiga menyatakan:
- Mode lama-baru dan baru-lama bergerak melalui array dari atas ke bawah dan bawah ke atas , masing-masing.
Tampaknya kontradiktif, karena jika yang terlama berada di paling bawah maka penyortiran lama-baru harus dimulai di akhir larik.
Kode JavaScript tampaknya sangat berulang - terutama dalam fungsi newThing()tetapi juga nama variabel. Saya akan merekomendasikan beberapa perubahan yang dijelaskan nanti, setelah peninjauan.
Ulasan
Javascript
Deklarasi variabel
Kode menggunakan beberapa fitur khusus untuk ECMAScript-2015 (AKA ES-6) seperti sintaks penyebaran . Dengan variabel ES6, disarankan untuk menggunakan constdan letmembatasi ruang lingkup variabel dan menghindari bug . Perhatikan itu consttidak berarti keabadian, tetapi variabel seperti itu tidak dapat ditugaskan kembali.
Variabel global
Kode mereferensikan elemen DOM menggunakan variabel yang secara implisit dibuat dari atribut id - mis
if(mode1.checked && (videoCheck.checked || audioCheck.checked || photoCheck.checked || textCheck.checked)) {
Jika Anda ingin menguji unit kode JavaScript maka ini mungkin membuatnya sulit.
Label masukan
Tampaknya semua input radio berisi <label>input, yang bagus untuk aksesibilitas (mis. Pembaca layar, kemampuan pengguna untuk mengklik label untuk memfokuskan / mengaktifkan input) namun teks di samping setiap input tidak ada di dalam label. Tampaknya tidak ada gunanya memiliki label jika hanya masukan yang ada di dalamnya.
HTML
Penangan acara sebaris
Kode tersebut menyiapkan penangan kejadian dalam kode HTML:
<button onclick="newThing()">New Thing</button>
Lebih baik mendaftarkan penangan kejadian dalam JavaScript (misalnya, menggunakan newButton.addEventListeneruntuk beberapa alasan:
- Logikanya dapat dipisahkan dari markup - jika beberapa rekan satu tim mengerjakan proyek, maka satu dapat bekerja pada JavaScript sementara yang lain dapat mengerjakan HTML secara mandiri.
- Penangan seperti itu dapat mencemari namespace global yang dapat menyebabkan perilaku aneh .
Mensejajarkan elemen anak
The <div>elemen memiliki align="center"dan align="right". Itu tampaknya merupakan atribut HTML 4 yang tidak digunakan lagi dan tidak lagi didukung di HTML 5. Ini dapat dikonversi ke aturan CSS . Catatan yang text-alignberlaku untuk wadah blok 1 . Untuk memusatkan elemen sebaris seperti gambar, video, dll. , displayPerlu disetel ke blockdan margindisetel keauto .
Beberapa elemen bentuk
Ada dua <form>elemen terpisah . Keduanya bisa digabungkan menjadi satu bentuk yang mengandung semua elemen.
Menyederhanakan kode
Perubahan berikut, bersama dengan saran dari poin tinjauan di atas dapat digunakan untuk mengurangi panjang kode secara dramatis:
letakkan opsi ke dalam objek yang dapat berisi indeks saat ini, dan buat objek menjadi properti dari objek di mana nama properti (yaitu kunci) adalah jenis benda - mis.
const options = { video: { options: [ //VIDEO ARRAY 'video1', 'video2', 'video3', 'video4', 'video5', ], currentIndex: -1 }, audio: { options: [ //AUDIO ARRAY 'audio1', 'audio2', 'audio3', 'audio4', 'audio5', ], currentIndex: -1 }, photo: { options: [ //PHOTO ARRAY 'photo1', 'photo2', 'photo3', 'photo4', 'photo5', ], currentIndex: -1 }, text: { options: [ //TEXT ARRAY 'text1', 'text2', 'text3', 'text4', 'text5', ], currentIndex: -1 }, }alih-alih menggunakan
idatribut untuk tombol radio, berikan sajavalueatributmereferensikan elemen formulir melalui
document.forms.elementsmenentukan tombol radio mana yang dipilih melalui RadioNodeList.value
menggunakan elemen untuk menampilkan benda itu .
menggunakan kelas untuk merangkum indeks, bersama dengan metode untuk mendapatkan item berdasarkan mode
class ThingList {
constructor(items) {
this.items = items;
this.randomUnused = [...items];
this.forwardIndex = 0;
this.reverseIndex = items.length - 1;
}
forwardItem() {
return this.items[this.forwardIndex++ % (this.items.length)];
}
randomItem() {
if (!this.randomUnused.length) {
this.randomUnused.push(...this.items);
}
const index = Math.floor(Math.random() * this.randomUnused.length)
return this.randomUnused.splice(index, 1);
}
reverseItem() {
if (this.reverseIndex < 0) {
this.reverseIndex = this.items.length - 1;
}
return this.items[this.reverseIndex--];
}
}
const options = {
video: new ThingList([ //VIDEO ARRAY
'video1',
'video2',
'video3',
'video4',
'video5',
]),
audio: new ThingList([ //AUDIO ARRAY
'audio1',
'audio2',
'audio3',
'audio4',
'audio5',
]),
photo: new ThingList([ //PHOTO ARRAY
'photo1',
'photo2',
'photo3',
'photo4',
'photo5',
]),
text: new ThingList([ //TEXT ARRAY
'text1',
'text2',
'text3',
'text4',
'text5',
])
}
const output = document.getElementsByTagName('output')[0];
//GENERATOR FUNCTION
function newThing() {
if (!(document.forms.thingSelection.type.value in options)) {
return false;
}
const list = options[document.forms.thingSelection.type.value];
const method = document.forms.thingSelection.mode.value + 'Item';
const item = list[method]();
output.innerHTML = item;
}
document.getElementsByTagName('button')[0].addEventListener('click', newThing).center {
text-align: center;
}
.right {
text-align: right;
}<div class="center"><output></output></div>
<div class="center">
<button>New Thing</button>
</div>
<form name="thingSelection">
<label><input type="radio" name="mode" value="random" /> Random</label>
<br /><label><input type="radio" name="mode" value="forward" /> Old - New</label>
<br /><label><input type="radio" name="mode" value="reverse" /> New - Old</label>
<div class="right">
<label>Video <input type="radio" name="type" value="video" /></label><br />
<label>Audio <input type="radio" name="type" value="audio" /></label><br />
<label>Photo <input type="radio" name="type" value="photo" /></label><br />
<label>Text <input type="radio" name="type" value="text" /></label>
</div>
</form>