javascript - 好的或坏的做法：使用导入的 JavaScript 文件来完成每个页面的大部分工作

Question

如果您已经构建了一个多页应用程序，那么这个问题对您来说真的很容易。

所以我目前正在开发我的第一个多页网站，但我遇到了两难境地。因此，我正在尝试将 JavaScript 集成到我的每个页面中，但我不确定该做什么和不该做什么。有人告诉我，将事件侦听器放在给定页面的主 JavaScript 文件中是最佳实践，但如果我得到了该路由，那么如果我需要实现相同的功能，我必须将事件侦听器添加到每个页面。

除了事件侦听器之外，我还将发出许多 API 请求。如果我获取每个单独的控制器会是一个好习惯吗？或者这是一个不好的做法？

然而，这种方式似乎真的是未来的证明，并且重复次数要少得多。

所以这是我主页的 javascript 文件：

import { classes, element } from "./base";

// Add sidebar functionalities
import * as sidebarController from "./controllers/sidebarController";

// Add media post functionilities
import * as mediaController from "./controllers/mediaController";

简单吧？有点太简单了。

因此，这些导入中的每一个都包含自动将事件侦听器添加到页面的函数。

这是侧边栏控制器：

import { classes, element } from "../base";

// MESSAGES
const scrollChatDown = (chat) => {
  chat.scrollTop = chat.scrollHeight;
};

export const contactsScroll = (contacts, direction) => {
  const dir = ["left", "right"];
  const fn = [() => (contacts.scrollLeft -= 150), () => (contacts.scrollLeft += 150)];

  fn[dir.indexOf(direction)]();
};

// EVENT LISTENERS
// messages - There should be only one per page
if (element.sideMsg) {
  // Automatically scroll chat down
  scrollChatDown(element.sideMsgChat);

  // Chat scroll functionality
  element.sideMsg.addEventListener("click", (e) => {
    if (e.target.matches(`${classes.sideMsgLeft}, ${classes.sideMsgLeft} *`)) {
      contactsScroll(element.sideMsgContacts, "left");
    } else if (e.target.matches(`${classes.sideMsgRight}, ${classes.sideMsgRight} *`)) {
      contactsScroll(element.sideMsgContacts, "right");
    }
  });
}

标签： javascriptimportarchitecturemultipage