对于初次开发应用程序的初学者，使用应用程序用户界面（API）可能会有些棘手和混乱。 本教程旨在提供简短明了的指令，以在进行API调用时使用纯JavaScript和jQuery构建应用。
在开始之前，重要的是要突出我们对应用程序的期望。 对于可以随意生成随机报价的电影报价随机化器，期望如下：
- 用户可以单击按钮，并使用著名电影的引文作者生成随机引文。
- 用户可以单击另一个按钮来鸣叫生成的报价。
- 对于出现的每个随机引号，该段落的背景色也应更改（缓慢过渡）为随机色。
获取API
第一步通常是向可靠的API服务提供商注册。 在这种情况下，我们将依靠Mashape来帮助我们满足需要的东西，这是一个API，调用该API后，它会提供一个由电影引用及其作者的多个数组组成的对象。
发出AJAX请求
接下来，我们将使用jQuery向Mashape发出AJAX请求。 好处是，Mashape API的统一资源定位符（URL）已启用跨域资源共享（CORS）。 这样可以防止在进行API调用时出现域冲突问题。
发出AJAX请求非常简单明了：
var loadquote = function() {
$.ajax({
type: "GET",
url: "https://andruxnet-random-famous- quotes.p.mashape.com/?cat=movies&count=1",
data: {},
dataType: 'json',
success: function(data) {
$("#quote-text").html('"' + data.quote + '"');
$("#quote-author").html('—' + ' ' + data.author);
},
error: function(err) { alert("Internet Disconnected!"); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "Bk47jF0aCnmshsTi1VQAyxueTH2ap1BJxjejsnw9wHKPr2OmG4");
}
});
}; 您可能已经注意到，使用jQuery，我们分配了HTML段落； quote-text和quote-author ，用于从数据对象中的“ quote”和“ author”键中获取原始数据。
我们还将整个AJAX调用嵌入到函数中，并将其分配给变量loadquote ，以便于访问和操作。 setRequestHeader()方法包含我们的Mashape授权以及我们的密钥（每个用户都有唯一的密钥） 。
创建随机背景色属性
正如我们前面提到的，我们希望每当出现新报价时我们的背景都会发生变化。 一种实现方法是利用Math.floor()和Math.random()函数。
创建一个名为“ backgroundChange”的变量，然后继续为它分配一个函数，该函数告诉我们的应用程序如何处理背景色：
var backgroundChange = function() {
x = Math.floor(Math.random() * 256);
y = Math.floor(Math.random() * 256);
z = Math.floor(Math.random() * 256);
backgroundRGB = "rgb(" + x + "," + y + "," + z + ")";
document.getElementById("quote-design").style.backgroundColor = backgroundRGB;
}
创建过渡效果
创建过渡效果非常简单，我们要做的就是创建一个变量并分配我们的函数，该函数获取我们想要过渡所在的HTML元素，并相应地设置其样式：
var transition = function() {
document.getElementById("quote-design").style.transition = "all 2s";
}
添加推文报价按钮
对于“分享分享”按钮，我们在HTML页面中创建一个按钮，然后使用jQuery对其进行操作。
鸣叫按钮由鸣叫报价的Twitter API驱动。 为了使按钮正常工作，将jQuery方法嵌入AJAX请求中很重要：
var loadquote = function() {
$.ajax({
type: "GET",
url: "https://andruxnet-random-famous- quotes.p.mashape.com/?cat=movies&count=1",
data: {},
dataType: 'json',
success: function(data) {
$("#quote-text").html('"' + data.quote + '"');
$('#twitter-share-button').attr('href', 'https://twitter.com/intent/tweet?text=' + '"' + data.quote + '"' + ' ' + ' ' + ' ' + ' \u2014' + ' ' + data.author).attr('target', '_blank'); // embed the method HERE
},
error: function(err) { alert("Internet Disconnected!"); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", "Bk47jF0aCnmshsTi1VQAyxueTH2ap1BJxjejsnw9wHKPr2OmG4");
}
});
};
添加一个按钮，该按钮可以更改引号并转换背景颜色
现在到最后一部分，在应用程序中创建最重要的按钮！ 到此为止，这对我们来说应该没有问题。
要创建按钮，我们只需在HTML部分中插入一个button元素。 我们可以选择在JavaScript中使用addEventListener()方法，或者在jQuery中使用.on()方法。 我们将使用后者，因为它为我们的API带来了很多一致性，并简化了代码库：
$("#change-quote").on("click", function() {
loadquote();
backgroundChange();
transition();
})
如上所示，我们在loadquote() change-quote jQuery函数中嵌入了loadquote() ， backgroundChange和transition()函数。 单击该按钮后，这三个功能将同时发生。
那里！ 在API，jQuery库和最佳实践的帮助下，我们已经成功构建了Movie Quote Randomizer，并且使我们的代码简洁明了。 有关该应用程序的更多详细信息，您可以在此处查看。
如果您喜欢这篇文章，请务必推荐它，因为这对我来说意味着很多。谢谢。 🙂
