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

我建议不要在每个页面中定义JS变量，而是建议将data-*属性附加到title标签，例如：

<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 2

将代码组织成模块化函数总是一个好主意。这将有助于保持代码的可维护性。

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>

显示变量列表中的文本

2 个答案: