JavaScript 包含另一个文件答案

【问题标题】：JavaScript including another fileJavaScript 包含另一个文件
【发布时间】：2014-02-08 18:43:46
【问题描述】：

我有这段代码：

var curState = 'Agenda';

function switchState(newState) {
  curState = newState;
}

function Inbox() {
  switchState('Inbox');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Inbox.";
}

function Friends() {
  switchState('Friends');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Friends.";
}

function Agenda() {
  switchState('Agenda');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Agenda.";
}

function List() {
  switchState('List');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Book List.";
}

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the News.";
}

function Notes() {
  switchState('Notes');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Notes.";
}

当然显示的文字是一个测试，我会改变它。关键是，我必须在菜单的这些“状态”中输入大量文本，并且在此处简单地输入它不是很方便，尤其是如果稍后要进行更改。因此，我想知道如何在 JavaScript 中添加不同形式的文件，或者让它们使用 JavaScript 显示，例如 *.php 文件。

有人知道怎么做吗？我在互联网上搜索了很多，但找不到对我有用的东西，除了document.getElementById().innerHTML = "";

【问题讨论】：

答案可能不是把所有东西都放在单独的文件中，而是更动态地思考并创建一些可以做不止一件事的函数，而不是写很多函数来做只有一件事等等。
我对 JavaScript 还很陌生，所以你能说得更准确一点吗？

标签： javascript php file menu include

【解决方案1】：

有三种简单的方法可以做到这一点：

变体 A：通过 AJAX 调用从服务器获取您的 innerHTML - 类似于

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = "Please wait for News to load.";
  //start AJAX call here
}

function AJAXcallOnSuccess() {
  document.getElementById("u-content").innerHTML = //Result text from AJAX call;
}

变体 B：在原始页面中提供您的文本，但不显示。类似的东西

<blah>
... 
<div style="display: none;" id="newsPlaceHolder">
This is the text for the news item
</div>
...
</blah>

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = document.getElementById("newsPlaceHolder").innerHTML
}

变体 B 导致最简单的变体 C：在页面中准备好所有 DIV，但一次只显示一个。

var activeDiv = null;

function News() {
  switchState('News');
  if (activeDiv) activeDiv.style.display='none';
  activeDiv=document.getElementById("u-content-news");
  activeDiv.style.display='block';
}

【讨论】：