那些被忽略但很好用的 Web API / 前言

Web API -- Application Programming Interface for The Web，翻译成中文就是「给网页使用的应用程序介面」

相信对於开发网页的前端工程师来说，Web API 是在熟悉不过，就算你没听过或不晓得 Web API 是什麽，你也绝对使用过它。

举几个例子：console.log、setTimeOut、setInterval，这些其实都是所谓的 Web API，它们并非是 JavaScript 的原生 method。

Web API 到底是什麽？

刚刚上面提到的常用 method，它们其实来自於 window 这个全域物件，实际上你使用的是 window.console.log，只不过 window 是被允许省略的。而这个神奇的 window 其实是由浏览器提供给我们的，连平常我们常常使用的 document 物件也是所属於 window 底下，如果你有写过 Node.js 的话，就可以确认我说的是真的，因为在 Node.js 的环境下是找不到 window，取而代之的是 global 物件。

而这次的系列文章就是想要介绍那些深埋在 window 里，你不曾发觉或是常常遗忘的 API，或许在你开发网页的过程中有遇过一些特殊需求，当下虽然用了一些管用手法解决，但看完这次的系列文章，你可能会有新的灵感或发现。

# 尴尬的痛点

由於 window 是浏览器提供给我们的，所以当中的内容完全取决於使用者所使用的浏览器。不幸的是，Web API 其实必没有被统一标准化，有些甚至还在实践阶段，或是有一些还有装置的限制，也因为如此，并非所有浏览器都会把全部的 Web API 实践出来，所以在我们使用之前可以先去看看 浏览器的支援度 。

系列内容

如果要细数的话 Web API 其实以上千个，不过我们常用的却不多，因为其实有一大部分的 API 并没有什麽实际功能性，不过呢，这次想跟各位分享的是一些非常实用但使用度缺相对较低的 Web API。

另外想要声明的事，有些 Web API 比较庞大复杂，大到可以单独写成一个新的系列文章了，像是 Canvas、WebSocket..等等，而这些就不会是我们系列文章的范畴，这次会分享的是一些比较间单，大家可以快速上手使用的内容。

1. Console
2. CreateDocumentFragment
3. RequestAnimationFrame
4. FullScreen
5. Battery
6. ImageCapture
7. DesignMode
8. Selection
9. Clipboard
10. History
11. SessionStorage
12. CustomEvent
13. PostMessage
14. MessageChannel
15. BroadcastChannel
16. RequestIdleCallback
17. MutationObserver
18. ResizeObserver
19. GetBoundingClientRect
20. IntersectionObserver
21. ScrollIntoView
22. Drag & Drop
23. Share
24. Notification
25. Geolocation

以上这些 Web API 就会在我们这次的系列文章中介绍到，部分 API 也还会再额外拉一个篇章来示范一些实际应用，让大家可以更了解到它们的实际作用与功能。那接下来的三十天就期待与大家一起挖掘 「那些被忽略但很好用的 Web API」罗～