埋点,自己写插件,自己写的按钮埋点,掘金同款投递简历

2024-04-23 17:52

本文主要是介绍埋点,自己写插件,自己写的按钮埋点,掘金同款投递简历,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

20分钟掌握 Vite 插件开发 - 掘金  vite的生命周期啥的

1.浏览器的控制台输出有样式的字

// const randomLetterPlugin = ()=>{
//     const letters = ['wwwwwww','000000000000','888888888888'];
//     //随机获取一个字符并打印
//     const printRandomLetter = ()=>{
//         const randomIndex = Math.floor(Math.random() * letters.length);
//         const randomLetter = letters[randomIndex];
//         console.log(`Random Letter:${randomLetter}`);
//     };//     return{
//         name:'random-letter-plugin',
//         configureServer(server){
//             //在服务器启动时立即执行
//             printRandomLetter();
//         }
//     }
// };// export default randomLetterPlugin;const randomLetterPlugin = ()=>{const letters = ['我猜你就会点开控制台','你找我有啥事吗','看到你看了,我猜你又出bug了'];//随机获取一个字符并打印const printRandomLetter = ()=>{const randomIndex = Math.floor(Math.random() * letters.length);const randomLetter = letters[randomIndex];console.log(`Random Letter:${randomLetter}`);return `Random Letter:${randomLetter}`};return{name:'random-letter-plugin',configureServer(server){//在服务器启动时立即执行printRandomLetter();},transform(code,id){console.log('--------------------------');console.log(id);if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}\nif (typeof window !== 'undefined'){// 在这里添加你的逻辑const letters = ['wwwwwww','000000000000','888888888888'];const printRandomLetter = ()=>{const randomIndex = Math.floor(Math.random() * letters.length);const randomLetter = letters[randomIndex];return randomLetter};console.log('%c' + printRandomLetter(),'color:#1e80ff;font-size:20px;background:#fff;border-radius:5px;padding:5px 10px;');}`;}//这里自己写的用不了,gpt生成的可以// if(id.endsWith('main.js')){//     console.log('==========================');//     return `${code}\nif ( typeof window !== 'undefined'){//         const letters = ['wwwwwww','000000000000','888888888888'];//         const printRandomLetter = ()=>{//             const randomIndex = Math.floor(Math.random() * letters.length);//             const randomLetter = letters[randomIndex];//             return randomLetter//         };//         console.log(printRandomLetter());//     }`// }return code;}}
};export default randomLetterPlugin;import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import randomLetterPlugin from './plugins/randomLetterPlugin.js'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), randomLetterPlugin()],
})

2.自己写的按钮埋点

页面中有很多原生的按钮和element plus的按钮

const randomLetterPlugin = ()=>{return{name:'random-letter-plugin',transform(code,id){if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}if (typeof window !== 'undefined'){const buttons = document.querySelectorAll('button');// 遍历所有按钮,并为每个按钮添加点击事件buttons.forEach((button,i) => {button.addEventListener('click', () => {// 输出按钮中的文字console.log(button.textContent);});});}`;}return code;}}
};export default randomLetterPlugin;

3.掘金同款投递简历

const randomLetterPlugin = ()=>{return{name:'random-letter-plugin',transform(code,id){if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}if (typeof window !== 'undefined'){console.log('%c欢迎投递方头有限责任公司: https://www.baidu.com/','color:#1e80ff;background:#fff;');}`;}return code;}}
};export default randomLetterPlugin;

vite 有个transform钩子还是什么的生命周期你可以在里面参一脚
export default function requirePlugin() {return {name: "vite-plugin-vue-requireToUrlPlugin",transform(code:string, id:string) {const vueRE = /\.tsx$/;const require = /require/g;if (!vueRE.test(id) || !require.test(code)) return code;const requireRegex = /require\((.*?)\)/g;const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");return finalCode;},};
}

神策

这篇关于埋点,自己写插件,自己写的按钮埋点,掘金同款投递简历的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/929488

相关文章

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》:本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插

maven中的maven-antrun-plugin插件示例详解

《maven中的maven-antrun-plugin插件示例详解》maven-antrun-plugin是Maven生态中一个强大的工具,尤其适合需要复用Ant脚本或实现复杂构建逻辑的场景... 目录1. 核心功能2. 典型使用场景3. 配置示例4. 关键配置项5. 优缺点分析6. 最佳实践7. 常见问题

MyBatis分页插件PageHelper深度解析与实践指南

《MyBatis分页插件PageHelper深度解析与实践指南》在数据库操作中,分页查询是最常见的需求之一,传统的分页方式通常有两种内存分页和SQL分页,MyBatis作为优秀的ORM框架,本身并未提... 目录1. 为什么需要分页插件?2. PageHelper简介3. PageHelper集成与配置3.

Maven 插件配置分层架构深度解析

《Maven插件配置分层架构深度解析》:本文主要介绍Maven插件配置分层架构深度解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Maven 插件配置分层架构深度解析引言:当构建逻辑遇上复杂配置第一章 Maven插件配置的三重境界1.1 插件配置的拓扑

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

IDEA常用插件之代码扫描SonarLint详解

《IDEA常用插件之代码扫描SonarLint详解》SonarLint是一款用于代码扫描的插件,可以帮助查找隐藏的bug,下载并安装插件后,右键点击项目并选择“Analyze”、“Analyzewit... 目录SonajavascriptrLint 查找隐藏的bug下载安装插件扫描代码查看结果总结Sona