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

时间:2018-05-07 05:39:58

标签: javascript ecmascript-6 architecture web frontend

例如,我有一个网站,其中有一些页面如下例:

  • 的login.html
  • 用户在info.html
  • products.html放在
  • product.html

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

  • login.js
  • 用户info.js
  • products.js
  • product.js

我可以将这些文件连成一个或用ES6模块导入并获取" scripts.min.js"。

但是如果我在login.js中有这样的话:

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

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

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

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

1 个答案:

答案 0 :(得分:1)

更新:如果您希望某些代码只在特定页面上执行,您可以执行以下操作(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 module。
  • 要组合各种js文件,您可以执行以下操作:
    1. 使用(例如)npm模块读取文件fs-readdir-recursive和fs
    2. 使用例如regex删除不需要的内容
    3. 创建新文件(合并)