如果你想弄明白什么怎样才可以实现JavaScript的原型链污染，那么你首先需要弄清楚两个东西，那就是__proto__和prototype。到底什么才是__proto__和prototype?那我们先来看看比较官方的说法吧： ...继续阅读 (15)

本文为一些react使用小技巧（上）、一些react使用小技巧（中）、一些react使用小技巧（下）的合集。一. 组件相关1. 使用自闭合组件// 不好的写法// 推荐写法2. 推荐使用Fragment组件而不是 DOM 元素来分组元素在 React 中，每个组件必须返回单个元素。不要将多个元素包装在或中，而是使用来保持 DOM 整洁。不好的写法：使用 div 会使 DOM 变得杂乱，并且可能需要更多 CSS 代码。import Header from "./header"; import Content from "./content"; import Footer from "./footer"; const Test = () => { return (); };推荐写法:包装元素而不影响 DOM 结构。import Header from "./header"; import Content from "./content"; import Footer from "./footer"; const Test = () => { return ( // 如果元素不需要添加属性，则可以使用简写形式< />); };3. 使用 React fragment 简写< />（除非你需要设置一个 key 属性）不好写法：下面的代码有点冗余。const Test = ...继续阅读 (59)

背景在开发一个需求时，需要对原来的 form 表单组件代码复用并进行拓展。场景A 使用原来的 form 表单组件。场景B 在原来的表单组件基础上，新增一些表单项，新增表单项位置动态插入在原来的表单组件中，位置随意。需求复用表单组件，同时支持新增表单项。解决方案在 React 中，组件扩展和定制的能力，可以通过props.children和render props来实现。以上两种方式的缺点是：如果插入位置比较分散，需要定义children对象或多个 props，代码繁琐，不易维护。调研下来，目前貌似没其他好的方法...欢迎补充props.childrenprops.children 直接将内容作为一个HTML内嵌结构编写，将组件参数与内嵌结构分开写。children 可以是一个字符串， 数组，对象等类型。可以使用React.Children的方法来判断props.children 类型并处理。function Father() { return (我是父组件Father我是子组件Form1的children{{ title: (我是子组件Form2的title), content: (我是子组件Form2的content) }}) } function Form1 ...继续阅读 (30)

八. 测试 react 代码54. 使用 React 测试库有效地测试你的 React 组件想要测试你的 React 应用吗？请务必使用@testing-library/react。你可以在此处找到一个最基本的示例。55. React 测试库：使用测试演练场轻松创建测试用例难以决定在测试中使用哪些测试用例？考虑使用测试演练场从组件的 HTML 快速生成测试用例。以下是两种使用方法：方法 1：在测试中使用screen.logTestingPlaygroundURL()。此函数生成一个 URL，打开测试环境工具，其中已加载组件的 HTML。方法 2：安装Testing Playground Chrome 扩展程序。此扩展程序允许你直接在浏览器中将鼠标悬停在应用中的元素上，以找到测试它们的最佳查询。56. 使用 Cypress 或 Playwright 进行端到端测试需要进行端到端测试吗？请务必查看Cypress或Playwright。57. 使用 MSW 在测试中模拟网络请求有时，你的测试需要发出网络请求。与其实现自己的模拟（或者，但愿不会发出实际的网络请求），不如考虑使用MSW（Mock Service Worker）来处理你的 API 响应。MSW 允许你直接在测试中拦截和操纵网络交互，为模拟服务器响应提供了一种强大而直接的解决方案，而不会影响实时服务器。这种方法有助于维护受控且可 ...继续阅读 (30)

一、引言七月的时候，我写了一篇文章《AI 编程助手测评：GitHub Copilot vs 豆包 MarsCode》，推荐了后者。豆包 MarsCode 团队最近就邀请我，试用他们的新功能"代码练习"，它专门用来准备面试和刷题。试用以后，我有很多想法。我觉得，AI 会改变程序员的面试，以后是AI 刷题的后面试时代。二、面试的 LeetCode 刷题现在的程序员面试，一般都有算法解题。为了准备面试，大家都会去刷算法题，最常见的就是使用 LeetCode 题库。LeetCode 是世界最流行的算法题库。它源自美国，专门收集各种面试算法题，目前已经超过了3000道，不少是互联网大厂的真题。很多同学坚持不懈，每天投入几个小时，做里面的题目，训练自己的算法能力。一般来说，至少要刷200题，面试才较有把握。（图片说明：上图是某个老外的刷题统计面板，他一年365天，每天都在刷题，一共刷了1500题。）三、AI 颠覆 LeetCode生成式 AI 出现后，越来越多的人发现，有了 AI，人肉刷题似乎不那么必要了。今年（2024）8月份，一位美国网友在 Reddit 论坛发了这样一个帖子。他说，自己写了一个脚本，让 AI 自动求解 LeetCode 算法题，一天之内做了633道题目，正确率达到了86%，成本只要9美元。这个帖子引起了巨大反响。既然 AI 可以提示正确答案，为什么不参考 AI 来准备面试 ...继续阅读 (22)

年初接到一个任务将 semi-ui 替换到 antd，但是能人力预算不太够，所以基于工作量和效率选择了基于 AST 的替换方案。项目技术栈是 React + tsx为什么要使用 AST？AST（Abstract Syntax Tree，抽象语法树）是一种在计算机科学中表示源代码语法结构的树状数据结构。通过 AST，可以理解代码的结构和含义，实现代码分析、转换和操作。基于 AST 的替换方案可以快速而准确的对大量代码进行修改，提高开发效率和代码质量。还有什么方案？固定字符串替换。对于 import 和 tsx 都有严重的误伤。正则替换，编写复杂，嵌套难以识别。手动替换，重复性工作容易失误，耗费工时太多，适合小工作量的情况。方案比对方案工作量误伤import组件替换组件属性替换固定字符串替换✅😭😭😒😒正则😒😭😒😒😒手动😭✅✅✅✅AST✅✅✅✅✅Babel 简介Babel 是前端领域的必备工具，是一种源码到源码的转译器。在项目中可以让我们使用一些新的语法(展开运算符) 和 api（@babel/core），会在编译的过程中将 code 转为目标环境所支持的语法并引入 polyfillBabel 实际应用场景将()=>{}转为function(){}为Array.isArray添加 polyfill除了上面提到的编译转译代码之外，babel 也可以用来做静态分析，分析代码提取信息，然后生成 ...继续阅读 (46)

本文通过一个完整的网页设计案例，详细讲解了如何使用JavaScript实现现代网页的动态交互和布局设计。内容涵盖了导航栏固定、表单验证、AJAX异步数据请求、动态内容更新、动画效果以及响应式设计等核心功能的实现。结合HTML5、CSS3与JavaScript，通过代码示例展示如何构建一个功能丰富且用户体验流畅的个人博客页面，并对响应式设计和性能优化进行了扩展讨论。 ...继续阅读 (24)

前言最近同事在接入西班牙语的数据时, 发现了一个问题, 涉及到西班牙语中包含重音富符号的数据比对出了问题, 同事已经找出可能是字符串规范话(Normalize)的问题, 但是现象很奇怪, 今天就做了一些测试, 将测试结果记录下来. 以供大家参考.常用规范化:NFC: 规范化组合型, 如é是一个字符NFD: 规范化分解型, 如é是两个字符e和´NFKC: 兼容性规范化组合型NFKD: 兼容性规范化分解型先说结论在 HTML/JavasCript/Java/PostGreSQL 中, 不会自动对字符串的规范话进行转换, 也就是说, 从前端(html/js)传递到后端(java), 再传递到数据库(PostGreSQL)的过程中, 字符串的规范化是不变的, 所以只是文字传递, 不会出现问题.出问题的地方是文件系统:Windows 文件系统（如 NTFS）通常使用NFC形式存储文件名。macOS 文件系统（如 HFS+ 或 APFS）通常使用NFD形式存储文件名。Linux 文件系统（如 ext4）通常使用NFC，但这也可能因环境和设置而异。导致上传文件时, 文件名的规范化不一致, 会导致文件名比对是不一致的.问题现象同名的文件名上传时, 会进入数据库比对一下文件名是否存在, 但是由于文件名的规范化不一致, 会导致文件名比对不一致. 从而重复上传文 ...继续阅读 (29)

娃学琴，节奏感糊成一坨了。老师让抖腿打节拍，显然不work。码农特有的穷B气质让我舍不得买个实体的；去找个节拍器app，结果各大市场都是各种广告，怕给娃用不正经；甚至找了很多公众号版的，小程序版的，网页版的，普遍都是各种跳转诱导点击。失望之余，想起来上次JS播放DTMF对 WebAudio 有点感觉，要不这次自己干脆再手搓一个。调研了一圈发现这玩意没那么容易，主要就是javascript在浏览器里setInterval是有时间抖动（jitter）的，不能保证节奏精确。如何才能做到精准采样打节拍呢？连续精心编排 WebAudio 时间轴！搜了一圈发现一位叫Grant James 已经写好放在github了。那还等什么直接拿来～～针对性的改进了：无广告去掉 .js .css 依赖，单文件更快精简不必要的代码结构，方便以后魔改改完之后发现 ~~两个~~ 三个坑也跟着一起修补了：用wakeLock防止手机上使用息屏突破固定的4拍子，加上可以增减的节拍控制增减按钮可以按到小于 0最后成果就放在https://lab.est.im/metronome/这里了。有需要的拿去用。协议CC BY-NC 4.0 ...继续阅读 (27)

文章概要:为什么我们需要在 React 中访问 DOM?refs 如何帮助我们实现访问 DOM?什么是 useRef、forwardRef 和 useImperativeHandle 钩子?如何正确使用它们?React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。让我们来看看为什么我们首先想要访问 DOM，ref 如何帮助我们做到这一点，什么是 useRef、forwardRef 和 useImperativeHandle，以及如何正确使用它们。此外，让我们研究如何避免使用 forwardRef 和 useImperativeHandle，同时仍然保留它们给我们提供的功能。如果你曾经尝试弄清楚它们是如何工作的，你就会明白我们为什么想要这样做,另外，我们将学习如何在 React 中实现命令式 API！使用 useRef 在 React 中访问 DOM假如我想实现一个注册表单，这个注册表单包含用户名和邮箱号，用户名和邮箱号应该是必填项，当用户没有填写这些信息时，我不想只是简单的给 ...继续阅读 (47)

我又去旅行了☀️考虑目的地时，看到鹿儿岛挺好奇的，上海往返直飞航班也很方便，翻翻别人的游记和美图，就决定是它！还没见过活火山呢，满足一下我的好奇心。这次旅行我玩得非常开心，欣赏了许多美景，也晒黑一个度。（鹿儿岛没有鹿）视频版⬇️ 4K 50FPS[This iframe content needs to be loaded by JavaScript.]行程日期行程2024.07.23上海10:50 AM =>鹿儿岛12:50 PM 🌥️ 28° ～ 31°2024.07.24鹿儿岛市-樱岛、仙岩园 🌥️ 28° ～ 31°2024.07.25指宿市 🌥️🌦️🌥️ 28° ～ 31°2024.07.26雾岛市 🌥️🌦️🌥️ 26° ～ 31°2024.07.27鹿儿岛13:50 PM =>上海14:50 PM 🌥️ 27° ～ 33°花费最近汇率挺划算的～我出发前购买的 50000 円现金花费 2333 元人民币。出发前事项备注整理行李我用的 To-do List境外旅行保险微保入境日本信息填写&申报VJW 网站SIM 卡Airalo确认酒店位置Apple Maps / Google Maps日元现金浦发银行购汇取现规划一下交通去浦东机场的出发时间/出行方式，到达鹿儿岛机场后的交通方式日程Day 1 出发10:50 的飞机，预留 2 个小时值机出关，预计 8:50 到达机场，坐地铁 ...继续阅读 (20)

写在前面工作多年了，几乎没有怎么放下心、放下工作去旅游。本来计划 12 月初就出发，想到生日临近了，给自己一些仪式感，让“过生日”变的有趣些，所以往后移了行程。日本关西地区距离上海不是很远，但是第一次出国，挺兴奋的，提前做一些功课避免落地就懵。buff：本文为我个人经验和感受，不具有普适性，请勿抬杠 😅，爱与和平。现在日元人民币汇率约 20:1，相较几个月前更不划算了一些。做攻略的时候有很多陌生的名词，我列在此处方便理解：名词意义VJW^Visit Japan Web入境信息申报JRJapan Railways，日本铁路公司之一近铁^近畿日本铁道，日本铁路公司之一^HARUKA关西机场特快专线，车身有 Hello Kitty 图案，很容易辨认^Klook类似携程、飞猪一样的旅行 App，香港地区出品Suica、西瓜卡日本交通卡ICOCA日本交通卡円圆，日元单位駅意义同中文的火车站的“站”，在巴士、轨道列车站点可以看到以及需要了解的一些事项日本的车辆方向盘在驾驶室右座，所以是左侧停靠，也就是说人和车都是走左边，楼梯也是走左侧，但是大阪有些地方（比如车站的楼梯）是右上左下公交车有后门上车的也有前门上车，山下车时如果门口有投币箱的话都需要刷一次卡（只扣一次钱）。如果没有卡也没有刚好的零钱时需要投入超额的公交费用（和国内一样，没有 1 块就投 5 块 10 块）街上没有垃圾桶，如果有遇到自 ...继续阅读 (32)

封面来自 Mark EderDEMO下方是 Demo 展示区域，点击即可输入框触发下拉菜单。User IDPasswordCheckboxDate过程步骤 1. 点击输入框时显示下拉菜单我最初的想法是给每个输入元素添加一个点击事件监听器，但后来我意识到，当文档加载完成时，并不意味着页面不会随着内容的更新而添加新的输入元素。因此，为了解决这个问题，我们可以给 body 添加一个点击事件监听器。当 Input 发出的点击事件冒泡时，我们就可以做我们需要做的事情——显示下拉菜单。（伪）代码如下：123456789101112constshowSelect= () =>{// create a dropdown element and append to document// ...}document.addEventListener("click",(e) =>{consttarget = e.target;if(target.tagName==="INPUT"&& ["text","password"].includes(target.type)) {showSelect();}});步骤 2. 将下拉菜单附加到当前输入元素的底部我们可以使用“getBoundingClientRect()”来获取当前输入元素的偏移位置（相对于 ...继续阅读 (19)

最新发布的惠普沃尔夫（HP Wolf ）安全威胁洞察报告显示，现阶段已在野外出现了使用生成式人工智能（GenAI）生成的恶意软件有效载荷，标志着网络威胁形势发生了重大变化，攻击者已利用先进的人工智能工具创建了更复杂、更具规避性的恶意软件。惠普威胁研究团队发现了一个使用 VBScript 和 JavaScript 传播 AsyncRAT 的恶意软件活动，脚本中的结构、注释和命名规 ...继续阅读 (32)

以下是个人收集总结的一些使用 react 的小技巧第二篇。五. 高效的状态管理27. 永远不要为可以从其他 state 或 props 派生的值创建新的 statestate 越多 = 麻烦越多。每个 state 都可能触发重新渲染，并使重置 state 变得麻烦。因此，如果可以从 state 或 props 中派生出值，则跳过添加新的 state。不好的做法：filteredUsers 不需要处于 state 中。const FilterUserComponent = ({ users }) => { const [filters, setFilters] = useState([]); // 创建了新的state const [filteredUsers, setFilteredUsers] = useState([]); const filterUsersMethod = (filters, users) => { // 过滤逻辑方法 }; useEffect(() => { setFilteredUsers(filterUsersMethod(filters, users)); }, [users, filters]); return ({filteredUsers.length > 0 &&}); };推荐做法: fi ...继续阅读 (74)

这个参数对象是要传给后端的，但是后端要求我传参数时，不要传 emall 字段，请问如何处理比较好？后端说的不要 emial 字段并不是说让 emial 传空，而是这个参数对象里压根不要带 emial 这个字段。 ...继续阅读 (18)

前言在前司，出于前端工程师的紧缺，为了加快需求的推进，往往我自己也会承担一小部分在管理后台的前端开发工作。阿里“毕业”的后端工程师，应该都多多少少接触过类似ice这样的框架，并在无数个被前端拒绝的后台类需求里挣扎在前端代码里面。而平常的 side project 一般也都是自己来动手写前端。这里总结一下最近一年来写前端的一些乱七八糟的东西。工具TypeScriptTypeScript可以说是让前端开发更能让人接受了，或者说是重新创造了一遍 JavaScript。 Structural type system，支持泛型、类型检查等无疑给工程实践和维护上带来了巨大的益处。而且 TypeScript 的入门成本可以说非低，即使你只有一点点 JavaScript 基础也很容易上手。ReactLibrary 方面则使用选择了React。React 的学习成本真的非常低，除了 JSX，其它都是原生的 ES 的概念。而 VUE 谈不上难，却也是引入一些有别于 ES 的新概念。比如渲染列表，React 中只需要纯粹的 ES 方法 map，而 VUE 则需要理解 v-for 的新概念。当你使用 map 的时候它非常符合直觉，比如很多其他的编程语言都支持类似的操作，而当你看到 v-for 的时候并不符合直觉, 甚至你会想为什么不是 a-for/vfor 偏偏是 v-for 呢？并且 React 对于我 ...继续阅读 (9)

学习一门编程语言可能很棘手，尤其是对于编程新手来说。不过，了解最流行的语言可能有助于某些人做出关键决定。这一选择可能会决定是找到工作还是被淘汰。学习编程一直是在科技领域立足的热门途径之一。网络开发、数据科学，尤其是人工智能推动了人们对软件工程领域的兴趣。然而，尽管编程语言多达数百种，但有几种语言却深受业界青睐。学习一门编程语言可能很棘手，尤其是对于编程新手来说。不过，了解最流行的语言可能有助于某些人做出关键决定。这一选择可能会决定是找到工作还是被淘汰。学习编程一直是在科技领域立足的热门途径之一。网络开发、数据 科学，尤其是人工智能推动了人们对 软件工程领域的兴趣。然而，尽管编程语言多达数百种，但有几种语言却深受业界青睐。ZDNet 高级编辑 David Gewirtz 尝试汇总来自九个来源的数据，以确定哪些编程语言最受欢迎，从而最有可能引起新手的兴趣。他的文章值得一读，以下是他的方法概述。格维茨借鉴了政治分析的方法，汇总了各种排名的调查数据。只使用一两个来源的数据可能会产生偏差，因此他希望做到公平。例如，只使用面向电气工程师的组织 IEEE 的数据，就会使结果偏向于有利于该专业的语言。设计流行编程语言列表的另一个问题是确定什么是流行语言。Gewirtz 概述了几个因素，如Google趋势上的列表、有关该语言的书籍数量以及该语言的招聘列表数量。尤其是后者，对于学习编程的人（甚至是想转 ...继续阅读 (15)

[social4i size="small" align="align-left"][This article was first published onRtask, and kindly contributed toR-bloggers]. (You can report issue about the content on this pagehere)Want to share your content on R-bloggers?click hereif you have a blog, orhereif you don't.You can read the original post in its original format onRtaskwebsite by ThinkR here:Boost your shiny app with sparkling data visualizations: a deep dive into Chart.js JavaScript libraryLet’s continue our exploration of integrating JavaScript code into a {shiny} application! We will show how to move beyond the classic graphs pro ...继续阅读 (22)

项目介绍 一个用于检测源代码相似度的工具，支持 Java、C/C++、Python、JavaScript 等多种编程语言，适用于识别编程作业中的抄袭行为等场景。 项目截图 支持的语言 ...继续阅读 (44)

本文翻译自Read Phone Contacts with JavaScript，作者：Alvaro Montoro， 略有删改。作者注：本文中描述的技术和流程是实验性的，只能在少数浏览器中工作。在撰写本文时，联系人选择器API仅支持 Android Chrome（从版本80开始）和iOS Safari（从版本14.5开始）。如果要检查是否可使用这个功能，可以访问这个演示网站alvaromontoro.com/demos/contacts/体验。在以前使用JavaScript从手机访问联系人数据是不可想象的。现在有了联系人选择器API，我们可以使用JavaScript来实现这个功能。此功能在需要联系人信息（如电话号码或VoIP）的应用程序，通过这个功能我们可以在社交平台中发现通讯录中的好友(前提需要社交平台有对应的手机号码字段)，或者需要填写联系人表单信息时则无需切换应用程序即可获取到相应的数据。API和设备将限制可用的属性。开发者可以选择以下五个标准属性：姓名电话电子邮件地址图标以上返回的都是数组形式，因为联系人可以有多个电话、电子邮件或多个地址。为了保持一致性，即使它是单个值，返回的数据始终是一个数组。隐私和安全存储在手机上的联系人信息可能包含敏感信息，我们必须小心处理。我们需要必须考虑到隐私和安全问题：联系人选择器API代码必须在顶级浏览上下文中运行。它防止外部代码，如广告或 ...继续阅读 (48)

以下是个人收集总结的一些使用 react 的小技巧。一. 组件相关1. 使用自闭合组件// 不好的写法// 推荐写法2. 推荐使用Fragment组件而不是 DOM 元素来分组元素在 React 中，每个组件必须返回单个元素。不要将多个元素包装在或中，而是使用来保持 DOM 整洁。不好的写法：使用 div 会使 DOM 变得杂乱，并且可能需要更多 CSS 代码。import Header from "./header"; import Content from "./content"; import Footer from "./footer"; const Test = () => { return (); };推荐写法:包装元素而不影响 DOM 结构。import Header from "./header"; import Content from "./content"; import Footer from "./footer"; const Test = () => { return ( // 如果元素不需要添加属性，则可以使用简写形式< />); };3. 使用 React fragment 简写< />（除非你需要设置一个 key 属性）不好写法：下面的代码有点冗余。const Test = () => { return (); };推荐写法 ...继续阅读 (43)

CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这是JavaScript中那些在现实世界中极其强大的酷炫技巧之一。强大的实际应用场景动作(A)等待另一个动作(B)A正在进行，但用户想做B，而A需要先发生。例如：社交应用，用户可以创建、保存和发布帖子。就像Medium。Save status:Not savedPublish status:Not publishedSavePublish如果用户想在帖子保存时发布怎么办？解决方案：确保在发布之前帖子已保存。saveButton.onclick = () => { save(); }; publishButton.onclick = async () => { await publish(); }; let saveResolve; let hasSaved = false; async function save() { hasSaved = false; saveStatus.textContent = 'Saving...'; // ✅ Resolve promise from outside await makeSaveRequest(); saveResolve(); hasSaved = true; saveStatus.textContent = 'Saved' ...继续阅读 (45)

What is a LUT?A LUT (Look-Up-Table) is simply a table of fixed numerical values that can be applied to video to alter its look. It can change an image’s contrast or color or both. 1D LUTs are the simplest, each input value mapping to a single output value, while 3D LUTs are more sophisticated and can apply to a co-ordinate set of colors.https://pro.sony/ue_US/technology/professional-video-lut-look-up-table#TEME170401LutsFromSony-professional-video-lut-look-up-tableBenefits of LUTsA LUT or Look-Up Table makes it easy to apply a wide variety of different looks to your video content. It’s often u ...继续阅读 (26)

官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到的柱状图也打包进去。目录结构： Index.ts 如下： [crayon-66c597027c5cc980800259/] Core.ts 如下： [crayon-66c597027c5d3457334249/] BarChart.ts 如下： [crayon-66c597027c5d6603294916/] LineChart.ts 如下: [crayon-66c597027c5d8512849997/] RadarChart.ts 如下: [crayon-66c597027c5da152632955/] 如果项目中还用到其他图表类型，则按照具体需要引入即可。可以根据具体业务进行调用封装，下面是封装的示例 util.ts: [crayon-66c597027c5dc929012790/] 具体调用： [crayon-66c597027c5df604569588/] ...继续阅读 (57)

Live-PhotoA simple live-photo component.Github:https://github.com/LynanBreeze/live-photoPreviewMy Style[This iframe content needs to be loaded by JavaScript.]html代码1Apple Style[This iframe content needs to be loaded by JavaScript.]html代码1OptionsKeyTypephotoSrcstring, requiredvideoSrcstring, requiredloopnullmutednulluseApplenullRun1pnpm install && pnpm run devBuild1pnpm build【还没写完】 ...继续阅读 (26)

以前也尝试过学WASM，但由于当时没有应用场景所以安装完环境就弃坑了，这次来好好学习一下用法。这篇笔记是边学边写的，如果有错误或者需要补充的地方请留言。WASM通常需要使用其他高级语言编写后编译为wasm二进制文件交给运行时去运行，但如果你的头够铁，也可以尝试手写wasm指令，或者通过wasm的文本格式理解它的底层运行原理。本笔记在Windows平台上使用C++编写源码编译为wasm，所以需要安装emscripten工具包。除了C++以外，Rust也是一个推荐选项，而其它语言目前还没有非常完备的支持。安装Emscripten这是用于把C/C++编译到wasm的工具包。Emscripten的项目地址在：https://github.com/emscripten-core/emscripten文档地址在：https://emscripten.org/index.html安装方式官方手册在：https://emscripten.org/docs/getting_started/downloads.html，这里我简单介绍一下，但还以官方手册为准，我不会同步更新。首先把emscripten仓库克隆到任意位置，然后进入该目录git clone --depth 1 https://github.com/emscripten-core/emsdk.git cd emsdk然后依次执行以下命令进 ...继续阅读 (35)

所谓的双面图指的是一张图片有 A / B 两面，某些场景下只能看到 A 面， 某些场景下又只能看到 B 面，虽然是一张图片，但是不同的场景下你会看到完全不同的图片内容。 ...继续阅读 (26)

前言这是一个每天更新一题的文章，欢迎评论区网友提供题目和答案，不断更新中，记录下来，方便学习，参考答案如有问题，敬请批评指正，废话不多说，开始进入正文。第一题题目判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。 该如何判定？参考解答参考解答:要判断一个对象是否为空，并且考虑到对象自身及其原型链上是否有自定义数据或方法，您可以使用以下的 JavaScript 函数来实现：function isObjectEmpty(obj) { // 首先获取对象自身的属性 const ownProperties = Object.getOwnPropertyNames(obj); // 遍历自身属性 for (const property of ownProperties) { const descriptor = Object.getOwnPropertyDescriptor(obj, property); // 如果属性是数据属性并且有值，或者是方法（可调用函数），则对象不为空 if ( (descriptor.value && descriptor.value !== null && descriptor.value !== undefined) || typeof descriptor.value === "f ...继续阅读 (55)

引言大家好！我们非常高兴地跟大家宣布，今天正式发布我们的新产品——OpenTiny HUICharts。这是一款前端 Web 可视化图表库，其基础图表功能构建于 ECharts 之上，而高阶图表则采用了新的底层技术，以满足更广泛的数据可视化需求。OpenTiny HUICharts集成了自适应、性能提升、数据状态管理、无障碍能力、刻度优化、刻度均分等特性。这些特性帮助我们解决了许多内部业务场景中的问题。我们追求的目标是让图表的使用变得更加简单、直观且易于上手。为什么要做 OpenTiny HUIChartsOpenTiny HUICharts的诞生源于我们的内部业务需求。在处理数据可视化时，我们常常遇到两个主要问题：工具过于复杂和定制性不足。许多现有的图表工具虽然功能强大，但使用起来相对繁琐，需要频繁查询 API 文档。在处理大量复杂数据时，我们发现市场上现有的解决方案无法完全满足我们对数据可视化工具的要求。此外，我们还意识到公司内许多部门使用的图表工具缺乏统一的规范和主题样式，这造成了视觉上的不一致。综合上面的问题，我们自主研发了OpenTiny HUICharts。目前支持原生使用，也支持 Vue 框架封装组件，参考OpenTiny Vue 组件库。 我们支持基础图表如线形图、柱状图、圆盘图、雷达图等，这些图基于 Echarts 图表库，但我们简化了相关 API 的使用，使其更 ...继续阅读 (44)