WEB开发
-
中文输入法中光标跟随能力触发的浏览器事件探究
:::tip最近在着手腾讯文档的输入体验优化，在其中有一个不起眼的小需求引起了我的注意，并顺便研究了一些事件监听机制相结合的特点，特此记录一下填坑过程。:::模拟光标跟随大部分的主流输入法都有这样一个特性，在输入中文时，可以通过左右方向键控制光标，移动至输入区中任意两个字符之间的位置，用户接下来的字
-
记录--开发uniapp nvue App+微信小程序，我踩过的坑（ 纯干货 ）
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助最近接了个项目，采用uniapp的nvue开发安卓和ios端+小程序端，第一次开发nvue，对于css布局这块，还是踩了很多坑。以及一些uniapp的Api在nvue中也无法使用。文章中也收录了一些我在项目中使用的一些方法，比如富文本解析、
-
NodeJS 服务 Docker 镜像极致优化指北
这段时间在开发一个腾讯文档全品类通用的HTML动态服务，为了方便各品类接入的生成与部署，也顺应上云的趋势，考虑使用Docker的方式来固定服务内容，统一进行制品版本的管理。本篇文章就将我在服务Docker化的过程中积累起来的优化经验分享出来，供大家参考。以一个例子开头，大部分刚接触Docker的同学
-
vite vue3 规范化与Git Hooks
在《JS模块化》系列开篇中，曾提到前端技术的发展不断融入很多后端思想，形成前端的“四个现代化”：工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发展及四种模块化规范。本文简单聊聊规范化中的git规范。1规范化在企业级开发中，“一千个读者有一千个哈姆雷特”是很常见的事，每个程序员对技
-
uni-app 如何优雅的使用权限认证并对本地文件上下起手
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1.起因最近有一个需求，需要使用自定义插件，来对接硬件功能，需要配合对手机的权限进行判断和提示，并在对接后对本地文件进行操作，这里给大家分享下我的碰到的问题，废话不多说，开搞2.对接自定义插件，制作自定义基座manifest.json：本地
-
HTTPS实现原理分析
概述在上一节中介绍了两种加密方法对称加密非对称加密其中对称加密性能高，但是有泄露密钥的风险，而非对称加密相反，加密性能较差，但是密钥不易泄露，那么能不能把他们进行一下结合呢？HTTPS采用混合加密HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包,而SSL/TLS的加密方式就是采用了对
-
HTML
业外传说这门语言，大街上随便喊个人就能上，但想要把前端页面写漂亮可就不是谁便拉个人就行了，具体要在入坑前端三件套（HTML+CSS+JavaScript）后再聊了 学新东西的经典三问：1什么是HTML？ 说白了，我们平时打开浏览器点开一个页面，页面内容的排版、设计都离
-
记录--关于 HTML5 LocalStorage 的 5 个不为人知的事实
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助LocalStorage是HTML5中一个方便使用的API，它为Web开发人员提供了一个易于使用的5MB的存储空间。使用LocalStorageAPI真的再简单不过了。不信看下：?123456789101112//Saveavaluetol
-
数据可视化
前几天完成了数据库测试的最后的可视化阶段，以及多表联动等功能，对这段时间遇到的问题和学到的东西做个总结整理吧关于数据的可视化主要学习于百度的开源Examples-ApacheECharts，做了以下几个的案例圆柱图<!DOCTYPEhtml><html><head>
-
05#Web 实战：可拖拽的侧边栏
效果演示图可拖拽的左、右侧边栏的使用情况还是挺多的，博客园后台管理的左侧边栏就可以拖拽哟！效果演示如下图：HTML代码<divclass="container"><divclass="left"><divclass="resize-bar"></div>
-
webpack优化
1|0一、使用webpack优化前端性能方法⽤webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。可通过webpack优化前端的手段：代码压缩（删除多余的代码、注释、简化代码的写法等等⽅式）HTML文件代码压缩使用HTMLWebpackPlugin插件来
-
vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在《基于vite创建vue3全家桶》一文整合了ElementPlus，并将ElementPlus中提供的图标进行全局注册，这样可以很方便的延续ElementUI的风格——通过el-icon-xxx的方式使用图标（如果有问题的朋友可以先阅读前面的文章：基于Vite创建vue3全家桶项目）。在真实的企业
-
懒加载
1|0一、懒加载的概念概念：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之
-
减少回流与重绘
1|0一、前情回顾在讨论回流与重绘之前，我们要知道：浏览器使用流式布局模型(FlowBasedLayout)。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了RenderTree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小
-
Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）
在项目或产品的迭代过程中，通常会有多套环境，常见的有：dev：开发环境sit：集成测试环境uat：用户接收测试环境pre：预生产环境prod：生产环境环境之间配置可能存在差异，如接口地址、全局参数等。在基于vue-cli（webpack）的项目中只需要添加.env.xxx文件，然后在package.
-
uni-app从入门到精通
0|1uni-app介绍官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发
-
【前端必会】CSS动画，的确很简单
背景用css动画让你的页面交互动起来开始<body><buttonid="button">开始</button><divid="block"></div></body><script>document.getElem
-
带你认识什么是“回流重绘”
摘要：要想减少回流和重绘的次数，首先要了解回流和重绘是如何触发的。本文分享自华为云社区《前端页面之“回流重绘”》，作者：CoderBin。“回流重绘”是什么？在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位
-
如何使用KrpanoToolJS在浏览器切图
如何使用KrpanoToolJS在浏览器切图框架DEMO框架源码地址【独辟蹊径】逆推Krpano切图算法，实现在浏览器切多层级瓦片图一、功能介绍在浏览器中将全景图转为立方体图、多层级瓦片图备注：切图的逻辑、缩略图、预览图均以krpano为标准，如果是使用krpano来开发全景的，可以直接使用，暂时未
-
win7升级到win10系统后，node13升级为node16，node版本node-sass版本与不匹配，导致出现npm ERR! ERESOLVE could not resolve
1.错误npmERR!codeERESOLVE系统从win7升级到win10，之前的node版本是13.14.0，现在版本是16.17.1。正常的vue程序无法正常运行。从网上查询得知"node-sass":"^4.14.1"需要安装python2.7和vs_BuildTools，于是安装pytho
-
WebSocket
菜鸟教程-WebSocket实时通信一、WebSocket概念WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。We
-
超强的纯 CSS 鼠标点击拖拽效果
背景鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯CSS就能够实现的鼠标点击拖拽效果。在之前的这篇文章中--不可思议的纯CSS实现鼠标跟随，我们介绍了非常多有意思的纯CSS的鼠标跟随效果，像是这样：但是，可以看到，上面的效果中，元素的移动不
-
微前端总结
微前端概述微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。微前端不是一门具体的技术，而是整合了技术、策略和方法，可能会
-
基于elementUi + Vxe + Echarts 二次封装业务组件库，commonUtils方法调用
项目地址npm库地址：https://www.npmjs.com/package/dd-ui-library组件库：https://github.com/YolandaKisses/ui-library目录结构├─src│└─components//存放测试页面│└─lib//存放组件源码│└─ut
