正在寻找一种方法来"emulate"完整的网站(包括请求,历史记录,URL)作为另一个页面中的javascript示例?



我正在开发一个显示html/css/javascript代码示例的网站。类似于最佳实践库的东西。

示例可能如下所示:

  • 如何实现完整的可点击预告片元素
  • 一个好的标题大纲应该是什么样子
  • 如何在模式对话框中管理键盘焦点

我正在使用 CodePen.io 来创建示例,因此用户可以试用它们并根据自己的意愿使用它们。

每个示例都呈现在一个网页上,每个示例都应该只用 HTML、CSS 和 JavaScript(CodePen.io 提供的东西)编写。

唯一的问题是:我如何模拟(假的?)请求?

  • 例如,其中一个示例将演示单击按钮如何触发对服务器的 AJAX 调用,然后在页面上的某处显示信息。在后台,它并不是真正的 AJAX 调用,它只是一个由一些 JavaScript 处理的"假"AJAX 调用。
  • 另一个例子是在页面之间导航:URL应该改变(例如examples/123/#index,然后在单击链接后examples/123/#some-other-page),但实际上,它仍然是一次又一次显示的同一页面,但根据 URL 的不同,会显示一些不同的内容。浏览器历史记录也需要正常工作。
  • 最后一个示例可能是提交表单并在表单中内联显示输入错误:如何轻松获取 POST 数据,并再次显示表单并显示错误?

这肯定可以使用普通的JavaScript来完成。但我确信有库可以做这样的事情,我只是不知道要搜索什么。

事实上,我所描述的是迷你的 1 页应用程序。但是我不需要像 AngularJS 这样成熟的框架,我想可以处理请求(包括管理浏览器历史记录和 URL)的非常简单的东西足以满足我的目的。

创建一个假服务器来做 AJAX 请求,你可以使用这个 nodejs 模块,例如:

http://www.begeek.fr/starcraft-remastered-lannonce-surprise-de-blizzard-lete-235328?utm_source=facebook&utm_campaign=begeek

使用此模块,您可以执行真正的 GET、POST、PUT 或 DELETE 请求,并将虚假数据发送到您的 JavaScript 应用程序。

另一种方法是简单地使用超时和承诺来伪造发送模拟数据的 AJAX 请求。但是使用这种方法,你永远不会发送真正的HTTP请求,它只是返回数据的函数。

下面是一个函数的示例,该函数创建 Promise 来伪造服务器响应:

function sendFakeUser() {
let user = {
name: 'antoine',
email: 'a@antoine.fr'
};
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(user);
}, 2000);
});
}

你可以像这样调用这个函数:

sendFakeUser()
.then((user) => {
console.info(user);
// console or do stuff with your data
}

最新更新