如何提高 javascript 图像播放器中的代码质量？答案

【问题标题】：How can I improve code quality in javascript image player?如何提高 javascript 图像播放器中的代码质量？
【发布时间】：2022-06-17 23:52:59
【问题描述】：

我用 javascript 制作了一些图像播放器。
它使用全局变量来绘制图像。
很难理解我的代码。因为它不是直觉。

如果有很多图像，此代码可能无法正常工作。
如何提高代码质量？我是 javascript 的新手。
请帮帮我。

var g_image_list = [create_image("http://placekitten.com/148/148"),
create_image("http://placekitten.com/248/248"),
create_image("https://images.squarespace-cdn.com/content/v1/543593e4e4b0bf8b316933e3/1504286897079-V3OLCF6NQ1P06SZSE2G1/image-asset.png")];

var g_index = 0;


function onFrameChange()
{
  var sliderBar = document.getElementById('image_slider');
  var output = document.getElementById('index');
  output.innerText = parseInt(sliderBar.value);
  
  g_index = parseInt(sliderBar.value);
  updateCanvas();
}

function create_image(url){
    var img = new Image();
        img.src = url;
    return img;
}

function updateCanvas(){
    console.log("image loaded");
        drawImage(g_image_list[g_index]);

}

function drawImage(img){
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.drawImage(img, 0, 0, 500, 500);
}

canvas{
    border: 1px solid black;
}

<canvas width="500" height="500"></canvas>

<div id="index">0</div>

<input type="range" min="0" max="2" class="slider" value="0" id="image_slider" oninput="javascript:onFrameChange();">

【问题讨论】：

如果您的代码适用于您正在做的事情，并且您希望帮助改进它，因为您怀疑它不能很好地扩展，请转至 codereview.stackexchange.com。

标签： javascript html canvas html5-canvas