Вывести текст из списка переменных

Question

У меня есть серия страниц на моем сайте, которые используют JavaScript для отображения заголовка на основе переменной, определенной на странице.

Базовый HTML

<h1 id="pageTitle"></h1>
<script> var page = "start";</script>
<!-- Rest of the page... -->

Отдельный файл JavaScript

var startText = "Hello!";
var middleText = "This is a page";
var endText = "Example";

if(page == 'start'){
  $('#pageTitle').html(startText);
}
if(page == 'middle'){
  $('#pageTitle').html(middleText);
}
if(page == 'end'){
  $('#pageTitle').html(endText);
}

Это следует простому шаблону, который отлично справляется со своей работой, но может стать утомительным по мере роста веб-сайта.Есть ли более чистый способ получить тот же результат?

Answer 1

Всегда хорошая идея организовать ваш код в модульные функции.Это поможет сохранить ваш код поддерживаемым.

function init(title) {
  document.querySelector("#pageTitle").innerHTML = getTitleHtml(title);
}

function getTitleHtml(title) {
  const titleMap = {
    start: "Hello",
    middle: "This is a page",
    end: "Example"
  };
  return titleMap[title];
}

var title = "end";
init(title);

<h1 id="pageTitle"></h1>

Answer 2

Более понятным способом может быть организация заголовков в словаре.

var titles = {
  "start": "Hello!",
  "middle": "This is a page",
  "end": "Example"
}

$('#pageTitle').html(titles[page]);

Answer 3

Вместо определения переменной JS на каждой странице я предлагаю присоединить атрибут data-* к тегу заголовка, например:

<h1 id="pageTitle" data-page="start"></h1>

Затем в отдельном файле JS вы можете создать объект, содержащийсписок title и использовать атрибуты data-page в качестве ключа, например:

var titles = {
  "start": "Hello!",
  "middle": "This is a page",
  "end": "Example"
}

var title_element = $("#pageTitle");
var key = title_element.data('page');

title_element.text(titles[key]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="pageTitle" data-page="middle"></h1>

Answer 4

Использовать объект, ссылающийся на ключ ...

var messages = {
  "foo" : "bar",
  "hello" : "world"
}

function setMessage(key) {
   document.querySelector("#out").innerHTML = messages[key];
}

setMessage("hello");

<div id="out"></div>