前言 jquery时代更新视图是直接对DOM进行操作，缺点是频繁操作真实DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了。那么有没有一种方法是不需要去遍历新旧DOM树就可以知道哪些DOM需要更新呢？ 答案是：在编译时我们就能够知道哪些节点是静态的，哪些是动态的。在更新视图时只需要对这些动态的节点进行靶向更新，就可以省去对比新旧虚拟DOM带来的开销。vue3也是这样做的，甚至都可以抛弃虚拟DOM。但是考虑到渲染函数的灵活性和...
引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。 但是，这个方案有个很不好的地方就是：如果列表页足够复杂，有下拉刷新、下拉加载、有弹窗、有轮播等，在清除缓存时，就需要重置很多数据和状态，而且还可能要手动去销毁和重新加载某些组件，这样做既增加了复杂度，也容易出bug。 接下来说说我的想到的新实现方案（代码基于Vue3）。 keep-aliv...
本文的目的，是为了让已经有Vue2开发经验的 人 ，快速掌握Vue3的写法。 因此， 本篇假定你已经掌握Vue的核心内容 ，只为你介绍编写Vue3代码，需要了解的内容。 一、Vue3里 script 的三种写法 首先，Vue3新增了一个叫做组合式api的东西，英文名叫CompositionAPI。因此Vue3的 script 现在支持三种写法， 1、最基本的Vue2写法 <template> <div>{{ count }}</div>&...
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、背景 在前端JSON.stringfy是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化 constperson={name:'kalory',age:18} JSON.stringfy(person) //结果 '{"name":"kalory","age":18}' 将一个数组序列化 constarr=[1,2,3,4,5] //结果 '[1,2,3,4,5]' constpersons=[{name:'kalory',age:18},{name:'jack',age:48}] //结果 '[{"n...
UIOTOS可以了解下，uiotos.net，通过连线来代替脚本逻辑开发，复杂的交互界面，通过页面嵌套轻松解决，是个很新颖的思路，前端零代码！ 蓝图连线尤其是独创的页面嵌套和属性继承技术，好家伙相当于把vue的组件化、增量式面向对象开发，直接搬到前端拖拽工具上，无代码编程了。 总的来说，这上面的理念，看到是用连线代替脚本开发，复杂连线和界面，通过页面嵌套可以轻松解决。 官网给的介绍： 一款拥有独创技术的前端零代码工具，专注于解决前端界面开发定制难题，原型即应用！ 具有页面嵌套、属性继承、节点连线等全新特性，学习门槛低，功能极为灵活。 用户无需懂任何前端开发技术，简单了解使用规...
最近，群里在讨论一个很有意思的线条动画效果，效果大致如下： 简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用JavaScript/Canvas的基础上，使用纯CSS/SVG的方式，我们可以如何大致的还原上述的线条动画效果。 基于SVG的线条动画效果 谈到线条动画，尤其是不规则路径或者是复杂路径，我们第一时间应该想到的就是SVG中的stroke-dasharray和stroke-dashoffset。 这两个属性，我们在多篇文章中都有提及，也是非常有意思的线条动画效果，感兴趣的可以一并拓展阅读： CSS奇技淫巧|妙用dro...
一、是什么 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型（CSSbasicboxmodel），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin content，即实际内容，显示文本和图像 boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响 margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区...
记录一个HTML页面关于高分屏的踩到的坑。 所谓高分屏，就是在同样大小的屏幕面积上显示更多的像素点，这样可以呈现更好的可视效果的屏幕。例如，我的笔记本是15.6寸，理论上它的屏幕分辨率应该是1920x1080像素，但实际上我的笔记本屏幕分辨率确实2560x1440像素，也就是俗称的2K屏。这样的高分屏虽然实现了更加细腻的图像和更加清晰的文本，但也对软件适配带来了问题。 我这里遇到的问题是，在HTML5页面中没有特别设置，PC端的Chrome和Firefox的环境下，window.innerWidth,window.innerHeight这样的参数，以及鼠标响应事件中的鼠标位置，都是物理设备宽度...
概述 下面我将通过两个例子讲解列表过滤和排序，总的来说主要使用了数组的filter和sort方法 测试数据定义 persons:[ {name:'雷小军',age:44,sex:'男'}, {name:'李连杰',age:55,sex:'男'}, {name:'李彦宏',age:23,sex:'男'}, {name:'马化腾',age:33,sex:'男'}, {name:'马大云',age:60,sex:'男'}, {name:'王小伟',age:25,sex:'女'} ], 1.列表过滤 目标：在文本框中输入关键字，根据关键字对列表进行过滤 实现方法：使用...
1、下载依赖 npminstallvue-i18n@nex 2、在src目录下创建文件夹创建文件index.ts、zh/index.ts、en/index.ts //index.tsimport{createI18n}from'vue-i18n'importzhfrom'./zh/index'importenfrom'./en/index'constmessages={en,zh,}console.log('localStorage.getItem',localStorage.getItem('language'));constlanguage=(navigator.lan...
大家好，我是Java陈序员。 今天，给大家介绍一个开源的聊天应用程序，支持PC端和移动端。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 HasChat——一个基于Vue3+Socket.io的聊天应用，同时支持PC端和移动端。 功能特性： 技术栈： PC网页版前端：Vue3+Vite+TypeScript+Pinia+NaiveUI+Socket.io 移动版前端：uni-app+Socket.io 后端：Express.js 项目预览 PC网页端 移动端 本地部署 环境准备： Node.Js15+ My...
一、介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码 doSomething(function(result){ doSomethingElse(result,function(newResult){ doThirdThing(newResult,function(finalResult){ console.log('得到最终结果:'+finalResult); },failureCallback); },failureCallback); },failureCall...
背景 20天前,发布了一篇文章讲述我自己写的浏览器插件,帮助自己在阅读微信读书网页端的时候解放双手的故事.主要核心点就是自动阅读.本次发布做了很多更新,先睹为快! 当时我就是写着玩的,一个非常小众场景的小众需求,却没有想到使用的人还挺多的.期间有2个人让我印象非常深刻. 这个世界不只有程序员 路人甲 一个类似花开富贵头像的老哥+了我好友,说是无法安装插件.于是就有了以下对话. 到这我真愣住了.这是啥意思?让我写个微信读书app吗?于是我就追问 原来他不懂技术啊.我以为是同行呢.随后我就遇到了第二个路人 路人乙 我发布插件没几天就有人到了项目仓库给我提issue 都会提issue了,这总...
写在前面 tips：点赞+收藏=学会！ 本文包含radash中数组相关的所有方法说明+使用示例+思维导图查看 这边会整理出一份数组相关方法的使用大纲（不含源码解析），方便大家查阅使用； 作者会按照大类进行整理分享，本次也会同步给出Array所有方法的思维导图； 所有方法整理完毕后，作者会整理出一份Radash库相关的所有方法的思维导图，方便大家查看使用。 本文会把每个方法做标题展示，也方便大家直接在本文中阅读对应方法内容。 数组方法汇总思维导图 xmind文件链接可访问作者的github地址下载； github上还有作者之前学习前端的一些笔记，大家感兴趣可以查看。 访问外网不方便...
原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目，支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。 预览图 编译至h5+App端+小程序端运行效果 技术栈 开发工具：HbuilderX4.0.8 技术框架：Uniapp+Vue3+Pinia2+Vite4.x UI组件库：uni-ui+uv-ui（uniapp+vue3组件库）...
一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子 当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下 二、双向绑定的原理是什么 我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成 数据层（Model）：应用的数据及...
1.现象 当在vue中打印对象的时候会发现有一些属性或者全部属性都是显示的...,点击展开后才能看到真正的值是什么. 2.原因 因为在vue中对象都是用了代理重写了get,由于get重写也就导致了浏览器不能直接获取到具体的值,因此才会在打印的时候为...,手动点击展开才显示具体的值 3.想看具体的值,不想手动点开怎么办 通过JSON.stringfy序列化再用JSON.parse解析 "proxy-zdz-log":{ "prefix":"log", "body":["console.log(JSON.parse(JSON.stringify($1)));//zdz-log","$2"...
DevTools非常强大除了常用的查看元素，进行断点调试或许还有些你不知道的小技巧，小功能。如可以快速的重新发送请求，快速选择元素，在控制台中使用npm库等，让你能够更加高效的进行开发。不定时更新 打开开发者工具的快捷键 使用快捷键能快速打开DevTools，但不同的快捷键可以打开不同的tab: 系统 元素 控制台 网络 Windows或Linux Ctrl+Shift+C Ctrl+Shift+J Ctrl+Shift+I Mac Cmd+Option+C Cmd+Option+J Cmd+Option+I 重新发送请求 有时在调试的使用仅想对某个接口重新请求，但又不...
项目结构 在开发Chrome插件时，以下几个文件的作用如下： manifest.json：这是Chrome插件的清单文件，用于配置插件的基本信息、权限、页面跳转等。其中包括插件的名称、版本号、图标、后台脚本、浏览器动作等信息。 background.js：这是Chrome插件的后台脚本文件，用于处理插件的后台逻辑。可以监听事件、与浏览器进行交互、执行一些后台任务等。在manifest.json中指定了background脚本后，它会在插件加载时自动运行。 popup.html：这是Chrome插件点击后弹出的界面的HTML文件。可以定义插件弹出页面的结构、样式和交互逻辑。 popup.js：...
大家好，我是Java陈序员。 在日常的工作生活中，我们经常会遇到应付各类强制要求转发朋友圈的行为，或者是朋友圈集赞的行为。 今天，给大家介绍一个工具，可以帮助你生成朋友圈转发截图。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 WechatMomentScreenshot——一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。 接下来我们来体验下 工具支持自定义用户名和头像，在使用时，我们可以改成自己的微信昵称和头像。 朋友圈的内容文案也可以个性化定制。 有纯文字、分享网页/公众号文章、图片（单张）、图片...