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

编程问答 2022-05-10

问题描述

如果您已经构建了一个多页应用程序，那么这个问题对您来说非常简单。

所以我目前正在开发我的第一个多页网站，但我遇到了一个进退两难的境地。因此，我正在尝试将 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");
    }
  });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

architecturearchitecturearchitectureimportimportimportjavascriptmultipage