0

我创建了一个香草 JS 脚本来操作按钮单击时的一些 DOM 元素（轮播组件中的项目）。

我的目标是能够在使用 HTML 模板的目标页面中导入脚本，并注入脚本的逻辑以浏览画廊项目。这无需以编程方式创建我的脚本实例或从模板本身调用任何方法。

这个想法是为了实现与一些引导组件相同的行为，其中模板 CSS 类和 JavaScript 之间的匹配是在幕后完成的。脚本和模板将被导出为 npm 包，因此我想请求确认：

1-考虑将脚本导出为npm包的最终目标，将整个登录打包在“module.exports”中是一种好方法还是有更好的方法？

2-有没有比听更好的方法DOMContentLoaded来确保在运行脚本之前加载 DOM 内容？

脚本

module.exports = (function () {

   document.addEventListener('DOMContentLoaded', gallery, false);

   function gallery() {
        'use strict';    

        const rootGalleryElements = document.querySelectorAll(".gallery-root");

        // Here all the logic to manipulate the DOM on buttons click (below)

        prevButton.addEventListener("click", (event) => { showPreviousItems(event) }, false);
        nextButton.addEventListener("click", (event) => { showNextItems(event) }, false);

    }
})();

模板

<div class="page-content">
    <div class="gallery-root">
     ...
    </div>
</div>
4

0 回答 0