每个开发人员都应该知道的 JavaScript Web API

什么是 JavaScript？

JavaScript 是一种客户端脚本编程语言。

为什么 JavaScript 最受欢迎？

什么是 Web API？

API — 应用程序接口。

API有Web API、Browser API、Server API三种。

有六种JavaScript Web API

• Form API

• History API

• Fetch API

• Storage API

• Geo Location API

• Web Worker API

1) Web Form API

Web Form API 或者 Javascript validation API 允许用户验证具有不同属性和两种方法的输入。

验证方法：

checkValidity() : checkValidity 函数能够帮助检查给定的输入值是有效还是无效。

setCustomValidity() : setCustomValidity 有助于将验证消息属性（the validation message property）设置为 input 元素。

举个例子:

checkValidity()
<input id=”mark” type=”number” min=”10" max=”100" required>
<button onclick=”check()”>OK</button>
<p id=”message”></p>
<script>
function check() {
const inpObj = document.getElementById(“mark”);
if (!inpObj.checkValidity()) {
document.getElementById(“message”).innerHTML = inpObj.validationMessage;
}
}
</script>

Validation Properties :

customError : customErrror 属性有助于检查自定义错误消息是否被设置了。

patternMismatch : patternMismatch 属性有助于检查用户输入值并在给定输入与模式不匹配时返回 true。

rangeOverflow : rangeOverflow 属性有助于检查用户输入值并在给定输入达到最大属性值时返回 true。

rangeUnderflow : rangeUnderflow 属性有助于检查用户输入值，并在给定输入达到小于 min 属性值的输入值时返回 true。

stepMismatch : stepMismatch 属性有助于检查用户输入值并在给定的 step 属性失败时返回 true。

tooLong : tooLong 属性有助于检查用户输入值，并在给定的用户输入值达到大于 max Length 属性值时返回 true。

typeMismatch : typeMismatch 属性有助于检查输入类型并在给定的输入类型值无效时返回 true。

valueMissing : valueMissing 属性有助于检查输入值并在给定输入值为空时返回 true。

valid : valid 属性有助于检查上述所有属性是否有效，如果所有属性都有效，则返回 true。

举个小栗子:

rangeOverflow
<input id=”mark” type=”number” max=”100">
<button onclick=”check()”>OK</button>
<p id=”demo”></p>
<script>
function check() {
let text = “Mark OK”;
if (document.getElementById(“mark”).validity.rangeOverflow) {
text = “Mark is too large”;
}
}
</script>{codeBox}

2) Web History API

Web History API 可帮助管理您的网页历史记录

Web History API 将用户 URL 导航历史存储在浏览器中。

Web History API 有 1 个属性和 3 个方法。

History back()

History back 方法有助于从历史列表中导航到上次访问的 URL。

例子：

<button onclick="goBack()">Go Back</button>
​
<script>
function goBack() {
window.history.back();
}
</script>{codeBox}

History go()

History go 方法有助于加载 url 表单历史列表。

History go 方法是基于negative number工作的。

例子：

<button onclick=”goTo()”>Go Back 2 Pages</button>
​
<script>
function goTo() {
window.history.go(-2);
}
</script>{codeBox}

History forward()

History forward method 帮助从历史列表中加载下一个 URL。

History forward 方法仅在您处于先前的 URL 时才有效。

例子：

<button onclick="goForward()">Go Forward</button>
​
<script>
function goForward() {
window.history.forward();
}
</script>{codeBox}

History.length

History.length 属性有助于统计历史列表中的 URL 数量。

历史记录最多只能存储 50 个 URL。

例子：

console.log(history.length);{codeBox}

3) Fetch API

Fetch API 有助于向网络服务器发出 HTTP 请求。

与 XMLHttpRequest 相比，Fetch API 是非常容易的。

Promise Example :

fetch(file_url)
.then(a => a.text())
.then(b => viewData(b));{codeBox}

Async Await Example :

async function getData(uri) {
let a = await fetch(uri);
let b = await a.text();
viewData(b);{codeBox}
}

我认为这些信息对你有帮助。

感谢阅读——别忘了分享和评论