如何在 Express 应用程序中组织客户端 js？

Question

在我的应用程序中，我有大约 10 个不同的页面，其中大部分使用某种 JavaScript。app.js目前，我有一个包含在所有页面中的客户端文件。为了弄清楚要在页面上附加哪些事件侦听器，我基本上检查url位置并从那里开始：

window.onload = function () {

  let urlLocation = window.location.pathname.split('/')[1]

  //Global functionality for all pages

  UIctrl.toggleActiveNavbar(urlLocation)

  //createTopic route

  if (urlLocation === 'createTopic' || urlLocation === 'edit') {

    UIctrl.createTopicTagsBasedOnCategory()

    UIctrl.handleCreateOrEditTopicClick()

  }

  if (urlLocation === 'editPost' || urlLocation === 'createPost') {

    UIctrl.handleCreateOrEditPostClick()

  }

 // .... and so on 

 }

尽管它有效，但我认为这不是一个好方法。如果一个项目变得足够大，就很难管理它。我无法找到如何正确执行此操作的答案。我的问题是：

1. 我应该js为每一页准备单独的文件吗？我的问题是我必须复制所有页面上使用的通用代码。

2. 您是否在您的 express 应用程序中使用某种捆绑器（webpack/parcel）来解决这个问题？也许你可以指点我一个显示如何正确设置它的存储库。

3. 这在现实世界的生产环境中是如何完成的？

谢谢。

Answer 1

您的直觉是比较 URL 来决定要运行的初始化是一种糟糕的编码方式是正确的。这不是一个好的模式，随着越来越多的页面和维护随着时间的推移会变得非常痛苦，很快就会失去控制。相反，您可以将公共代码放在每个页面都加载的共享 JS 文件中，以便可以根据需要使用这些功能。然后，在每个单独的页面内使用内联<script>标记来执行特定于页面的初始化，设置特定于该页面的事件侦听器并调用共享 JS 文件中的代码。如果对于某些页面，您有很多页面特定的初始化代码，您可以只将这些页面特定的代码放在页面特定的 JS 文件中，但通常您不希望每个页面都有一个外部 JS 文件如果可以避免，请访问您的页面。尝试将大部分代码放在通用 JS 文件中，然后在每个特定页面中只使用一小部分内联代码来进行正确的初始化。这会将您的大部分代码放在一个通用的共享 JS 文件中，并在特定页面中保留特定于页面的初始化逻辑。每个页面都应该有单独的 js 文件吗？我的问题是我必须复制所有页面上使用的通用代码。不。您不想在单独的 JS 文件中复制大量代码，因为那是维护的噩梦并且会破坏有效的浏览缓存。