显示变量列表中的文本

我的网站上有一系列页面，它们利用JavaScript根据页面中定义的变量显示标题。

基本的HTML

  var page = "start";  

单独的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标签，如：

然后在单独的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]); 

Answer 2

使用对象引用键…

 var messages = { "foo" : "bar", "hello" : "world" } function setMessage(key) { document.querySelector("#out").innerHTML = messages[key]; } setMessage("hello"); 

Answer 3

更简洁的方法是在字典中组织标题。

 var titles = { "start": "Hello!", "middle": "This is a page", "end": "Example" } $('#pageTitle').html(titles[page]); 

Answer 4

将代码组织成模块化function始终是个好主意。 这有助于保持代码的可维护性。

 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);