javascript - 使用 "window.location.pathname"编写路由特定逻辑是一个好的做法吗？

Question

我在前端使用 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';
}

Answer 1

Is this a good practice or is there a better way?

在我看来，这不是一个很好的做法，还有更好的方法。您不希望代码被硬编码到特定的 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 页面具有此特定样式，那么您可以仅在该页面的 body 元素上放置一个类，例如 mainAdmin并有一个查找该类的 CSS 规则:

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

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