Vue实现JSON字符串格式化编辑器组件

相信很多同学都用过网上的在线JSON格式化工具来将杂乱的JSON数据转换成易于我们阅读和编辑的格式。那么,你有没有想过自己动手实现一个这样的工具呢?今天,我将介绍如何使用Vue.js来构建一个简单的JSON格式化工具。

功能简述

  • 支持格式化JSON字符串
  • 支持去除字符串中的空格
  • 支持全屏操作
  • 实时展示格式化状态
  • 控制台展示成功和失败的详情,支持错误定位
  • 编辑器精准计算字符串的行号

效果图展示

默认

全屏

功能介绍

按钮

其他

1、自动补全

输入”(“、”{“、”[“将会自动补全另一半

2、自动删除

删除括号时也会自动删除另一半

3、括号匹配

点击括号会高亮另一半括号,方便定位

4、支持ctrl+z撤销和ctrl+y重做功能

5、编辑器根据字符串的换行计算行号并展示

代码

vue文件
<!--JsonEditor.vue-->
<template><div ref="center" id="editor_body" :style="{ height: editorHeight, width: editorWidth }"><div style="height: 80%"><div class="tool_slider"><div style="display: flex; align-items: center"><imgsrc="@/assets/icons/format.svg"class="icon_hover"@click="prettyFormat(viewJsonStr)"title="格式化"/><div style="height: 18px; border: 1px solid #858585; margin: 0 3px"></div><imgsrc="@/assets/icons/clearLine.svg"class="icon_hover"@click="viewJsonStr = viewJsonStr.replace(/\s+/g, '')"title="去除空格"/><divstyle="display: flex;align-items: center;border-left: 2px solid #858585;height: 18px;margin: 0 3px;padding: 0 3px;"><imgsrc="@/assets/icons/full.svg"v-if="!isFullScreen"class="icon_hover"@click="fullScreen"title="全屏"/><imgsrc="@/assets/icons/closeFull.svg"v-elseclass="icon_hover"@click="fullScreen"title="退出"/></div></div><div style="display: flex; align-items: center"><imgsrc="@/assets/icons/success.svg"title="格式正确"v-if="isPass"style="height: 20px; width: 20px"/><imgsrc="@/assets/icons/error.svg"title="格式错误"v-elsestyle="height: 17px; width: 17px"/></div></div><div class="edit-container"><textareawrap="off"cols="1"id="leftNum"disabledonscroll="document.getElementById('rightNum').scrollTop = this.scrollTop;"></textarea><textarearef="myTextarea"id="rightNum":key="isFullScreen"style="width: 100%"placeholder="请输入JSON字符串"onscroll="document.getElementById('leftNum').scrollTop = this.scrollTop;":value="viewJsonStr"@click="handleClick"@input="handleTextareaInput1"/></div></div><div id="console">{{ jsonObj }}</div></div>
</template><script lang="ts" setup>import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';import { cloneDeep } from 'lodash-es';import {handleBackspace,handleClick,handleClickEnter,handleTabKey,handleTextareaInput,setAutoKey,} from '@/components/JsonEditor';const emit = defineEmits(['update:value']);const props = defineProps({value: {type: String,default: '',},width: {type: String,default: '1000px',},height: {type: String,default: '400px',},});const viewJsonStr: any = ref(props.value);const editorWidth: any = ref(JSON.parse(JSON.stringify(props.width)));const editorHeight: any = ref(JSON.parse(JSON.stringify(props.height)));// 自动补全function handleTextareaInput1(event) {handleTextareaInput(viewJsonStr, event);}const isPass = ref(true);watch(() => viewJsonStr.value,(newValue) => {calculateNum(newValue);emit('update:value', newValue);},);const num = ref('');function calculateNum(value) {let lineBbj: any = document.getElementById('leftNum');num.value = '';let str = value;if (str === null || str === undefined) {str = '';}str = str.replace(/\r/gi, '');str = str.split('\n');let n = str.length;if (n.toString().length > 3) {lineBbj.style.width = n.toString().length * 10 + 'px';} else {lineBbj.style.width = '30px';}for (let i = 1; i <= n; i++) {if (document.all) {num.value += i + '\r\n'; //判断浏览器是否是IE} else {num.value += i + '\n';}}lineBbj.value = num.value;}// 预览对象const jsonObj = computed(() => {const str = cloneDeep(viewJsonStr.value);// 如果输入的全是数字,JSON.parse(str)不会报错,需要手动处理一下const onlyNumber = /^\d+$/.test(str);const dom = document.getElementById('console');function setColor(color) {if (dom) {dom.style.color = color;}}if (str) {try {if (onlyNumber) {setColor('red');isPass.value = false;return getCurrentTime() + str + ' is not valid JSON';}setColor('black');isPass.value = true;if (JSON.parse(str)) {setColor('green');return `${getCurrentTime()}校验通过`;}} catch (e: any) {isPass.value = false;setColor('red');if (e.message?.match(/position\s+(\d+)/)) {const location = e.message?.match(/position\s+(\d+)/)[1];const str1 = str.substring(0, location).trim();const str2 = str1.split('\n');const message = e.message.substring(0, e.message.indexOf('position'));// 如果当前行或者前一行有'['if (str2[str2.length - 1]?.includes('[')) {const { line, column } = getLineAndColumn(str1, str1.length - 1);return `${message} at line ${line},column ${column}`;}const { line, column } = getLineAndColumn(str, location);return `${getCurrentTime()}${message} at line ${line},column ${column}`;} else {return getCurrentTime() + str + ' is not valid JSON';}}} else {return null;}});// 获取当前时间function getCurrentTime() {let now = new Date(); // 获取当前日期和时间let hours = now.getHours(); // 获取小时let minutes: string | number = now.getMinutes(); // 获取分钟let seconds: string | number = now.getSeconds(); // 获取秒let period = hours >= 12 ? '下午' : '上午'; // 判断是上午还是下午// 将小时转换为12小时制hours = hours % 12 || 12;// 格式化分钟和秒,确保它们是两位数minutes = minutes < 10 ? '0' + minutes : minutes;seconds = seconds < 10 ? '0' + seconds : seconds;// 构造最终的时间字符串let currentTime = period + hours + ':' + minutes + ':' + seconds;return '【' + currentTime + '】 ';}//计算错误信息所在行列function getLineAndColumn(str, index) {let line = 1;let column = 1;for (let i = 0; i < index; i++) {if (str[i] === '\n') {line++;column = 1;} else {column++;}}return { line, column };}//json格式美化function prettyFormat(str) {try {// 设置缩进为2个空格str = JSON.stringify(JSON.parse(str), null, 4);str = str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');viewJsonStr.value = str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,function (match) {return match;},);} catch (e) {console.log('异常信息:' + e);}}const center = ref();const isFullScreen = ref(false);// 添加或删除全屏属性function fullScreen() {if (center.value) {if (center.value.className.includes('fullScreen')) {editorHeight.value = JSON.parse(JSON.stringify(props.height));editorWidth.value = JSON.parse(JSON.stringify(props.width));center.value.className = center.value.className.replace(' fullScreen', '');isFullScreen.value = false;} else {editorHeight.value = '100vh';editorWidth.value = '100vw';center.value.className += ' fullScreen';isFullScreen.value = true;}}}const myTextarea: any = ref(null);function handleKeyDown(event) {if (myTextarea.value) {if (event.key === 'Backspace') {handleBackspace(viewJsonStr, event);} else if (event.key === 'Enter') {handleClickEnter(viewJsonStr, event);} else if (event.key === 'Tab') {handleTabKey(event);} else if (event.key === 'Escape') {if (isFullScreen.value) {fullScreen();}}}}// 符号自动补全以及选中文本后输入符号自动包裹function getMouseCheck(event) {setAutoKey(viewJsonStr, event);}onMounted(() => {window.addEventListener('keydown', handleKeyDown);document.addEventListener('keydown', getMouseCheck);calculateNum(props.value);});onBeforeUnmount(() => {window.removeEventListener('keydown', handleKeyDown);document.removeEventListener('keydown', getMouseCheck);});
</script><style scoped lang="less">#editor_body {border: 1px solid #d9d9d9;border-radius: 4px;padding: 5px;box-sizing: border-box;}.tool_slider {padding-left: 5px;padding-right: 5px;display: flex;width: 100%;box-sizing: border-box;justify-content: space-between;align-items: center;height: 25px;border: 1px solid #d9d9d9;border-bottom: 0;}.icon_hover {height: 20px;width: 20px;cursor: pointer;&:hover {color: #5c82ff;}}#leftNum {overflow: hidden;padding: 3px 2px;height: 100%;width: 30px;line-height: 22px;font-size: 13px;color: rgba(0, 0, 0, 0.25);font-weight: bold;resize: none;text-align: center;outline: none;border: 0;background: #f5f7fa;box-sizing: border-box;border-right: 1px solid;font-family: 微软雅黑;}#rightNum {white-space: nowrap;height: 100%;padding: 3px;line-height: 22px;box-sizing: border-box;resize: none;border: 0;font-family: 微软雅黑;&::-webkit-scrollbar {width: 5px;height: 5px;background-color: #efeae6;}&:focus-visible {outline: none;}&:hover {border: 0;}&:focus {border: 0;}}.leftBox {height: 100%;text-align: left;}.edit-container {height: calc(100% - 25px);width: 100%;box-sizing: border-box;border: 1px solid #d9d9d9;display: flex;}.fullScreen {position: fixed;z-index: 9999;left: 0;top: 0;right: 0;bottom: 0;background-color: #f5f7fa;}#console {padding: 12px;box-sizing: border-box;height: calc(20% - 5px);margin-top: 5px;width: 100%;background-color: white;border: 1px solid #d9d9d9;overflow: auto;font-family: 微软雅黑;text-align: left;}
</style>
配置文件
/*index.ts*/
import { nextTick } from 'vue';// 获取文本框的值
export const handleTextareaInput = (viewJsonStr, event) => {const textarea = event.target;const newValue = textarea.value;viewJsonStr.value = newValue;
};// 设置自动补全
export const setAutoKey = (viewJsonStr, event) => {const textarea: any = document.getElementById('rightNum');if (event.key === "'" || event.key === '"') {event.preventDefault(); // 阻止默认行为const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);const newText = `${event.key}` + selectedText + `${event.key}`;const cursorPosition = textarea.selectionStart + 1;textarea.value =textarea.value.substring(0, textarea.selectionStart) +newText +textarea.value.substring(textarea.selectionEnd);textarea.setSelectionRange(cursorPosition, cursorPosition);} else if (event.key === '(') {event.preventDefault(); // 阻止默认行为const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);const newText = '(' + selectedText + ')';const cursorPosition = textarea.selectionStart + 1;textarea.value =textarea.value.substring(0, textarea.selectionStart) +newText +textarea.value.substring(textarea.selectionEnd);textarea.setSelectionRange(cursorPosition, cursorPosition);} else if (event.key === '[') {event.preventDefault(); // 阻止默认行为const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);const newText = '[' + selectedText + ']';const cursorPosition = textarea.selectionStart + 1;textarea.value =textarea.value.substring(0, textarea.selectionStart) +newText +textarea.value.substring(textarea.selectionEnd);textarea.setSelectionRange(cursorPosition, cursorPosition);} else if (event.key === '{') {event.preventDefault(); // 阻止默认行为const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);const newText = '{' + selectedText + '}';const cursorPosition = textarea.selectionStart + 1;textarea.value =textarea.value.substring(0, textarea.selectionStart) +newText +textarea.value.substring(textarea.selectionEnd);textarea.setSelectionRange(cursorPosition, cursorPosition);}viewJsonStr.value = textarea.value;
};
/*------------------------------------------------括号高亮------------------------------------------------------------*/
const findOpeningBracketIndex = (text, startIndex, char) => {const openingBrackets = {']': '[','}': '{',')': '(',};let count = 0;for (let i = startIndex; i >= 0; i--) {if (text.charAt(i) === char) {count++;} else if (text.charAt(i) === openingBrackets[char]) {count--;if (count === 0) {return i;}}}return -1;
};const findClosingBracketIndex = (text, startIndex, char) => {const closingBrackets = {'[': ']','{': '}','(': ')',};let count = 0;for (let i = startIndex; i < text.length; i++) {if (text.charAt(i) === char) {count++;} else if (text.charAt(i) === closingBrackets[char]) {count--;if (count === 0) {return i;}}}return -1;
};
const isBracket = (char) => {return ['[', ']', '{', '}', '(', ')'].includes(char);
};
// 点击括号寻找对应另一半
export const handleClick = (event) => {const textarea: any = document.getElementById('rightNum');const { selectionStart, selectionEnd, value } = textarea;const clickedChar = value.charAt(selectionStart);if (isBracket(clickedChar)) {const openingBracketIndex = findOpeningBracketIndex(value, selectionStart, clickedChar);const closingBracketIndex = findClosingBracketIndex(value, selectionStart, clickedChar);if (openingBracketIndex !== -1) {textarea.setSelectionRange(openingBracketIndex, openingBracketIndex + 1);} else if (closingBracketIndex !== -1) {textarea.setSelectionRange(closingBracketIndex, closingBracketIndex + 1);}}
};
/*键盘事件*/
export function handleClickEnter(viewJsonStr, event) {if (event.key == 'Enter') {const textarea = event.target;const cursorPosition: any = textarea.selectionStart; // 获取光标位置const value = textarea.value;if ((value[cursorPosition - 1] === '{' && value[cursorPosition] == '}') ||(value[cursorPosition - 1] === '[' && value[cursorPosition] == ']')) {textarea.value = value.slice(0, cursorPosition) + '\n' + value.slice(cursorPosition);textarea.setSelectionRange(cursorPosition, cursorPosition);viewJsonStr.value = textarea.value;// 将光标移动到插入的空格后面setTimeout(() => {handleTabKey(syntheticEvent);}, 30);}}
}
// 新建tab按键对象
const syntheticEvent = new KeyboardEvent('keydown', {key: 'Tab',
});
// 按下tab键时的操作
export const handleTabKey = (event) => {const textarea: any = document.getElementById('rightNum');const { selectionStart, selectionEnd } = textarea;const tabSpaces = '    '; // 4 spacesevent.preventDefault();// 在当前光标位置插入4个空格textarea.value =textarea.value.substring(0, selectionStart) +tabSpaces +textarea.value.substring(selectionEnd);// 将光标向右移动4个空格textarea.selectionStart = selectionStart + tabSpaces.length;textarea.selectionEnd = selectionStart + tabSpaces.length;
};// 按下Backspace按键时
export function handleBackspace(viewJsonStr, event) {const textarea = event.target;const cursorPosition = textarea.selectionStart;const textBeforeCursor = viewJsonStr.value.slice(0, cursorPosition);const textAfterCursor = viewJsonStr.value.slice(cursorPosition);if ((textBeforeCursor.endsWith('"') && textAfterCursor.startsWith('"')) ||(textBeforeCursor.endsWith("'") && textAfterCursor.startsWith("'")) ||(textBeforeCursor.endsWith('[') && textAfterCursor.startsWith(']')) ||(textBeforeCursor.endsWith('{') && textAfterCursor.startsWith('}')) ||(textBeforeCursor.endsWith('(') && textAfterCursor.startsWith(')'))) {event.preventDefault(); // 阻止默认的删除行为viewJsonStr.value = textBeforeCursor.slice(0, -1) + textAfterCursor.slice(1);nextTick(() => {textarea.selectionStart = cursorPosition - 1;textarea.selectionEnd = cursorPosition - 1;}).then((r) => {});}
}
调用方式
 <JsonEditor  v-model:value="testStr" />const testStr = ref('123');

总结

这个JSON编辑器不仅能够让你方便地格式化JSON字符串,还能帮你去掉不必要的空格。而且,它的全屏功能让编辑更加顺畅。最酷的是,它还能实时告诉你格式化的进度,如果遇到问题了,控制台会详细告诉你哪里出错了,这样你就能快速找到问题并解决它。编辑器还能精确地计算行号,这对于查找问题也是很有帮助的。而且,它还有自动补全、自动删除和括号匹配这些贴心的功能,让你的编辑工作变得更加轻松。如果你不小心做错了,也不用担心,因为它支持撤销和重做。希望它能帮助到大家,让我们的工作更加愉快!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux使用yum命令安装postgrepsql

1.检查安装源 yum search postgresql 2.安装 yum install postgresql-server 3.启动数据库 service postgresql start 4.查看启动状态 service postgresql status 5.登陆测试 su - postgrep psql \l6.远程连接 6.1修改配置文件 在pg_hba.conf增加host all all 0.0.0…

解决Android AAPT: error: resource android:attr/lStar not found. 问题

错误信息 /xxx/gjc/.gradle/caches/transforms-2/files-2.1/930c42acd29d295ce5bc495c3b84423e/core-1.9.0/res/values/values.xml:104:5-113:25: AAPT: error: resource android:attr/lStar not found. not found 资源位置 场景 原Android studio中的项目都是在git上面拉的老项…

数据结构与算法python版本之线性结构之队列Quene

什么是队列&#xff1f; 队列是一种有次序的数据集合&#xff0c;其特征是&#xff1a;新数据项的添加总发生在一端&#xff08;通常称为“尾rear”端&#xff09;&#xff0c;而现存数据项的移除总发生在另一端&#xff08;通常称为“首front”端&#xff09;&#xff1b;当数…

详解静态网页数据获取以及浏览器数据和网络数据交互流程-Python

目录 前言 一、静态网页数据 二、网址通讯流程 1.DNS查询 2.建立连接 3.发送HTTP请求 4.服务器处理请求 5.服务器响应 6.渲染页面 7.页面交互 三、URL/POST/GET 1.URL 2.GET 形式 3.POST 形式 四.获取静态网页数据 1.requests库 点关注&#xff0c;防走丢&am…

粘接PI膜除了使用PI膜专用UV胶粘接,还可以使用热固化环氧胶来解决!

热固化环氧胶也是粘接聚酰亚胺&#xff08;PI&#xff09;膜的一种常见方法。 热固化环氧胶是一种在加热的条件下固化成坚固状态的胶水&#xff0c;在涂抹或涂覆胶水后&#xff0c;通过加热&#xff0c;胶水中的化学反应被触发&#xff0c;导致其硬化和固化&#xff0c;从而形…

C#语法进阶 Lambda

Lambda lambda:匿名方法 演变过程&#xff1a; 版本一&#xff1a; 首先创建一个委托&#xff1a; 创建委托需要调用的方法 调用 版本二&#xff1a;匿名方法 没有名字的方法&#xff0c;前面加一个delegate 这样写的话 可以访问局部变量 调用结果&#xff1a; 版本…

跑腿配送系统技术探析

概述 跑腿配送系统是一种基于现代科技的服务平台&#xff0c;通过智能化的技术手段&#xff0c;实现用户需求的快速响应和高效配送。本文将探讨该系统的核心技术原理&#xff0c;以及在实际开发中的一些代码示例。 技术原理 1. 用户请求与任务分配 跑腿配送系统的第一步是…

vue保姆级教程----深入了解 Vue Router的工作原理

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

【error C2146: 语法错误: 缺少“;”(在标识符“PVOID64”的前面)】

用VS2013编译报错&#xff1a; 有人说既然是找不到PVOID64加个typedef就行了。经过本人的试验发现&#xff0c;的确是vs的include顺序问题&#xff0c;调整include顺序保证dx目录在IncludePath目录的下面即可解决问题。 在vs中&#xff0c;选择工具->选项->项目和解决方…

DoIP学习笔记系列:(八)车厂一般关于DoIP的相关测试分析

文章目录 1. 前言2. 基本项测试2.1 协议版本默认值2.2 车辆标识请求报文格式2.3 带EID的车辆标识请求报文格式2.4 带VIN的车辆标识请求报文格式2.5 否定响应码0x002.6 否定响应码0x012.7 否定响应码0x022.8 否定响应码0x042.9 路由激活应答码0x002.10 路由激活应答码0x012.11 路…

贝叶斯推断:细谈贝叶斯变分和贝叶斯网络

1. 贝叶斯推断 统计推断这件事大家并不陌生&#xff0c;如果有一些采样数据&#xff0c;我们就可以去建立模型&#xff0c;建立模型之后&#xff0c;我们通过对这个模型的分析会得到一些结论&#xff0c;不管我们得到的结论是什么样的结论&#xff0c;我们都可以称之为是某种推…

ElasticSearch 复合查询 Boolean Query

官网文档网址&#xff1a;Boolean query | Elasticsearch Guide [7.17] | Elastic 目录 复合查询 Boolean Query 利用bool查询实现功能 总结 复合查询 Boolean Query 布尔查询是一个或多个查询子句的组合。子查询的组合方式有&#xff1a; must:必须匹配每个子查询&#xf…

webpack 5 loader

webpack 本身不能识别js&#xff0c;json外的资源&#xff0c;所以我们需要借助其他loader来处理对应的文件 CSS Loader&#xff0c;处理css 安装 npm i css-loader style-loader -D css-loader 负责讲css编译成webpack能识别的模块内容style-loader 动态创建<style&g…

用CHAT写一简单的C语言线程池的示例

问CHAT&#xff1a;编写一个简单的C语言线程池的示例 CHAT回复&#xff1a;在C语言中&#xff0c;实现线程池需要手动创建线程和管理任务队列。以下是一个简单的C语言线程池的示例&#xff1a; c #include <pthread.h> #include <stdio.h> #define NUM_THREADS 5 …

【前沿技术】超级稳定的视频卡通画方案

Git clone项目到本地 git clone gitgithub.com:Artiprocher/DiffSynth-Studio.git 基本原理 使用了stable diffusion稳定扩散模型和controlnet来控制图像生成的轮廓&#xff0c;animatediff控制视频帧与帧之间的连续性&#xff0c;最后使用RIFE技术平滑整个生成后的视频。 …

一、HTML5简介

一、简介 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器来解析。 <!…

GoLang学习之路,对Elasticsearch的使用,一文足以(包括泛型使用思想)(一)

这几天没有更新&#xff0c;其主要的的原因是&#xff0c;在学习对Elasticsearch的使用。Elasticsearch是一个非常强大的数据库索引工具。是一个基于Lucene库的搜索引擎。它提供了一个分布式、支持多租户的全文搜索引擎&#xff0c;具有HTTP Web接口和无模式JSON文档。Elastics…

【模拟电路】模拟集成电路之神-NE555

一、集成电路NE555简介 二、功能框图与引脚说明 三、比较器&#xff08;运放&#xff09; 四、反相门&#xff08;非门&#xff09; 五、或非门 六、双稳态触发器 七、NE555的工作原理 集成电路NE555的芯片手册 C5157696 一、集成电路NE555简介 NE555起源于上个世纪70年代&a…

Eureka服务注册与发现中心

简介 Spring Cloud封装了Netflix 公司开发的Eureka模块来实现服务治理 在传统的RPC远程调用框架中&#xff0c;管理每个服务与服务之间依赖关系比较复杂&#xff0c;管理比较复杂&#xff0c;所以需要使用服务治理&#xff0c;管理服务于服务之间依赖关系&#xff0c;可以实现…

【Math】重要性采样 Importance sample推导【附带Python实现】

【Math】重要性采样 Importance sample推导【附带Python实现】 文章目录 【Math】重要性采样 Importance sample推导【附带Python实现】1. Why need importance sample?2. Derivation of Discrete Distribution3. Derivation of Continuous Distribution3. An Example 笔者在学…