Express с файлом javascript на стороне клиента e js - PullRequest
Новая
       6

Express с файлом javascript на стороне клиента e js

0 голосов
/ 06 марта 2020

недавно я пытаюсь создать веб-сайт, используя express и e js, и обнаружил, что я не могу просто использовать один файл javascript для всех моих файлов e js (просмотреть), потому что когда я нацеливаюсь элемент DOM, чтобы сделать что-то, и если другие страницы просмотра не имеют этого элемента DOM, я получу ошибку в своей консоли.

Пример: (Так что, если я посещаю страницу индекса, Я в порядке, но когда я нахожусь на странице about, я получил ошибку, потому что этот элемент с этим классом не существует на странице about)

index.e js

<div class="main-container">
    <h1 class="home-heading">Home page</h1>
    <p>some random text</p>
</div>

about.e js

<div class="main-container">
    <h1 class="about-heading">About page</h1>
    <p>some random text</p>
</div>

script. js

const homeHeading = document.querySelector('.home-heading');
homeHeading.style.backgroundColor = 'red';

Итак, мой вопрос, как лучше всего связать файл на стороне клиента javascript? Единственный способ, которым я могу придумать, - это создать несколько файлов js и сделать так, чтобы каждая страница e js имела свой собственный файл js, это лучший метод? или есть ли другие способы заставить его работать, используя только один js файл?

Прямо сейчас это то, что я придумал:

на странице просмотра ( home), я создам переменную со значением index и передам ее в нижний колонтитул (частичный)

index.e js

<%- include('../partials/header'); -%>
<h1>Hello world</h1>
<a href="/about" >about</a>
<% const currentPage = "index"; %>
<%- include('../partials/footer',{currentPage: currentPage}); -%>

footer.e js

  </div>
  <%- include('../partials/scriptFiles',{currentPage: currentPage}); -%>
 </body>
</html>

и я снова передам переменную в scriptFiles.e js (частично), чтобы проверить, на какой странице я работаю, и выведу тег js с правильным путем к файлу

scriptFiles.e js

<% let currentScriptFile = ''; %>

   <% if(currentPage === 'index'){ %>
      <% currentScriptFile = '<script src="./script.js"></script>'; %>
   <% }else if(currentPage === 'about') { ; %> 
      <% currentScriptFile = '<script src="./about.js"></script>'; %>
   <% } %>

<%- currentScriptFile %> //Output script tag with correct file path

, поэтому, когда я на домашней странице, он будет использовать ./script.js, а когда я нахожусь на странице, он будет использовать ./about.js, использовать express с e js это правильный способ сделать это? если нет, то каков наилучший или правильный способ сделать это.

Спасибо

1 Ответ

0 голосов
/ 06 марта 2020

Так что, если я посещаю индексную страницу, я в порядке, но когда я захожу на страницу about, у меня появляется ошибка, потому что этот элемент с этим классом не существует на странице about

Напишите JavaScript надежно, чтобы он мог справиться с этим состоянием. 

const duck = document.querySelector(".duck");
if (duck) {
    // The element exists and you can do stuff with it.
}
...