使用“window.location.pathname”编写路由特定逻辑的好习惯吗？答案

【问题标题】：Is using "window.location.pathname" to write route specific logic good practice?使用“window.location.pathname”编写路由特定逻辑的好习惯吗？
【发布时间】：2020-04-21 09:32:04
【问题描述】：

我在前端使用 main.js 文件来编写一些只根据它所在的路由执行的逻辑。

我正在使用“window.location.pathname”来执行此操作。这是一个好的做法还是有更好的方法？

--main.js

let url = window.location.pathname;

if(url === '/admin/login'){
    console.log('connected');
    let firstInput = document.querySelector('input');
    firstInput.focus(); 
}

if(url === '/admin/main'){
   document.body.style.backgroundColor = "white";
   let navLink = document.querySelector('.navlink a');
   console.log(navLink)
   navLink.style.color = 'black';
}

【问题讨论】：

意见问题。我认为 window.location.hash 很酷

标签： javascript node.js dom

【解决方案1】：

这是一个好的做法还是有更好的方法？

在我看来，这不是一个很好的做法，但有更好的方法。您希望代码不被硬编码到特定的 URL 路径。通常最好让代码对存在的内容而不是 URL 进行操作。然后，内容提供者可以通过调整内容来控制代码的行为方式。多个页面可以使用相同的功能而无需修改代码。

由于我假设您在 /admin/login 和 /admin/main 页面中的内容有所不同，因此您似乎可以在内容中使用 autofocus attribute，这会告诉浏览器您希望初始焦点在哪里设置。

<input autofocus type="text" name="id" minlength="4" maxlength="8" size="10">

如果您打算使用代码来执行此操作，我更希望您使用可以应用于任何此类内容的通用代码作为焦点：

 let firstInput = document.querySelector('.firstFocus');
 if (firstInput) {
     firstInput.focus();
 }

这将适用于任何页面，它将第一个焦点设置为具有firstFocus 类属性的第一个对象。这使您可以使用通用代码并让内容控制发生的情况。如果您的内容在页面中的某个元素上有 firstFocus 类，那将成为默认焦点。如果没有，那么什么也不会发生。该代码可以在您网站的任何页面中使用。然后内容编辑器可以确定何时使用它，而无需担心路径的代码。

因此，您网站中的任何页面都可以通过在页面中的元素上插入 firstFocus 类来利用这一点。

<input class="firstFocus" type="text" name="id" minlength="4" maxlength="8" size="10">

对于您的第二个 if 声明，您实际上只是应用了一些自定义 CSS 样式。看起来它应该再次基于内容，并且应该使用 CSS 规则来应用样式。

如果您只希望/admin/main 页面具有这种特定样式，那么您可以在该页面的正文元素上放置一个诸如mainAdmin 之类的类，并设置一个查找该类的 CSS 规则：

body.mainAdmin { backgroundColor: 'white'}
body.mainAdmin .navlink a {color: 'black'}

这些 CSS 规则可以在您的通用 CSS 样式中，但只会在 body 标记的类为 mainAdmin 的页面中有效。同样，内容的创建者无需任何自定义的每页脚本即可控制样式。

【讨论】：