将部分JS function导出到main.js

Question

你好 Stackoverflow 社区！

我目前正在通过编写网站来边做边学，不幸的是我不确定如何解决某些概念，但我会尽力而为。

我正在使用 Bootstrap 4 并编写了一个网站，其中包含几个带有外部（？）js 文件的子页面。 现在到我的实际问题：我已经编写了这个 js 代码 (A) 以在单击“主图像”(id:expandedImg) 时显示数组中的下一个图像，但我不知道如何导出此代码，或者最佳实践是什么。 最好将数组嵌入 HTML 文件和 main.js 中的 rest 中。 但是由于我引用了变量 imagesArr 我不知道该怎么做。

（一个）

//Array of img

const imagesArr = [{
            image: '###',
            alt: 'nr1',
        },
        {
            image: '###',
            alt: 'nr2',
        },
        {
            image: '###',
            alt: 'nr3'
        },
    ];

    const createImage = (image, alt, index) => {
        return `<img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/>`;
    };


    // Logic, this should be exported to main.js


    const createImages = (images) => {
        let final = '';
        for (let i = 0; i < images.length; i++) {
            const e = images[i];
            final += createImage(e.image, e.alt, i);
        }
        return final;
    }

    document.addEventListener("DOMContentLoaded", function () {
        console.log('Loaded')

        const container = document.querySelector('.thumbnailContainer');

        container.innerHTML = createImages(imagesArr)
    });

    const nextImage = (img) => {
        const current = +img.getAttribute('currentimage');
        if (current < imagesArr.length - 1) {
            img.setAttribute('src', imagesArr[current + 1].image)
            img.setAttribute('currentimage', current + 1)
        }
    }

    function expandingImage(imgs) {
        const expandImg = document.getElementById("expandedImg");
        const imgText = document.getElementById("imgtext");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'))
        expandImg.parentElement.style.display = "block";
    }

我可以将它嵌入到每个子页面中，它会起作用，但我很确定这将是糟糕的代码......

我的第二个问题是我是否可以有一个 js 函数来填充或引用某些 img-src。 例如，当我有这个 HTML 代码 (B) 时，如果我可以以某种方式复制粘贴或引用我声明为 js 代码的 const，那么我不必写两次基本相同的东西。

(乙)

<div class="thumbnailContainer">
<img src="#####" alt="nr1" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
<img src="#####" alt="nr2" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">
<img src="#####" alt="nr3" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="expandingImage(this);">

这个问题肯定是微不足道的，但如果你们能帮助我，我会非常感激。 我会自己尽力而为，但很高兴知道在这种情况下最佳做法是什么。

祝你有美好的一天/晚上！

ķ

Answer 1

为什么不直接在 main.js 中嵌入不带imagesArr的代码，并且可以在导入 main.js 之前在imagesArr或页脚的<script>标记中单独声明main.js ？

只需在代码中更改它，这样如果容器不存在，它就不会遇到错误。

document.addEventListener("DOMContentLoaded", function() {
  console.log('Loaded')

  const container = document.querySelector('.thumbnailContainer');
  if (container) {
    container.innerHTML = createImages(imagesArr)
  }
  
  this.removeEventListener('DOMContentLoaded',arguments.callee,false);
});

你能详细说明第二个问题吗？