你不知道的JavaScript APIs

更新日期: 2022-10-17阅读: 846标签: api

最近,看到一些好用但不太常用的JS api,觉得挺不错的,分享给大家。

  • Page Visibility API
  • Web Share API
  • Broadcast Channel API
  • Internationalization API

下面,我们来看下应该在哪里使用它们,以及如何使用它们。


Page Visibility API

这个APi 可以让我们知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签,该API都会触发一个事件 visibilitychange 。

在过去,我不得不使用一些黑科技来确认用户是否切换了标签或最小化了窗口。最流行的是使用blur和foucs浏览器事件。

window.addEventListener("focus", function () {
    // User is back on the page
    // Do Something
});

window.addEventListener("blur", function () {
    // User left the page
    // Do Something
});

上面的代码可以工作,但不像预期的那样。因为blur事件是在页面失去焦点时触发的,所以当用户点击搜索栏、警报对话框、控制台或窗口边框时,它就会被触发。所以,blur和foucs只告诉我们页面是否被激活,但不告诉我们页面的内容是否被隐藏或可见。

案例

一般来说,我们希望使用 Page Visibility API,在用户没有看到页面时停止不必要的进程,或者执行一些后台操作。可以下面这几种情况:

  • 当用户离开页面时,暂停视频、轮播图或动画。
  • 停止一些实时获取数据的API
  • 发送一些用户信息

如何使用它?

Page Visibility API 有两个属性和一个事件来访问页面可见性状态。

document.hidden
它是全局可用的,而且是只读的。尽量避免使用它,因为它现在已经被废弃了,但是当被访问时,如果页面是隐藏的,它将返回 true,如果是可见的,它将返回 false。

Document.visibilityState (只读属性)

返回document的可见性,即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后,或是不可见的隐藏的标签页,或者 (正在) 预渲染。可用的值如下:

  • 'visible' : 此时页面内容至少是部分可见。即此页面在前景标签页中,并且窗口没有最小化。
  • 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态'
  • 'prerender' : 页面此时正在渲染中,因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态。

visibilitychange

当其选项卡的内容变得可见或被隐藏时,会在文档上触发 visibilitychange (能见度更改) 事件。

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // page is visible
    } else {
        // page is hidden
    }
});


Web Share API

Web Share API 它可以让我们访问操作系统的本地共享机制,这对移动用户特别有用。通过这个API,可以分享文本、链接和文件,而不需要创建自己的分享机制或使用第三方的机制。

使用案例

可以用它来分享网页上的内容到社交媒体上,或者把它复制到用户的剪贴板上。

如何使用它?

网络共享API给了我们两个接口来访问用户的共享系统。

navigator.canShare(data);

如果对 Navigator.share() 的调用成功,则 Web Share API 的 Navigator.canShare() 方法将返回 true。data 包含要共享的数据的对象,该对象要与 Navigator.share() 方法传递的数据相匹配。

navigator.share(data)

Navigator.share() 方法通过调用本机的共享机制作为 Web Share API 的一部分。如果不支持 Web Share API,则此方法为 undefined。

data 包含要共享的数据的对象。必须至少指定以下字段之一。可用选项包括:

  • url: 要共享的 URL( USVString )
  • text: 要共享的文本( USVString )
  • title: 要共享的标题( USVString)
  • files: 要共享的文件(“FrozenArray”)

该方法将会返回一个 Promise。一旦用户完成分享,这个 promise 将会接受。如果指定的共享数据格式不正确,promise 将会立即拒绝;如果用户取消了分享,promise 也会拒绝。

事例

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
}); // 分享 MDN 的 URL


Broadcast Channel API

Broadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

const broadcast = new BroadcastChannel("new_channel");

BroadcastChannel 接口非常简单。通过创建一个 BroadcastChannel 对象,一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数:频道名称。如果这是首次连接到该广播频道,相应资源会自动被创建。

发送消息

现在发送消息就很简单了,只需要调用 BroadcastChannel 对象上的 postMessage() 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 domString 文本消息:

broadcast.postMessage("Example message");

不只是 DOMString,任意类型的对象都可以被发送。

断开连接

通过调用 BroadcastChannel 对象的 close() 方法,可以离开频道。这将断开该对象和其关联的频道之间的联系,并允许它被垃圾回收。

// 断开频道连接
bc.close()


Internationalization API

在开发一个网页或应用程序时,需要将其内容翻译成其他语言以覆盖更广泛的受众是非常常见的。然而,仅仅将你的网页文本翻译成你所需要的任何语言,并不足以使你的内容对讲该语言的人可用,因为像日期、数字、单位等东西在不同国家是不同的,可能会给你的用户带来混乱。

假设你想在你的网页上显示日期 "2022年11月8日",如 "11/8/22"。根据读者的国家,这个数据可以用三种不同的方式来阅读。

  • “November 8, 2022” 或者 MM/DD/YY 来自美国
  • “August 11, 2022” or DD/MM/YY 来自欧洲
  • “August 22, 2011” or YY/MM/DD 来自中国、日本。

这就是国际化API(或I18n API)来解决不同语言和地区的格式问题的地方。I18n API是一个了不起的工具,有多种用途,但这里不会深入研究,以免使本文过于冗长。

如何使用它?

I18n API 使用 locale 标识符来工作。locales 参数必须是一个 BCP 47 语言标记的字符串,或者是一个包括多个语言标记的数组。如果 locales 参数未提供或者是 undefined,便会使用运行时默认的 locale。

一个 BCP 47 语言标记代表了一种语言或者区域(两者没有很大的区别)。在其最常见的格式中,它以这样的顺序囊括了这些内容:语言代码,脚本代码,和国家代码,全部由连字符分隔开。例如:

  • "hi":印地语 (primary language)。
  • "de-AT": 在奥地利使用的德语 (primary language with country code)。
  • "zh-Hans-CN":在中国使用的简体中文 (primary language with script and country codes)。

更准确地说,I18n API提供了一个Intl对象,它提供了精确的字符串对比、数字格式化,和日期时间格式化。Collator,NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性,以及国际化使用的构造器和其他语言的方法等常见的功能。

Intl.Collator

collators 的构造函数,用于启用对语言敏感的字符串比较的对象。

Intl.DateTimeFormat

用于启用语言敏感的日期和时间格式的对象的构造函数。

Intl.ListFormat

启用对语言敏感的列表格式化的对象的构造函数。

Intl.NumberFormat

用于启用语言敏感数字格式的对象的构造函数。

Intl.PluralRules

用于启用多种敏感格式和多种语言语言规则的对象的构造函数。

Intl.RelativeTimeFormat

用于启用语言敏感的相对时间格式化的对象的构造函数。

在我们的例子中,我们重点关注 Intl.DateTimeFormat() 构造函数,以根据用户的区域设置来格式化报价的 dateAdded 属性。Intl.DateTimeFormat() 构造函数需要两个参数:定义日期格式化惯例的 locale 字符串和用于自定义日期格式的 options 对象。

创建的 Intl.DateTimeFormat() 对象有一个 format() 方法,它需要两个参数:我们要格式化的Date对象和用于自定义如何显示格式化日期的 options 对象。

const logDate = (locale) => {
    const newDate = new Date("2022-10-24"); // YY/MM/DD
    const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});
    const formatedDate = dateTime.format(newDate);
    console.log(formatedDate);
};

logDate("en-US"); // 10/24/2022
logDate("de-DE"); // 24.10.2022
logDate("zh-TW"); // 2022/10/24

dateTime.format() 根据当地的日期格式约定改变日期。我们可以使用navigator.language全局属性在报价单的日期上实现这一行为,该全局属性持有用户的首选区域设置。为此,我们将创建一个新的函数,接收一个日期字符串(YYYY-MM-DD格式),并根据用户的locale返回格式化的日期。

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const locale = navigator.language;
    const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});

    return dateTimeFormat.format(date);

};
原文:https://www.smashingmagazine.com/2022/09/javascript-api-guide/


链接: https://www.fly63.com/article/detial/12203

浏览器中的图像识别 API

在 Native 开发中,Android 和 IOS 平台都在系统层面直接提供给了应用开发识别图像的一些能力,比如对于二维码/条形码的识别,Android 可以使用 barcode API 、 iOS 可以使用 CIQRCodeFeature API 。

JavaScript的API设计原则

Js的API设计原则总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

适合写api接口文档的管理工具有哪些?

现在越来越流行前后端分离开发,使用ajax交互。所以api接口文档就变的十分有意义了,目前市场有哪些比较优秀的接口文档管理工具呢?比如:MinDoc,eoLinker,apizza,RAML,Swagger等等

前后端分离,如何防止api接口被恶意调用或攻击

无论网站,还是App目前基本都是基于api接口模式的开发,那么api的安全就尤为重要了。目前攻击最常见的就是“短信轰炸机”,由于短信接口验证是App,网站检验用户手机号最真实的途径,使用短信验证码在提供便利的同时,也成了呗恶意攻击的对象,那么如何才能防止被恶意调用呢?

JSON API免费接口_ 免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

整理提供最新的各种免费JSON接口,其中有部分需要用JSONP调用。方面前端同学的学习或在网站中的使用,包括:免费的天气预报、地图、IP、手机信息查询、翻译、新闻等api接口

什么是RESTful API?

要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST -- REpresentational State Transfer,英语的直译就是“表现层状态转移”。如果看这个概念,估计没几个人能明白是什么意思。

认识 Fetch API

Fetch API 已经作为现代浏览器中异步网络请求的标准方法,其使用 Promise 作为基本构造要素。Fetch 在主流浏览器中都有很好的支持,除了IE。

用一个通俗的例子讲清楚API

随着移动互联网的发展, 基于互联网的应用正变得越来越普及,在这个过程中,更多的平台将自身的资源开放给开发者来调用。对外提供的API 调用使得平台之间的内容关联性更强,同时这些开放的平台也为用户、开发者和中小网站带来了更大的价值。

docker提供api访问

环境centos,添加deamon.json后,dockerd命令可以启动docker,这时请求 127.0.0.1:2375 可以正常访问,使用systemctl无法启动docker的情况.无法启动docker:查看当前的docker配置

构建API的最佳编程语言是什么?

你是否正在设计第一个Web应用程序?也许你过去已经建立了一些,但是目前也正在寻找语言的变化以提高你的技能,或尝试新的东西。有了所有信息,就很难决定为下一个产品或项目选择哪种编程语言。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!