Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
- Intl.DateTimeFormat
Intl.DateTimeFormat对象能使日期和时间在特定的语言环境下格式化。
// 创建一个新的 Intl.DateTimeFormat 对象 Intl.DateTimeFormat() // getter 函数，根据此 DateTimeFormat 对象的区域设置和格式化选项格式化日期 Intl.DateTimeFormat.prototype.format()
示例：
// 实例化一个日期对象 const date = new Date() // 创建一个新的 Intl.DateTimeFormat 对象 let dtf_en = new Intl.DateTimeFormat('en-US').format(date) // 使用 locales 参数指定美式英语 (US English)：month-day-year 格式 console.log(dtf_en) // 5/6/2023 // 使用 locales 参数指定中文 (CH Chinese)：month-day-year 格式 let dtf_ch = new Intl.DateTimeFormat('zh-CH').format(date) console.log(dtf_ch) // 2023/5/6 // 请求参数 (options) 中包含参数星期 (weekday)，并且该参数的值为长类型 (long) - 参考语言环境对应输出 let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } let dtf_ch_options = new Intl.DateTimeFormat('zh-CH', options).format(date) console.log(dtf_ch_options); // 2023年5月6日星期六
API 参考地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
Navigator.sendBeacon
navigator.sendBeacon(url, data) 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。
data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。
当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
方法主要用于满足统计和诊断代码的需要。在项目中可做"埋点"处理，收集用户的使用习惯和信息数据。
可以解决传统方式（如下）出现的问题（迫使用户代理延迟卸载文档）：
发起一个同步 XMLHttpRequest 来发送数据。
创建一个 img 元素并设置 src，大部分用户代理会延迟卸载（unload）文档以加载图像。
navigator.sendBeacon 优势：
相较于img标签，使用navigator.sendBeacon会更规范，数据传输上可传输资源类型会更多。
对于ajax在页面卸载时上报，ajax有可能没上报完，页面就卸载了导致请求中断，因此ajax处理这种情况时必须作为同步操作.
sendBeacon是异步的，不会影响当前页到下一个页面的跳转速度，且不受同域限制。这个方法还是异步发出请求，但是请求与当前页面脱离关联，作为浏览器的任务，因此可以保证会把数据发出去，不拖延卸载流程。
在会话结束时发送统计数据
网站通常希望在用户完成页面浏览后向服务器发送分析或诊断数据，最可靠的方法是在 visibilitychange 事件发生时发送数据
document.addEventListener('visibilitychange', function logData() { if (document.visibilityState === 'hidden') { navigator.sendBeacon('/log', analyticsData); } });
基于Navigator.sendBeacon的埋点上报
Navigator.sendBeacon是目前通用的埋点上报方案，Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。
页面停留时间上报埋点
绑定点击事件，当点击目标元素时，触发埋点上报。
function clickButton(url, data) { navigator.sendBeacon(url, data) }
页面停留时间上报埋点
路由文件中，初始化一个startTime，当页面离开时通过路由守卫计算停留时间。
let url = ''// 上报地址 let startTime = Date.now() let currentTime = '' router.beforeEach((to, from, next) => { if (to) { currentTime = Date.now() stayTime = parseInt(currentTime - startTime) navigator.sendBeacon(url, {time: stayTime}) startTime = Date.now() } })
内容可见埋点
通过交叉观察器去监听当前元素是否出现在页面
// 可见性发生变化后的回调 function callback(data) { navigator.sendBeacon(url, { target: data[0].target, text: '内容可见' }) } // 交叉观察器配置项 let options = {}; // 生成交叉观察器 const observer = new IntersectionObserver(callback); // 获取目标节点 let target = document.getElementById("target"); // 监听目标元素 observer.observe(target);
