前往小程序,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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
PD快充诱骗器工作原理及特点
PD快充全称‌Power Delivery‌,是由USB-IF组织 制定的快速充电标准,旨在通过USB接口(尤其是USB Type-C)提供更高的充电功率和更快的充电速度,与传统的USB充电协议相比,PD快充具有更高的充电功率、更广泛的电压范围以及更灵活的充电电流调整能力。因此,它成为了许多智能手机、平板电脑、笔记本电脑等电子设备的首选快充方案。
用户11249399
2025/04/30
1811
PD快充诱骗器工作原理及特点
FS8024A快充取电诱骗IC芯片USB PD 协议 SINK 端输出控制器芯片
FS8024A是一款PD诱骗取电芯片支持PD3.0。由Type-C PD 电源传输接收 SINK 端控制器芯片, FS8024A 可以从 Type-C PD 电源请求 FS8024A 设定的电压。 FS8024A 的 CC1 和 CC2 内置了下拉电阻,当连接 Type-C 电源时, PD 协议自动通讯,完成FS8024A 设定的电压请求通讯, 并输出通讯设定的电压。
泛海微电
2023/04/13
6160
FS8024A快充取电诱骗IC芯片USB PD 协议 SINK 端输出控制器芯片
FS8024A/FS8025B用Type-C接口QC/PD快充取电芯片
过去几年,我们看到了USB Type-C口的普及趋势与速度,尤其在电动工具、智能家居领域,比如电动窗帘、智能台灯、电动导轨、手持电动工具等方面,已经由传统的充电方式升级成为了通过USB-C口完成的快充。通过使用USB-C口,电池充电的速度大大提高。例如,一些电动工具可以在15分钟内完成一半以上的充电。 而在PD3.1标准推出后,快充功率上限达到240W。这一变化使USB Type-C可以为更多的设备提供足够的充电功率,包括一些需要更高功率充电的大型电子设备、物联网设备、通信和安防设备、汽车和医疗设备等。比如,240W (48 V 5A)的大功率甚至可以满足两轮电动车的充电需求图 ,未来的发展趋势,提前布局产品,如何将电子设备的传统接口升级成为USB Type-C接口甚至升级为支持240 W快充的接口,成了新的命题。
泛海微电
2023/07/11
3820
FS8025B是一款PD/QC协议诱骗芯片
FS8025B 按照外围电路设置的电压,比如 5V9V,12V,15V,20V,自动和充电设备握手,完成对设置电压的申请。
泛海微电
2023/04/13
3020
FS8025B是一款PD/QC协议诱骗芯片
LDR6035Q,单C口可充可放
目前市面上的蓝牙音箱、平板、POS机等设备,大多仍采用USB-micro接口,充电功率只有5-10W,如同蜗牛般缓慢的充电效率,着实让人心烦。而那些设有蓝牙音箱接U盘功能的产品,还需额外设置一个USB-A母座和TF卡槽、3.5MM耳机接口等,让本已简洁的产品显得更加繁杂。
Ahsi
2023/11/17
3590
LDR6035Q,单C口可充可放
FS5175兼容PD 和 QC 快充充电器输入双节锂电池 2A 充电 IC 方案
FS4067锂电池充电管理芯片,可达3.5A充电电流,开关式高效率,支持两串锂电池充电。
泛海微电
2023/08/23
2830
单芯片搞定多协议,Type-C受电端Sink取电芯片
作为新一代的物理接口标准,TYPE-C正在迅速成为电子工程师设计中的常用元素。很多工程师一开始都会有个误会,即TYPE-C接口,一定要使用CC逻辑芯片,否则无法通信。这其实是一个误会。USB -IF委员会,制定TYPE-C标准的原意,是要节约社会资源,而不是浪费社会资源,试想,如果连一个简单的适配器,一个U盘,一个鼠标,一个Ukey都要加上TYPE-C芯片,会不会有很多人都怀疑是多此一举呢?为了让工程师对这个问题能够有一个简洁的判定标准。笔者用两个原则来帮助大家进行这个判断:
Legendary_008
2023/07/29
3860
单芯片搞定多协议,Type-C受电端Sink取电芯片
PD诱骗协议芯片XSP04D,支持全协议支持与主板公共用一个Type-C与电脑传输数据
随着智能电子产品的广泛应用,快充方案越来越受到重视,且迭代次数也更加频繁。在一些使用频率较高、耗电较大的电子产品中,快充方案也成为了大多数人的追求,它能很大程度上缩短充电的时间,例如XSP04D这款快充诱骗协议方案,它不仅能实现从电源适配器的A/C取电给设备快速供电,还能实现和主板共用一个Type-C和电脑传输数据功能。
用户11249399
2025/05/10
380
pd sink取电诱电协议芯片介绍
前言:在如今快节奏生活不断蔓延的背景下,人们对各种事情的处理也渐渐地开始要求在保证质量的情况下,不断加快。手机快充就是一个典型的例子,从开始的18W,30W快充,到现在已经有240W的超级快充出现。在这其中,PD芯片扮演着一个重要的角色,而PD SINK 取电快充协议芯片作为设备端的快充协议芯片,有无PD SINK 取电快充协议芯片决定了这一个Type-C充电口是否支持快充。
Legendary_008
2024/02/24
2460
pd sink取电诱电协议芯片介绍
快充电压诱骗芯片 PW6606:超强兼容性,充电无忧
1, A 口充电器,就是我们常见的 USB 口,如下图,这种通用快充协议叫: QC3.0,QC2.0 快充,是属于快充刚开始的充电协议,支持 5V,9V,12V 和 20V 电压输出充电器,充电器功率一般为 18W.
用户11011651
2024/05/20
4310
快充电压诱骗芯片 PW6606:超强兼容性,充电无忧
PD sink 受电端多协议快充芯片方案
这么多年的更新迭代,充电器的接口升级也是从各种乱七八糟的接口逐渐的统一成Type-c接口,那么Type-C接口有什么优势呢?
Legendary_008
2023/07/01
4342
PD sink 受电端多协议快充芯片方案
USB-C PD受电端Sink取电诱电受电多协议芯片LDR6328S
USB PD通讯就是Host(Source)和Power Brick(Sink)之间的数据交互。
Legendary_008
2023/07/07
5330
PD快充电压诱骗芯片,QC快充电压诱骗IC,8脚芯片FS313B封装CPC8
随着科技的不断发展,充电技术也在不断进步,其中快充技术成为了目前手机、平板等移动设备的一大卖点。而在快充技术中,PD快充电压诱骗芯片和QC快充电压诱骗IC是两种常见的芯片,它们被广泛应用于各种快充设备中。本文将对这两种芯片进行详细的介绍和比较,帮助读者更好地了解它们的特性和应用场景。 一、PD快充电压诱骗芯片 PD快充电压诱骗芯片,全称为Power Delivery (PD) Voltage Sense and Trickle Charging IC,是一种集成了电压检测、电流检测和充电控制功能的芯片。它支持最新的USB PD3.0快充标准,能够实现更高的充电功率和更快的充电速度。 PD快充电压诱骗芯片的主要特点包括: 1. 支持多种电压档位:PD快充电压诱骗芯片支持5V、9V、12V、15V、20V等多个电压档位,可以满足不同设备的充电需求。 2. 集成度高:芯片内部集成了电压检测、电流检测和充电控制等功能,可以大幅减少外围元件的数量,降低整体成本。 3. 充电速度快:由于支持最新的USB PD3.0快充标准,PD快充电压诱骗芯片可以实现更高的充电功率,让设备在短时间内充满电。 4. 智能化控制:芯片内部具有智能识别算法,可以根据不同的设备自动选择合适的电压和电流,实现智能化充电。 5. 安全可靠:芯片具有过压保护、过流保护、过温保护等多种保护功能,可以确保充电过程的安全可靠。 二、QC快充电压诱骗IC QC快充电压诱骗IC,全称为Quick Charge Voltage Sense and Trickle Charging IC,是一种支持高通Quick Charge快充协议的芯片。它能够实现较高的充电功率和较快的充电速度,主要应用于支持高通Quick Charge技术的设备。 QC快充电压诱骗IC的主要特点包括: 1. 支持高通Quick Charge快充协议:芯片能够与支持高通Quick Charge协议的设备完美兼容,实现高速充电。 2. 充电速度快:由于支持高通Quick Charge快充协议,QC快充电压诱骗IC可以实现较高的充电功率,让设备在短时间内充满电。 3. 集成度高:芯片内部集成了电压检测、电流检测和充电控制等功能,可以大幅减少外围元件的数量,降低整体成本。 4. 可定制性强:芯片可根据客户需求进行定制,支持不同的电压和电流档位,满足不同设备的充电需求。 5. 安全可靠:芯片具有过压保护、过流保护、过温保护等多种保护功能,可以确保充电过程的安全可靠。 三、PD快充电压诱骗芯片与QC快充电压诱骗IC的比较 1. 兼容性:PD快充电压诱骗芯片支持最新的USB PD3.0快充标准,具有更广泛的兼容性。而QC快充电压诱骗IC只支持高通Quick Charge快充协议,兼容性相对较窄。 2. 成本:由于PD快充电压诱骗芯片的市场需求更大,因此其成本相对较低。而QC快充电压诱骗IC主要应用于支持高通Quick Charge技术的设备,因此其成本相对较高。 3. 技术成熟度:PD快充电压诱骗芯片在市场上的应用已经相当成熟,而QC快充电压诱骗IC的应用相对较少。因此,在技术成熟度方面,PD快充电压诱骗芯片更具优势。 4. 未来发展:随着USB PD快充技术的不断发展和普及,PD快充电压诱骗芯片的市场前景更加广阔。而QC快充电压诱骗IC的应用则可能受到一定限制。因此,在未来的发展方面,PD快充电压诱骗芯片更具潜力。
泛海微电
2024/01/16
8150
FS312bl和FS312bh丝印支持PD3.1与QC2.0快充充电器诱骗取电芯片
随着智能手机的普及,快速充电技术也日益受到人们的关注。在这个领域中,FS312bl和FS312bh丝印支持PD3.1与QC2.0快充充电器的诱骗取电芯片无疑是最受欢迎的产品之一。本文将详细介绍这两种芯片的特点和应用。 首先,FS312bl和FS312bh丝印支持PD3.1与QC2.0快充充电器诱骗取电芯片是针对目前市场上的主流快充技术而设计的。其中,PD3.1是一种采用Type-C接口的充电协议,而QC2.0则是高通公司推出的快充技术。这两种芯片都能够实现对这两种快充技术的支持,从而为手机等设备提供更快的充电速度。 其次,这两种芯片都具有诱骗取电的功能。所谓诱骗取电,是指通过一定的技术手段,将电源适配器的输出电压和电流调整到与目标设备相匹配的值,从而实现快速充电。使用FS312bl和FS312bh芯片,可以轻松实现诱骗取电的功能,从而缩短充电时间,提高充电效率。 此外,这两种芯片还具有其他一些实用的功能。例如,它们可以通过软件进行编程,实现对不同设备的识别和控制。此外,它们还具有过热、过流和过压保护等功能,以确保充电过程的安全性和稳定性。 最后,FS312bl和FS312bh丝印支持PD3.1与QC2.0快充充电器诱骗取电芯片在应用方面也具有广泛性。除了可以应用于智能手机等移动设备外,还可以应用于平板电脑、笔记本电脑等其他设备。同时,由于其支持多种快充技术,因此可以适用于各种不同的充电器和电源适配器,从而为用户带来更加便捷的充电体验。 总之,FS312bl和FS312bh丝印支持PD3.1与QC2.0快充充电器诱骗取电芯片是针对目前市场上的主流快充技术而设计的,具有诱骗取电、多种保护功能以及广泛的应用等特点。随着智能设备的日益普及,这些芯片的需求也将不断增加。未来,我们可以预见到这两种芯片将会在移动设备领域中发挥更加重要的作用。
泛海微电
2023/11/27
3280
快充过程中电源适配器与手机是怎么通讯的?
快充,望文生义便是给手机快速充电,经过软/硬件技术手段,调整手机的电压与电流的输入值,然后缩短手机的充电时刻,打破以往传统的5V/1A形式。进步充电速度的方法无非三种:电流不变,进步电压;电压不变,进步电流;电压、电流两者都进步。
Legendary_008
2023/11/04
1.1K0
快充过程中电源适配器与手机是怎么通讯的?
国产PD快充取电芯片——如何改用Type- C接口实现快充?
过去几年,我们看到了USB Type-C口的普及趋势与速度。尤其是在USB PD3.1标准发布以后,该规范将快充功率上限从100 W提升至240 W(支持Extended Power Range,简称EPR)。这一变化使USB Type-C可以为更多的设备提供足够的充电功率,包括一些需要更高功率充电的大型电子设备、物联网设备、通信和安防设备、汽车和医疗设备等。
Legendary_008
2023/12/08
5650
国产PD快充取电芯片——如何改用Type- C接口实现快充?
单Type-C接口设备实现充电+传输USB2.0数据芯片方案
目前市面上的蓝牙音箱,平板,POS机等大多仍然还是采用USB-micro接口,充电功率只有5-10W,不仅充电效率慢,而且蓝牙音箱想接U盘还要多设置一个USB-A母座,加上TF卡槽,3.5MM耳机接口,显得多而繁杂。
Legendary_008
2023/11/04
7480
单Type-C接口设备实现充电+传输USB2.0数据芯片方案
USB PD快充协议_pd快充协议文件
1 USB Type-C 1.1 电气参数 Rd: 5.1kΩ Ra: 1.0kΩ Rfrswap: 5Ω,for PD 3.0 FR_Swap 4b5b bit rate: 300kbps BMC bit rate: 600kbps Rp: Reference to the Figure 1-1
全栈程序员站长
2022/11/16
1.8K0
USB PD快充协议_pd快充协议文件
小封装QFN3*3 PD(sink,诱电)受电端取电协议芯片方案
快充 VS 慢充 普通充电,使用USB Type-A Standard接口转USB Type-B Micro接口的连接线给手机充电。
Legendary_008
2023/07/20
4240
小封装QFN3*3  PD(sink,诱电)受电端取电协议芯片方案
消费类小家电Type-C接口取电IC
欧盟规定2024年开始进出口消费类产品要统一改用type-c接口才能售卖,目的是为了减少电子垃圾,因为现在得家庭手机多电子产品多,各式各样得接口五花八门得,现在统一type-c口,在电子垃圾上能减少。
legendary_163
2023/07/15
2460
消费类小家电Type-C接口取电IC
推荐阅读
相关推荐
PD快充诱骗器工作原理及特点
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验