时间戳

首页 > 解决方案 > 如何正确划分不同页面的javascript逻辑？

javascript - 如何正确划分不同页面的javascript逻辑？

问题描述

例如，我有一个网站，其中包含一些页面，例如以下示例：

我对这些页面有不同的脚本。所以我有：

我可以将这些文件合并为一个或使用 ES6 模块导入并获得“scripts.min.js”。

但是，如果我在 login.js 中有类似的东西：

document.ready(function() {
   alert('Hello, this is logic for login.js');
})

然后我收到所有页面的此消息。

我正在寻找在页面之间划分逻辑的正确方法。不幸的是，我发现的所有关于 JavaScript 架构的信息都是关于 SPA 的。

在普通网站中组织 JS 结构以使其可维护和可扩展的正确方法是什么？

标签： javascriptecmascript-6architecturewebfrontend

解决方案

更新：如果您希望某些代码仅在特定页面上执行，您可以执行以下操作（onload）：

var _tgt = window.location.href; //where are we

var _is_login = _tgt.search("login");

if (_is_login !== -1) {
  console.log("Do something in login");
}

您可以使用节点模块来修剪您的代码：

  • 删除注释并压缩：uglify-js npm 模块。
  • 要组合各种 js 文件，您可以执行以下操作：
    1. 使用（例如）npm 模块 fs-readdir-recursive 和 fs 读入文件
    2. 使用例如正则表达式删除不需要的内容
    3. 创建一个新文件（合并）

推荐阅读