是否使用“ 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

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

我认为这不是一个好习惯，有更好的方法。您宁愿不将代码硬编码到特定的URL路径。通常最好让代码对当前内容而不是URL进行操作。然后，内容提供者可以仅通过调整内容来控制代码的行为。多个页面可以使用同一功能，而无需修改代码。

由于我假设您在/admin/login和/admin/main页面中的内容有些不同，因此看来您可以只在内容中使用autofocus attribute，这将告诉浏览器您希望将初始焦点设置在何处。

autofocus

如果您打算使用代码来完成此操作，我宁愿您使用可应用于此类内容的通用代码作为焦点：

<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"> 语句，您实际上只是在应用一些自定义CSS样式。似乎它应该再次基于内容，并且应该使用CSS规则来应用样式。

如果只希望if页面具有此特定样式，则可以仅在该页面的body元素上放置诸如/admin/main之类的类，并具有查找该类的CSS规则：

mainAdmin

这些CSS规则可以采用您的通用CSS样式，但仅在

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

标记具有body类的页面中有效。同样，内容的创建者可以控制样式，而无需任何自定义的每页脚本。