![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
文章平均质量分 57
C+ 安口木
https://github.com/ytanck/
生命不息,coding不止...
展开
-
前端错误日志上报解决方案
项目上线之后,用户如果出现错误(代码报错、资源加载失败以及其他情况),基本上没有办法复现,如果用户出了问题但是不反馈或直接不用了,对开发者或公司来说都是损失。由于我这个项目比较小,只是一个迷你商城,所以不需要收集很复杂的数据,只需要知道有没有资源加载失败、哪行代码报错就可以了,市面上有很多现成的监控平台比如sentry,在这里我选择通过nodejs自己搭一个服务。我的项目是使用Vue2写的,所以本文主要是讲Vue相关的部署过程1、部署后台服务(使用express)原创 2024-08-06 10:45:09 · 794 阅读 · 0 评论 -
前端怎么实现检测版本更新?
在传统的多页Web应用中,每次用户访问页面时,都会从服务器获取最新的页面和资源,因此版本更新相对简单,用户总是能获取到最新的版本。然而,SPA在首次加载后,前端的静态资源会缓存在浏览器内存中,且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布,用户可能仍在使用旧版本,无法立即获得最新的功能、修复或安全更新。为了确保用户始终使用最新的版本并体验到最佳的功能和安全性,SPA应用需要实现版本检测和更新提示机制。原创 2024-07-29 10:14:28 · 554 阅读 · 0 评论 -
APP如何与H5通信?
window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口),而不是自身窗口的window父页面中:父页面向子页面发送跨域信息,window就是在父页面中嵌入的iframe指向的子页面的window,即:iFrame.contentWindow子页面中:子页面想父页面发送跨域信息,window就是父页面的window,在这里因为子页面是嵌入到父页面中的,对于子页面来讲,window就是top或者parent。原创 2024-07-29 10:13:42 · 948 阅读 · 0 评论 -
PlantUML 语法、图标和示例
代码@startumltitle component定义组件@enduml图例。原创 2024-07-23 17:51:16 · 508 阅读 · 0 评论 -
前端开发必备 VS Code 插件大全
最好的软件开发往往来自于程序员的直接需求,Code Runner 作者是一位曾就职于微软的中国程序员,他为了方便自己的日常开发工作,开发了 Code Runner 这款可以在 VS Code 中方便快捷运行各种语言代码的插件。Live Server Live Server是一款实时开发服务器插件,能够在本地启动一个服务器,当你修改代码时,它能自动检测变化并即时刷新浏览器,让你在开发过程中能即刻看到改动效果,尤其适用于静态网页和单页应用(SPA)的开发。提供右键菜单选项,一键在浏览器打开html文件。原创 2024-07-04 15:17:15 · 1015 阅读 · 0 评论 -
前端代码规范 - 日志打印规范
通过以上步骤,我们可以建立一个前端项目的日志输出规范。一个好的日志系统应该是灵活的,能够根据不同的环境和需求进行适当的调整。日志是帮助我们更好地理解和维护应用的工具,合理的使用和管理日志对于任何规模的前端项目都是非常重要的。原创 2024-07-04 15:16:07 · 815 阅读 · 1 评论 -
react中state 和 props 有什么区别?
组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是。具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据。一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是。的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。在内部不可变的,如果想要改变它看,只能通过外部组件传入新的。来改变,从而达到更新组件内部数据的作用,并且重新调用组件。还可以接受第二个参数,它是一个函数,会在。当需要修改里面的值的状态需要通过调用。来重新渲染子组件,否则子组件的。原创 2024-06-24 09:42:59 · 360 阅读 · 0 评论 -
10个超好看的 404 页面(附源码)
来分享 10 个超好看的 404 页面,带动画效果原创 2024-06-21 13:54:03 · 1579 阅读 · 1 评论 -
Real DOM 和 Virtual DOM 的区别?
真实DOM 和 虚拟DOM 的区别原创 2024-06-19 14:35:08 · 1041 阅读 · 0 评论 -
说说React Jsx转换成真实DOM过程?
在react源码中,虚拟Dom转化成真实Dom使用React.createElement或JSX编写React组件,实际上所有的 JSX 代码最后都会转换成React.createElement(…) ,Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理,并获取defaultProps对默认props进行赋值,并且对传入的孩子节点进行处理,最终构造成一个虚拟DOM对象。原创 2024-06-19 14:31:04 · 352 阅读 · 0 评论 -
JavaScript 中内存泄漏的几种情况
并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放,当变量离开环境时,则将其标记为“离开环境“垃圾回收程序运行的时候,会标记内存中存储的所有变量。然后,它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉。这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"程序的运行需要内存。语言中,因为是手动管理内存,内存泄露是经常出现的事情。原创 2024-06-18 16:10:39 · 385 阅读 · 0 评论 -
npm package.json属性详解
必须是一个严格的json文件,而不仅仅是js里边的一个对象。其中很多属性可以通过npm-config来生成more。原创 2024-05-27 10:15:33 · 476 阅读 · 0 评论 -
【MathJS】入门mathjs最佳实践,解决JS计算精度丢失的问题
看上去,math.format()只是把number类型转成string类型,别慌,后面讲bignumber时,才会真正体会到它的价值。在实际开发中,需要快速上手,要在最短的时间内解决问题。我的思路就是写一个最简单的用例,搞清楚它的输入和输出,从而正确的理解它的作用。前端的小伙伴,在项目开发中,比如常见的订单模块中,都会进行一些基础的数学运算时,不可避免的就会遇到让人头疼的精度问题。chain调用,返回的是Chain的实例对象,就需要尾部调用,返回chain的value值,如上。还有一些场景需要处理,转载 2024-05-22 16:35:26 · 916 阅读 · 0 评论 -
ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性原创 2024-05-17 14:45:43 · 794 阅读 · 0 评论 -
Javascript前端本地存储之localStorage、sessionStorage、cookie、indexedDB区别及使用
Javascript前端本地存储之localStorage、sessionStorage、cookie、indexedDB区别及使用原创 2024-05-16 10:39:15 · 757 阅读 · 0 评论 -
JS深拷贝浅拷贝的区别?如何实现一个深拷贝?
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。浅拷贝只复制属性指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改对象属性会影响原对象。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。如果属性是基本类型,拷贝的就是基本类型的值。深拷贝是递归拷贝深层次,属性为对象时,深拷贝是新开栈,两个对象指向不同的地址。浅拷贝是拷贝一层,属性为对象时,浅拷贝是复制,两个对象指向同一个地址。原创 2024-05-16 10:36:15 · 690 阅读 · 0 评论 -
JavaScript 前端面试知识点总结
本部分主要是笔者在复习 JavaScript 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!js 一共有五种基本数据类型,分别是 Undefined、Null、Boolean、Number、String,还有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型。Symbol 代表创建后独一无二且不可变的数据类型,它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。原创 2024-04-18 16:58:00 · 905 阅读 · 0 评论 -
JavaScript 面试知识点总结
答:ES6 是新一代的 JS 语言标准,对分 JS 语言核心内容做了升级优化,规范了 JS 使用标准,新增了 JS 原生方法,使得 JS 使用更加规范,更加优雅,更适合大型应用的开发。学习 ES6 是成为专业前端正规军的必经之路。不学习 ES6 也可以写代码打鬼子,但是最多只能当个游击队长。原创 2023-03-20 11:22:58 · 339 阅读 · 0 评论 -
ant-design的DatePicker、a-range-picker限制选择今天之前的时间和今天之后的日期时间
我现在用的最后一种情况,这里我就展示最后一个效果图吧!(7.1之后的日期不可选择,可选今天的日期)这里要用到moment插件,大家自行下载, npm i moment。原创 2024-03-15 13:57:44 · 1166 阅读 · 0 评论 -
汇总全网免费API,持续更新(新闻api、每日一言api、音乐。。。)
如果需要更稳定的api,推荐大家使用付费api欢迎大家提交免费 api 我们共同维护这篇文章。原创 2024-03-15 11:52:49 · 2610 阅读 · 0 评论 -
JS正则匹配多个连续相同字符
【代码】JS正则匹配多个连续相同字符。原创 2024-03-14 13:37:33 · 679 阅读 · 0 评论 -
JS跳出for循环三种方法的区别(break, continue, return)
(非函数内使用会直接报语法错),是用来终止函数的执行,并返回一个指定的值给函数调用者。break会终结当前for循环体。continue仅仅停止该次循环。原创 2024-03-13 15:35:10 · 1267 阅读 · 0 评论 -
Markdown Graph 图表语法mermaid
Markdown Graph 图表语法mermaid原创 2024-02-23 11:02:47 · 1303 阅读 · 0 评论 -
CSS @符规则(@font-face、@keyframes、@media、@scope等)
CSS @ 规则(@font-face、@keyframes、@media、@scope等)原创 2024-02-21 14:38:26 · 1538 阅读 · 0 评论 -
CSS 函数详解url、min、rgb、blur、scale、rotate、translate等
CSS 函数详解url、min、rgb、blur、rotate、translate原创 2024-02-21 14:37:32 · 1275 阅读 · 0 评论 -
ECMAScript 2024(ES15)Set新增方法(求交集、并集、差集、超集)
Chrome 浏览器将在下一个版本(Chrome 122)支持 7 个全新的 JavaScript 方法,以增强 Set 对象的功能。这些方法都是由 proposal-set-methods 提案提出的,目前该提案已经进入第三阶段,API 已经基本稳定。预计在 2024 年,这些方法将被纳入 ECMAScript 2024 规范中。这些方法包括:下面先来看看 JavaScript 中的 Set 是什么,如何使用,又有何用处!原创 2024-02-19 17:19:22 · 1109 阅读 · 0 评论 -
ECMAScript 2024(ES15)将带来超实用的新特性
ECMAScript语言规范每年都会进行一次更新,而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前,ECMAScript 2024 的候选版本已经发布,为我们带来了一系列实用的新功能。接下来,就让我们一起先睹为快吧!原创 2024-02-19 17:18:10 · 1695 阅读 · 2 评论 -
node文件系统常见操作
node文件系统常见操作创建删除文件夹原创 2024-01-24 09:57:15 · 561 阅读 · 0 评论 -
npm使用国内淘宝镜像的方法(最新)
【代码】npm使用国内淘宝镜像的方法。原创 2023-11-17 10:25:35 · 13421 阅读 · 0 评论 -
axios的原理及源码解析
axios解析原创 2024-01-17 10:12:31 · 1320 阅读 · 0 评论 -
推荐一个页面引导库 driver.js
driver.js 是一款用原生 js 实现的页面引导库,上手非常简单,体积在 gzip 压缩下仅仅 5kb。我们来看下如何使用 driver.jssteps: [});可以看到仅仅十几行代码,你就可以完成页面引导功能的编写。首先引入 driver.js 库及其 css 文件然后调用 driver 函数构造一个 driverObj 对象,通过 steps 参数编写你的引导步骤,element 为需要高亮的 DOM 元素或 DOM 对应的 CSS 选择器。原创 2024-01-17 10:08:14 · 436 阅读 · 0 评论 -
理解Vue源码,从0开始撸了一个简版Vue
vue 的双向绑定、虚拟dom、diff算法等等面试常见问题你可能在几年前就学过了,其中有些人可能看过Vue的源码,了解过Vue是如何实现数据监听和数据绑定这些技术的。不过让从零开始实现一个 vue,你可以吗?模板语法其实早就存在,在Vue发布之前就有了。Vue除了具备基本的模板编译功能外,新增了很多功能属性,比如数据集data、方法集methods、组件集components等等,当然还具备了数据的响应式功能,具备生命周期函数……原创 2023-11-14 14:51:29 · 352 阅读 · 0 评论 -
通过rollup打包vue组件库
通过rollup打包vue组件库,并将px转rem原创 2023-03-09 16:07:38 · 921 阅读 · 0 评论 -
正则表达式怎么学
正则表达式转载 2023-03-08 15:24:24 · 110 阅读 · 0 评论 -
webpack打包基础配置
webpack打包基础配置原创 2023-03-08 15:03:36 · 193 阅读 · 0 评论 -
gulp配置打包微信和支付宝小程序
gulp配置打包小程序原创 2023-03-08 14:34:53 · 611 阅读 · 0 评论 -
rollup打包基本配置
rollup基本配置原创 2023-03-08 14:09:09 · 323 阅读 · 0 评论 -
手写简易render方法-渲染虚拟DOM
手写简易render方法-渲染虚拟DOM原创 2022-11-15 11:30:13 · 219 阅读 · 0 评论 -
实现一个简易的虚拟DOM
实现一个简易的虚拟DOM和diff算法转载 2022-11-15 10:58:38 · 995 阅读 · 0 评论 -
JS生成 UUID的四种方法
js前端生产UUID转载 2022-09-21 09:46:21 · 1148 阅读 · 0 评论