Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >你不知道的JavaScript APIs

你不知道的JavaScript APIs

作者头像
chuckQu
发布于 2022-11-28 08:26:26
发布于 2022-11-28 08:26:26
1K00
代码可运行
举报
文章被收录于专栏:前端F2E前端F2E
运行总次数:0
代码可运行

前言

在本文中,将介绍一些鲜为人知但却非常有用的API,如:

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

我们将一起看看它们是什么,我们应该在哪里使用它们,以及如何使用它们。

Page Visibility API

这是一个鲜为人知的 web API,在JS现状调查[1]中,它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。

在过去,你不得不使用一些噱头来了解用户是否切换了标签页或最小化了窗口。最流行的方式是使用blurfocus浏览器事件。使用这些事件会导致类似下面情况的发生:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.addEventListener("focus", function () {
    // User is back on the page
    // Do Something
});

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

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

什么时候使用

一般来说,我们想要使用Page Visibility API,是希望用来停止不必要的程序。比如说当用户没有看到页面时,或者执行后台操作时。具体的场景可以是:

  • 当用户离开页面时暂停视频、图像旋转或动画;
  • 如果页面显示来自API的实时数据,在用户离开时暂时停止实时显示的行为;
  • 发送用户分析报告。

如何使用

Page Visibility API带来了两个属性和一个事件,用于访问页面可见性状态:

  • document.hidden:该属性是全局可见并且只读。尽量避免使用该属性,因为现在已经被废弃了。当访问该属性时,如果页面是隐藏状态则返回true,如果页面是可见状态则返回false
  • document.visibilityState:该属性是document.hidden更新后的版本。当访问该属性时,会根据页面的可见性状态返回四个可能的值:
    • visible:该页面是可见的,或者准确地说,它没有被最小化,也不在另一个标签页。
    • hidden:该页面不可见,它是最小化的,或者在另一个标签页。
    • prerender:这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态可以从prerender开始,然后改变到另一个状态,但它不能从另一个状态改变到prerender
    • unloaded:该页面正在从内存中卸载。
  • visibilitychange:这是一个由document对象提供的事件,当页面的visibilityState发生变化时被触发。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // page is visible
    } else {
        // page is hidden
    }
});

为了了解如何使用Page Visibility API,让我们用该特性来实现当用户离开页面时,暂停视频以及停止从API获取资源。首先,我将使用vite.js,它是一个快速启动新项目的神奇工具:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm create vite@latest unknown-web-apis

当被要求选择一个框架时,选择vanilla来创建一个vanillajavascript项目。完成之后,前往新文件夹,安装必要的npm包并启动开发服务器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd unknown-web-apis
npm install
npm run dev

打开localhost:3000/[2],你将看到你的Vite项目启动和运行!

vite-new-project.png

首先,我们直接跳转到/main.js文件并删除所有样板代码。其次,打开/index.html,在id#appdiv标签内部添加一个video元素,上面可以添加你想添加的任意视频文件。这里我使用了一只正在跳舞的耀西。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <video controls id="video">
        <source src="./yoshi.mp4" />
    </video>
</div>

dancing-Yoshi.png

回到/main.js,我们将向document对象添加一个事件监听器,用来监听visibilitychange事件。然后当页面显示或隐藏时,我们可以访问document.visibilityState属性的值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.addEventListener("visibilitychange", () => {
    console.log(document.visibilityState);
});

你可以前往页面的控制台,当最小化窗口或者切换到另一个标签页时,查看页面可见性状态。现在,在事件监听器内部,我们可以检查document.visibilityState属性,当属性值为hidden时暂停视频,当属性值为visible时播放视频。当然,我们首先要使用document.querySelector()选择video元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const video = document.querySelector("#video");

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        video.play();
    } else {
        video.pause();
    }
});

现在,只要用户离开页面,视频就会停止。另一个使用Page Visibility API的场景是,当用户没有查看页面时,停止获取不必要的资源。为了看效果,我们将编写一个函数不间断地从quotable.io[3] API获取随机引用,并当页面隐藏时暂停该行为。首先,我们将在/index.html创建一个新的div标签来存储引用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <video controls id="video">
        <source src="./yoshi.mp4" />
    </video>
    <div id="quote"></div>
</div>

回到/main.js,我们使用Fetch API[4]发起对quotable.io端点https://api.quotable.io/random[5] 的调用,然后将结果插入到quotediv中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const quote = document.querySelector('#quote');

const getQuote = async () => {
  try {
    const response = await fetch('<https://api.quotable.io/random>');
    const { content, author, dateAdded } = await response.json();
    const parsedQuote = ` <q>${content}</q> <br> <p>- ${author}</p><br> <p>Added on ${dateAdded}</p>`;
    quote.innerHTML = parsedQuote;
  } catch (error) {
    console.error(error);
  }
};

让我们简单地解释一下此处发生了什么。首先我们从DOM中选中了quote元素。然后声明getQuote函数,该函数是一个异步函数,允许我们使用await关键字进行等待,直到从API中获取到数据。获取的数据是JSON格式的,因此我们再次使用await关键字来等待,直到数据被解析为JavaScript对象。

quotable.io的API为我们提供了contentauthordateAdded等属性,我们把这些属性注入并显示在quotediv中。这样做是没问题的,但是引用只会获取一次,因此我们可以使用setInterval()每10秒来调用一次函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const quote = document.querySelector('#quote');

const getQuote = async () => {
  try {
    const response = await fetch('<https://api.quotable.io/random>');
    const { content, author, dateAdded } = await response.json();
    const parsedQuote = ` <q>${content}</q> <br> <p>- ${author}</p><br> <p>Added on ${dateAdded}</p>`;
    quote.innerHTML = parsedQuote;
  } catch (error) {
    console.error(error);
  }
};

getQuote();

setInterval(getQuote, 10000);

如果用户最小化窗口或者切换标签页,该页面仍然会获取引用,创建没有必要的网络加载。为了解决这个问题,在获取引用之前我们可以检查当前页面是否可见。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const getQuote = async () => {
  if (document.visibilityState === 'visible') {
    try {
      const response = await fetch('<https://api.quotable.io/random>');
      const { content, author, dateAdded } = await response.json();
      const parsedQuote = `
          <q>${content}</q> <br> 
          <p>- ${author}</p><br> 
          <p>Added on ${dateAdded}</p>`;
      quote.innerHTML = parsedQuote;
    } catch (error) {
      console.error(error);
    }
  }
};

getQuote();

setInterval(getQuote, 10000);

现在,我们只会在页面对用户可见的情况下获取引用。

兼容性

广泛支持[6]

Web Share API

这是什么

Web Share API也是最不为人所知的API之一,但却非常有用。它可以让你访问操作系统的原生分享机制,这对移动端用户特别有用。有了这个API,你可以分享文本、链接和文件,而不需要创建你自己的分享机制或使用第三方的分享机制。

什么时候使用

用途已经不言自明。你可以用它将你的页面内容分享到社交媒体上,或将其复制到用户的剪贴板上。

如何使用

Web Share API赋予我们两个接口来访问用户的分享系统:

  1. navigator.canShare():接受你想分享的数据作为参数,并根据其是否可分享,来返回一个布尔参数。
  2. navigator.share():返回一个promise,如果分享成功的话,该promise将会resolve。该接口会调用原生分享机制,并接收你想分享的数据作为参数。注意,它只能在用户按下链接或按钮时调用。也就是说,它需要transient activation[7](瞬时激活)。分享数据是一个可以具有以下属性的对象:
    • url:要分享的链接
    • text:要分享的文本
    • title:要分享的标题
    • files:表示要分享的File对象数组

为了了解如何使用该API,我们将回收先前的用例,做一个选项使用Web Sharing API来分享我们的引用。首先,我们必须在/index.html新增一个分享按钮:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <video controls id="video">
        <source src="./yoshi.mp4" />
    </video>
    <div id="quote"></div>
    <button type="button" id="share-button">Share Quote</button>
</div>

前往/main.js从DOM中选择分享按钮。然后,创建async函数来分享想要分享的数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const shareButton = document.querySelector("#share-button");

const shareQuote = async (shareData) => {
    try {
        await navigator.share(shareData);
    } catch (error) {
        console.error(error);
    }
};

现在,我们可以为shareButton元素添加click事件监听器,以此来调用shareQuote函数。shareData.text的值会是quote.textContent属性,shareData.url的值会是页面的URL,也就是location.href属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const shareButton = document.querySelector("#share-button");

const shareQuote = async (shareData) => {
    try {
        await navigator.share(shareData);
    } catch (error) {
        console.error(error);
    }
};

shareButton.addEventListener("click", () => {
    let shareData = {
        title: "A Beautiful Quote",
        text: quote.textContent,
        url: location.href,
    };

    shareQuote(shareData);
});

现在你可以通过你的原生操作系统与任何人分享你的引用。然而,需要注意的是,Web Share API只有在上下文安全的情况下才会起作用,也就是说,页面是通过https://wss:// URLs提供的。

兼容性

基本不支持[8]

Broadcast Channel API

这是什么

我想谈论的另一个API是Broadcast Channel API 。它允许浏览器上下文互相发送和接收基本数据。浏览器上下文是指标签页、窗口、iframe等元素,或任何可以显示页面的地方。出于安全考量,浏览器上下文之间的通信是不被允许的,除非它们是同源的并使用Broadcast Channel API。对于两个同源的浏览器上下文,它们的URL必须有相同的协议(如http/https)、域(如example.com)和端口(如:8080)。

什么时候使用

Broadcast Channel API通常用于在不同的标签页和窗口之间保持页面状态同步,以提高用户体验或出于安全原因考虑。它也可以用来知道一个服务在另一个标签页或窗口中何时完成。使用场景有:

  • 在所有标签页上登录或注销用户。
  • 检测资源何时上传,并在所有页面中展示它。
  • 指示service worker做一些幕后工作。

如何使用

Broadcast Channel API涉及一个BroadcastChannel对象,该对象可用于向其他上下文发送信息。构造函数只有一个参数:作为标识符的字符串,该标识符从其他上下文连接到频道。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const broadcast = new BroadcastChannel("new_channel");

一旦我们在两个上下文中创建了具有相同标识符的BroadcastChannel对象,这个新的BroadcastChannel对象将有两个可用的方法来开始进行通信:

BroadcastChannel.postMessage():在所有连接的上下文中发送消息。它接受任意类型的对象作为其唯一的参数,因此你可以发送各种各样的数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
broadcast.postMessage("Example message");

BroadcastChannel.close():关闭通道,向浏览器表明它不会再收到任何信息,这样它就可以把这些信息收集到垃圾回收中。

为了接受信息,BroadcastChannel有一个message事件,我们可以使用addEventListener或其onmessage属性来监听。message事件有一个data属性,包含发送的数据和其他属性,以识别发送消息的上下文,如originlastEventIdsourceports

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
broadcast.onmessage = ({data, origin}) => {
    console.log(`${origin} says ${data}`);
};

让我们看看如何通过使用先前的例子来使用Broadcast Channel API。我们的目标是制作另一个具有同源的浏览器上下文,并在两个上下文中展示相同的引用。为了做到这一点,我们将创建一个名为new-origin的新文件夹,里面有一个新的/index.html/main.js文件。

/new-origin/index.html将是一个新的HTML模板,里面有一个#quotediv:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="../favicon.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
    </head>
    <body>
        <div id="quote"></div>
        <script type="module" src="./main.js"></script>
    </body>
</html>

/new-origin/main.js文件中,我们将创建一个新的broadcast channel,并从DOM中选择#quote元素:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const broadcast = new BroadcastChannel("quote_channel");
const quote = document.querySelector("#quote");

在先前的/main.js文件中,我们将创建新的BroadcastChannel对象,并连接到"quote_channel"。我们还将修改getQuote函数,将引用作为消息发送到其他上下文。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const broadcast = new BroadcastChannel("quote_channel");

//...

const getQuote = async () => {
 try {
  const response = await fetch("<https://api.quotable.io/random>");
  const {content, author, dateAdded} = await response.json();
  const parsedQuote = ` <q>${content}</q> <br> <p>- ${author}</p><br> <p>Added on ${dateAdded}</p>`;
  quote.innerHTML = parsedQuote;
  broadcast.postMessage(parsedQuote);
 } catch (error) {
  console.error(error);
 }
};

回到/new-origin/main.js文件,我们将监听message事件并在每次发送新的引用时改变quote.innerHTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const broadcast = new BroadcastChannel("quote_channel");
const quote = document.querySelector("#quote");

broadcast.onmessage = ({data}) => {
    quote.innerHTML = data;
};

现在你可以看到http://localhost:3000/new-origin/中的引用是如何变化为http://localhost:3000中的引用的。你也可以注意到,当http://localhost:3000标签被隐藏时,引用并没有改变,因为它只在其页面可见性状态为可见时才会去获取引用。

兼容性

广泛支持[9]

Internationalization API

这是什么

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

我们假设你想在你的网页上展示日期"2022年11月8日",就像"11/8/22"。根据读者所在的国家,这些数据可以用三种不同的方式来阅读:

  • "11/8/2022"或美国用户的MM/DD/YY。
  • "8/11/2022"或欧洲和拉美用户的DD/MM/YY。
  • "2011/8/22"或日本、中国和加拿大用户的YY/MM/DD。

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

如何使用

I18n API使用locale标识符来起作用。locale标识符是一个字符串,用来表示用户的语言、城市、地区、方言以及其他偏好。准确的说,locale标识符是一个字符串,由连字符分隔的子标签组成。子标签代表了用户偏好,比如语言、国家、地区或文字,并以以下方式格式化:

  1. "zh":中文(语言);
  2. "zh-Hant":用繁体字(文字)书写的中文(语言);
  3. "zh-Hant-TW":在台湾(地区)使用的繁体字(文字)书写的中文(语言)。

还有更多的子标签来解决更多用户的偏好(如果你想了解更多,你可以查看RFC[10]对语言标签的定义),但简而言之,I18n API使用这些locale标识符来知道如何格式化所有语言敏感的数据。

更确切地说,I18n API提供了一个Intl对象,它带来了一堆专门的构造函数来处理对语言敏感的数据。在我看来,一些对国际化最有用的Intl构造函数是:

  • Intl.DateTimeFormat():用于格式化日期和时间。
  • Intl.DisplayNames():用于格式化语言、地区和文字显示名字。
  • Intl.Locale():用于构建和操作locale标识符标签。
  • Intl.NumberFormat():用于格式化数字。
  • Intl.RelativeTimeFormat():用于格式化相对时间描述。

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

注意:在Intl.DateTimeFormat构造函数的options参数中,我们将timeZone属性设置为"UTC",这样日期就不会被格式化为用户的当地时间。在我的例子中,没有timeZone的选项,日期被解析为 "10/23/2022"。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const formatDate = (dateString) => {
    const date = new Date(dateString);
    const locale = navigator.language;
    const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});

    return dateTimeFormat.format(date);

};

我们可以在getQuote()函数中添加这个函数来解析dateAdded日期。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const getQuote = async () => {
    if (document.visibilityState === "visible") {
        try {
            const response = await fetch("<https://api.quotable.io/random>");
            const {content, author, dateAdded} = await response.json();
            const parsedQuote = `
            <q>${content}</q> <br> 
            <p>- ${author}</p><br> 
            <p>Added on ${formatDate(dateAdded)}</p>`;
            quote.innerHTML = parsedQuote;
            broadcast.postMessage(parsedQuote);
        } catch (error) {
            console.error(error);
        }
    }
};

有了这个,我们的引用就被本地化为用户的首选语言了!在我的例子中,我的navigator.language值是"en",所以我的日期被格式化为MM/DD/YY。

兼容性

广泛支持[11]

总结

读完这篇文章后,你现在可以灵活地了解这些API的存在以及如何使用它们。尽管它们在JS现状调查中的认知度排名最后,但它们非常有用,知道如何使用它们肯定会提高你的开发经验。这些强大的API并不为人所知,这意味着还有一些你我都不知道的有用的API,所以现在是探索并找到那个可以简化你的代码,并为你节省大量开发时间的API的最佳时机。

以上就是本文的所有内容,如有对你有所帮助,欢迎点赞收藏转发~

参考资料

[1]

JS现状调查: https://2021.stateofjs.com/en-US/features/

[2]

localhost:3000/: http://localhost:3000/

[3]

quotable.io: https://github.com/lukePeavey/quotable

[4]

Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

[5]

https://api.quotable.io/random: https://api.quotable.io/random

[6]

广泛支持: https://caniuse.com/pagevisibility

[7]

transient activation: https://developer.mozilla.org/en-US/docs/Glossary/Transient_activation

[8]

基本不支持: https://caniuse.com/web-share

[9]

广泛支持: https://caniuse.com/mdn-api_broadcastchannel_name

[10]

RFC: https://datatracker.ietf.org/doc/html/rfc5646

[11]

广泛支持: https://caniuse.com/internationalization

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端F2E 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
你不知道的JavaScript APIs
这个APi 可以让我们知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签,该API都会触发一个事件 visibilitychange 。
前端小智@大迁世界
2022/10/28
8250
几个神奇的Web Api,你(可能)不知道~
作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(https://github.com/1921622004/webapi) (真的很简单,样式等于没有~)这几个api分别是:
苏南
2020/12/16
5850
几个神奇的Web Api,你(可能)不知道~
105.精读《What's new in javascript》
2019 年 Google I/O 介绍了一些激动人心的 JS 新特性,这些特性有些已经被主流浏览器实现,并支持 polyfill,有些还在草案阶段。
黄子毅
2022/03/14
5310
浏览器跨 Tab 窗口通信原理及应用实践
代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - broadcastAnimation
Sb_Coco
2023/11/29
9210
浏览器跨 Tab 窗口通信原理及应用实践
那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
9290
10个你可能没用过,但很强大的Web API
在本文中,我将介绍 10 个不那么流行的 Web API。不那么流行并不意味着它们没有用处。你可以在项目的各种用例中使用它们。
@超人
2021/05/24
6890
10个你可能没用过,但很强大的Web API
浏览器跨标签页通信的8种常见的方式
浏览器跨标签页通信是指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下,每个标签页都是一个独立的浏览器上下文,它们之间是相互隔离的,无法直接访问对方的数据或进行通信。
王小婷
2023/09/24
4.9K0
JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下
^_^肥仔John
2018/01/18
1.6K0
JS魔法堂:不完全国际化&本地化手册 之 实战篇
未来网站开发必备:14个让你惊艳的JavaScript Web API!
快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群,一起找bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home
前端小智@大迁世界
2023/07/09
6210
未来网站开发必备:14个让你惊艳的JavaScript Web API!
记录一些在此之前不知道的Web API
Web API:https://developer.mozilla.org/zh-CN/docs/Web/API
房东的狗丶
2023/02/17
4470
JavaScript 页面可见性 Page Visibility API 监听用户离开页面
Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
Leophen
2020/10/28
2.8K0
# 学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。
九旬
2023/10/19
5000
ECMAScript 2021 (ES12)的新特性总结
ECMAScript 2021 最终功能集于今年的3 月 9 日确定,2021 年6 月 22 日,第 121 届 Ecma 国际 宣布 ECMAScript 2021(ES12)成为事实的 ECMAScript 标准,并被写入 ECMA-262 第 12 版。先纵览下 ES2021 的新功能,看看现在这些特性在你工作中有没有用到吧:
江一铭
2022/06/16
1.3K0
ECMAScript 2021 (ES12)的新特性总结
【JS】1678- 重学 JavaScript API - Broadcast Channel API
本文将介绍 Broadcast Channel API 的基本和高级使用方法,并提供示例代码来帮助读者更好地理解和使用该 API。
pingan8787
2023/09/01
5600
【JS】1678- 重学 JavaScript API - Broadcast Channel API
JavaScript ES2021最值得期待的新特性解析
每年,JavaScript 的更新都会添加新特性。今年发布的是 ES2020 或称 ES11,预计 ES2021 或称 ES12 将于 2021 年中发布。添加到 JavaScript 的新特性都会经历四个阶段。在本文中,我将讨论已经进入第四阶段且已添加到谷歌 Chrome V8 引擎中的新特性。
深度学习与Python
2020/11/06
8040
JavaScript ES2021最值得期待的新特性解析
你可能不知道的 21 个 Web API
本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。以下案例能配动图的我尽量去配了,以免内容枯草乏味,但是如果内容有误,也请大家亲喷或者纠正?
桃翁
2019/08/30
1.5K0
你可能不知道的 21 个 Web API
Node.js v17 来了,看看都有哪些新功能?
Node.js v17 版本已发布,取代了 v16 做为当前版本,新的 v17 版本提供了一些新功能:基于 Promise 的其它核心模块 API、错误堆栈尾部增加 Node.js 版本信息、OpenSSL 3.0 支持、v8 JavaScript 引擎更新至 9.5。
五月君
2021/10/27
1.8K0
Node.js v17 来了,看看都有哪些新功能?
可能还有你不知道的 JavaScript 控制台方法
无论你是 Web 开发的初学者,还是经验丰富的开发人员,你都可能会发现还有你不知道的 JavaScript 控制台方法。
默存
2024/05/11
1670
可能还有你不知道的 JavaScript 控制台方法
JavaScript 如何实现同源通信?
在日常工作中,你可能会遇到同源页面间通信的场景。针对这种场景,我们可以使用 localStorage 和 storage 事件来解决同源页面间通信的问题。除此之外,我们还可以使用 Broadcast Channel API 来解决该问题。接下来,阿宝哥将带大家一起来认识一下 Broadcast Channel API。
皮卡苏
2021/08/12
1.2K0
JavaScript 如何实现同源通信?
内置于浏览器中的国际化API[每日前端夜话0xBA]
你的程序很有可能需要支持多种语言。其中包括对语言敏感的日期处理。一个广受欢迎的库Moment.js【https://www.npmjs.com/package/moment】有助于实现这一目标,它的功能之一是国际化。其源代码【https://github.com/moment/moment/blob/develop/locale/en-gb.js】中包含对许多不同语言的本地化。现在这可能已经不是最好的方法了,因为我们有 ECMAScript 国际化 API。
疯狂的技术宅
2019/09/10
1.5K0
内置于浏览器中的国际化API[每日前端夜话0xBA]
相关推荐
你不知道的JavaScript APIs
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验