xfy196的博客

一个前端程序员的六年，和我那张该死的乌鸦嘴。

Vue Native生态在2025-2026年迎来重大革新，呈现双轨并行发展：传统基于React Native架构的原版持续维护优化，社区推出兼容Vue3的衍生版本；同时字节跳动推出全新高性能方案Vue Lynx，采用双线程架构和原生渲染，完全兼容Vue3语法，性能对标Flutter。当前Vue原生跨端生态已分化为轻量化兼容和高性能原生两条技术路线，开发者可根据项目需求选择：新项目推荐Vue Lynx，老旧项目可继续使用优化后的Vue Native。未来Vue生态将全面拥抱Vue3，为开发者提供更完善的移动

Deno Deploy正式发布，为JavaScript/TypeScript应用提供极简的边缘部署方案。该平台原生支持ES模块，内置Deno KV分布式数据库，支持Postgres等第三方数据库，并实现一键部署。核心优势包括：多框架自动适配、GitHub集成实现零配置持续部署、基于Fastly边缘网络的无冷启动执行。新推出的Deno Sandbox提供安全隔离的Linux微VM，1秒内启动，具备密钥保护和网络访问控制功能。平台提供每月100万次请求的免费套餐，相比传统部署方案更专注于TypeScript原生

不再用 esbuild 开发 + Rollup 构建的‘双系统切换’，而是启用统一引擎 Rolldown（Rust 编写）——一套内核，全链路提速。这不仅是性能跃升，更是架构范式升级。Rolldown 是为 Vite 打造的下一代打包工具，它融合了 esbuild 的速度优势和 Rollup 的生态兼容性，甚至提供了类似 webpack 的精细代码分割控制。

Vue3开发者必备的WebTracing监控埋点库，提供8大核心维度的全链路监控解决方案。该SDK支持Vue2/Vue3项目，具备轻量级设计(15KB以下)和灵活配置，覆盖性能监控、错误捕获、请求追踪等功能。通过简单的安装和配置即可快速集成，支持数据采样、批量上报等优化策略。文章详细介绍了核心功能实现、生产环境配置建议以及监控数据分析示例，帮助开发者提升应用稳定性和用户体验。特别适合需要精准监控线上问题、量化用户体验的前端团队使用。

摘要：50个被严重低估的JS原生特性 本文精选了50个实用但常被忽视的JavaScript/Web原生特性，这些特性无需依赖第三方库即可解决日常开发中的常见问题。包括： 高效数据处理：Set快速去重、Array.at(-1)便捷访问、Object.entries对象转换 开发便利工具：??空值合并运算符、structuredClone深拷贝、Intl本地化格式化 DOM与网络优化：closest祖先选择、IntersectionObserver懒加载、AbortController请求取消 现代Web AP

VSCode推出更强大的绿色版Insiders，带来多项智能升级：终端支持智能补全和真终端渲染；Git新增可视化Stash管理；Copilot进化为任务执行代理，支持复杂自动化；界面体验更流畅现代。作为抢先体验版本，绿色版可与正式版共存，特别适合追求前沿技术的开发者、插件作者和AI工具用户。下载地址：https://code.visualstudio.com/insiders

Vue原生渲染迎来重大突破！工程师@Shenqingchuan成功将Vue 3与字节跳动的Lynx.js引擎对接，首个Vue-Lynx原型已实现。Lynx作为高性能双线程原生渲染框架，采用原生控件渲染，性能媲美Flutter。此次突破意味着200万Vue开发者有望直接用Vue语法开发原生应用，告别WebView性能瓶颈。相比传统方案，Vue-Lynx在性能、开发体验和调试支持等方面优势明显。虽然仍需完善编译链路和运行时适配，但这一组合展现了巨大潜力，或将成为Vue原生渲染的重要选择。

【代码】如何一键清除文件目录下所有的node_modules。

theme: v-green熟悉React的开发者并不陌生Redux是什么,一个状态管理容器，简单来说就是帮助前端存储交互的数据的容器。笔者今天聊的就是如何手写一个Redux，破除那些把Redux神话的同学么。Tip: 一定要熟悉JavaScript的原理哦了解Redux的运行原理三大原则单一数据流State只读只能使用纯函数来执行修改工作原理从图片中我们可以看到，Redux的工作原理Action Creators通过派发方法dispatch ,然后派发的action会被Red.

先来聊聊Vue3.0的变化Vue3.0相比Vue2.0发生了翻天覆地的变化，从设计理念，到架构模式都发生了变化，笔者列入最核心的变化diff设计变化，将dom渲染做到极致优化静态变量提升，提高无效的dom渲染监听缓存机制，让重复的数据流操作消失组合式的API，然代码的耦合度更低重写object.defineproperty()的数据双向绑定,使用Proxy代理重写划重点，今天我们聊的只是基于Proxy实现的响应式代理默认大家已经明白Proxy的原理是什么，如果大家还不太了解Proxy

简介TailWind.css是什么？(顺风)？他是一个CSS的工具集。Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。繁杂在日常的项目开发阶段，我们最头疼的就是各种情况的兼容和布局自适应问题，每当不同的业务场景和数据场景都会出现不同的布局适应问题，这个时候开发人员大量时间都会忙于调试布局问题，兼容问题，包括每一个页面基础架子的搭建，都会需要重新设计，除非你自己设计一套可以兼容该项目的CSS框架，这

前文react-redux主要提供的功能是将redux和react的组件关联起来。使用提供的connect方法可以使得任意一个react组件获取到全局的store。 实现方法是将store存放于由provider提供的context上，在调用connect时， 就可将组件的props替换， 让其可以访问到定制化的数据或者方法。目标本文尝试使用react-hook来替代react-redux的基本功能。react-redux的特点：全局维护一个store任何组件都可以获得store，最好prop

Kbone原理解析官方介绍Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。Web框架的基本原理首先我们来看下普通Web端框架，以Vue框架为例，一份Vue模板对应一个组件，在代码构建阶段编译成调用Dom接口的JS函数，执行此JS函数就会创建出组件对应的Dom树，从而渲染到浏览器页面上。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cf3NBomO-1610640222649)(https://s3.ax1x.com/2021/01/13/sNoGk

vue3.0的发布的已经有三个月，三个月中作者尝试着vue3.0的完成一些模块的开发。这里分享一下vue3.0为什么有人说不太好用。一、完全抛弃options api的作风，改用composition api的写法了解vue2.0的都知道vue2.0是基于配置参数的风格去开发的，所有的代码都会已配置为入口，如data, method, computed, filter,watch这样的操作都是需要配置入口的，但是vue3.0完全抛弃这样的做法。采用了类似react的hooks的作风，如reactive,

vue中Axios的封装和API接口的管理如图，面对一团糟代码的你~~~真的想说，What FUC~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放

面试题(第一弹)1.vue-router路由权限认证如何做？vue-router做路由权限认证，首先需求来源，根据不同的用户拥有不同的权限，例如:管理员，超级管理员，普通用户，他们登陆成功，所看到的东西是不一样的，所以也引发了不同角色登录成功会出现不同的路由这个话题了。来讲讲具体怎么做吧！！！首先在没有登录之前，可能除了登录页面和注册页面，其他的页面是没有办法进入，的这个时候我们需要使用到vue的路由前置守卫beforeEach了router.beforeEach((to,from,next) =&

border.css该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。具体代码@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.bor

使用for in 去遍历 对象会将prototype上面扩展的方法或者属性也打印出来// 递归写法Object.prototype.clone = function(){ let o = this.constructor === Array ? [] : {}; for(let e in this){ o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; } return o; }

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); var showFPS = (function () { var requestAnimationFrame = window.requestAnimationFrame || .

首先安装babel转换器yarn add @babel/core @babel/preset-env @babel/plugin-proposal-decorators -Dnpm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators -D在你的react根目录下创建.babelrc文件写入{ "presets": [ "@babel/preset-env" ], "plugins"

MVVM是Model-View-View-Model的缩写Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑View: 代表UI组件，他负责将数据模型转化UI展现出来ViewModel: 监听模型数据的改变和控制视图行为。处理用户交互，简单理解是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model之间没有直接的联系，而是通过ViewModel进行交互 ，Model和ViewModel之间的交互是双向的，因此View数据的变化

关于如何计算remrem是指根元素(root element html) 的字体大小 ，根元素默认的字体大小为16px。rem是通过根元素进行适配的，网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小；所以默认我们认为1rem=16px； 2rem=32px。如果为了方便计算我们一般设置1rem=100px，我们需要设置字体大小为100px所以我们一般在js中做判断；：<script> (function(){ let a = d

Webpack性能优化在使用webpack打包的时候，当我们的项目工程越来越大的时候就会出现打包的时间越来越长，这个时候需要对打包资源进行一系列的优化。减少Webpack打包时间优化Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。首先我们可以优化 Loader 的文件搜索范围module.exports

图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：减少像素

解决办法参考https://segmentfault.com/a/1190000010984731?utm_source=tag-newestnpm uninstall node-sassnpm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

自定义视频播放组件css部分 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 80%; margin: 0 auto; } .videoBox { width: 8...

浏览器端存储技术CookieCookie 是指存储在用户本地终端上的数据，同时它是与具体的 Web 页面或者站点相关的。Cookie 数据会自动在 Web 浏览器和 Web 服务器之间传输，也就是说 HTTP 请求发送时，会把保存在该请求域名下的所有 Cookie 值发送给 Web 服务器，因此服务器端脚本是可以读、写存储在客户端的 Cookie 的操作。LocalStorage在 HTM...

作为 Web 开发人员，开发和调试 REST API 是家常便饭。我们会用一些工具来模拟 HTTP 请求，最常用的可能就是 Postman 了。前不久还冒出一个女版 Postman，那就是 Postwoman，详情可见我之前写的一篇介绍：还在用 Postman 测试接口？是时候试试 Postwoman 了！这些工具确实很实用，但也存在一些局限性。通过模拟 HTTP 请求来测试 REST API...

什么是楼梯特效？如果各大网站点击按钮本页面跳转对应的板块的功能就是楼梯效果思路大家可以看到左侧的按钮和右侧的内容板块是一一对应的，所以我们需要知道右侧每个板块在当前页面的位置在可以通过左侧的楼梯去控制右侧的板块内容的跳转。试想，右侧每一个板块都会距离页面顶端距离，只需要点击左侧按钮让对应位置的楼梯跳转到对应板块的高度位置即可。接下来具体代码实现.js核心代码 // 梯子对象 ...

1、DOCTYPE有什么作用？标准莫诗雨混杂模式如何区分？它们有何意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2、HTML5为什么只需要写 <!DICTYPE HTM...

jQuery zTreezTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本教程是为了配合项目实战 的简易教程，主要实现了 异步加载 树形结构数据的功能，具体用法请参考官方文档官方文档页面引用css部分 <link rel="stylesheet" href="/static/assets/plu...

jQuery treeTabletreeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单优点：兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以组件性能高：内部实现了只绑定了 tabl...

jQuery DatatablesDataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。中文网站：http://www.datatables.club/实例索引：http://www.datatables.club/example/参考手册：http://www.datatables.club/manual/帮助文档：h...

页面引用CSS部分<!-- iCheck for checkboxes and radio inputs --><link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">JS部分<!-- iCheck 1.0.1 --><script src="/static/as...

页面引用<!-- jQuery Validation 1.14.0 --><script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script><script src="/static/assets/plugins/jquery-validation...

Gulp是一个前端自动化构建工具，基于流的的构建系统，主要优点是速度，效率和简化Gulp可以干什么？开发服务器，Sass,Less或Stylus文件的预处理器，处理JavaScript的自动化脚本，代码优化工具，压缩，编译或移动文件Gulp的官网 https://www.gulpjs.com.cn/gulp类似的工具 : grunt webpackgulp是基于nodejs的， g...

为什么使用深浅拷贝在JS中我们经常会遇到一个数据赋值，但是又不符合真正意义上的数据赋值的问题。这个问题产生的原因又是什么呢？这就先要了解一下JS的数据类型了，在JS中数据类型分为基本数据类型和引用数据类型两大派系。众所周知基本数据类型存储的位置就是栈中，以key=>value的形式去存储的，每一个value都对应一个key，但是在引用数据类型中他的存储结构并不是栈而是堆，在堆中堪比一个空间...

PromisePromise是什么？主要用异步计算可以异步操作队列化，按照期望的顺序执行，返回符合的数据可以再对象之间传递和操作promise，帮我们处理队列为什么会有Promise呢？为了避免任务冻结同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动...

不明白为什么是烟花优化版本的先参考作者的烟花基础版本烟花优化版本主要实在优化爆炸的范围和运动上做了优化，爆炸范围我们采用已圆的爆炸方式，以鼠标点击的位置为圆形爆炸的烟花效果<!DOCTYPE html><!-- * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03-18 19:15:15...