![](https://img-blog.csdnimg.cn/20190219162505962.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端的那些事
文章平均质量分 62
专注于前端
蚂蚁上的大象
一个大龄的前端渣渣
展开
-
javaScript中微任务宏任务详解
【代码】javaScript中微任务宏任务详解。原创 2024-04-02 12:07:09 · 833 阅读 · 0 评论 -
CSS color-mix() 函数
color-mix() 是一个即将推出的 CSS 颜色函数,它能够根据指定的颜色模型(如 RGB、HSL 或 Lab)对两个或多个颜色进行混合。mix-color: 想要混合到背景颜色上的颜色。background-color: 背景色,即混合的基准颜色。[weight](可选): 一个介于0到1之间的数字,表示混合色的比例,默认值为 50%(即0.5)。当 weight 更接近 0 时,混合结果更接近 background-color;反之,更接近 mix-color。例如:body {原创 2024-03-22 14:02:22 · 929 阅读 · 0 评论 -
vite打包配置基础
Vite(法语意为“快速”)是由 Vue.js 之父尤雨溪开发的一款现代化的前端构建工具,其设计目标是通过提供更快的冷启动速度、更高效的热更新和智能的按需编译打包机制,极大地提升前端开发体验。本文将详细介绍如何利用 Vite 对项目进行优化打包。原创 2024-03-21 09:36:23 · 1282 阅读 · 0 评论 -
JavaScript获取字符串的字节长度
TextEncoder() 构造函数总是返回一个新创建的 TextEncoder 对象,该对象将生成具有 UTF-8 编码的字节流。TextEncoder 接口不继承任何属性。我们可以换一种思路,既然要求是获取字符串的字符长度,我们可以先把字符串直接转换成字节,然后直接获取字节的长度就可以了。是一个内置的API,可用于将字符串转换为字节数组。原创 2023-09-13 15:47:45 · 1983 阅读 · 0 评论 -
web浏览器打开本地exe应用
像百度网盘那样打本地exe应用的办法。我们可以通过添加注册表. 向系统添加一个类似于http的私有协议(仅本地有效),然后浏览器调用。原创 2023-08-07 14:59:25 · 4593 阅读 · 3 评论 -
最新uniApp微信小程序获取头像open-type=“chooseAvatar“ @chooseavatar方法
最新uniApp微信小程序获取头像open-type="chooseAvatar" @chooseavatar方法原创 2022-11-25 10:22:07 · 22197 阅读 · 21 评论 -
前端IndexedDB数据库封装
IndexedDB介绍浏览器数据库 IndexedDB IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。 IndexedDB 是一个比较复杂的 API,涉及不少概念。它把不同的实体,抽象成一个个对象接口。学习这个 API,就是学习它的各种对象接口。原创 2021-09-13 16:26:10 · 956 阅读 · 0 评论 -
Vue3.2版本组件通讯
Vue3.2组件通讯原创 2022-04-06 10:43:23 · 1697 阅读 · 0 评论 -
关于前端面试要求手写的功能函数
javaScript笔试,十一个手写函数原创 2022-03-10 14:30:43 · 1326 阅读 · 0 评论 -
Vue 配置postcss.config.js CSS处理和移动端适配方案!
今天跟大家聊了一下 vue 中的CSS 处理:postcss.config.js首先我们要了解一下什么是 postcsspostcss:它是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。拥有极高的处理性能(3倍以上的处理速度) 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写 对Source Map支持更好 他的插件真的太多太强大太便利...原创 2019-11-22 18:06:46 · 33637 阅读 · 5 评论 -
前端面试题总结(一)
Promise.all()异常处理promise.all中任何一个promise 出现错误的时候都会执行reject,导致其它正常返回的数据也无法使用。解决办法:由于Promise.all(request).then(…).catch(…) 会在所有request都resolve时才会进then方法,并且把所有结果以一个数组返回,只要有一个失败,就会进catch。而如果在单个请求中定义了catch方法,那么就不会进Promise.all的catch方法。因此,可以在单个的catch中对失败的pr原创 2020-11-19 11:54:36 · 201 阅读 · 0 评论 -
nvm安装、更新,管理node.js版本
nvmnvm是node版本管理工具。为了解决node各种版本存在不兼容现象,nvm是让你在同一台机器上安装和切换不同版本的node的工具。nvm安装在安装nvm之前,首先需要卸载电脑上已安装的node/npm。Windows nvm安装下载nvm-windowshttps://github.com/coreybutler/nvm-windows/releasesMacOS安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nv原创 2020-11-12 14:55:08 · 11263 阅读 · 0 评论 -
美不可言的CSS 三
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。内发光注意到box-shadow还有个inset,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形再加点动画和滤镜效果,“猩红之月”闪亮登场!注意到它散发着淡淡的红光,其实就是2个伪元素应用了模糊滤镜所产生的效果本demo地址:Crimson Crescent Loadingtext-shadow文本阴影,本质上和box-sh...转载 2020-11-06 15:05:31 · 340 阅读 · 0 评论 -
美不可言的CSS 二
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就...转载 2020-11-06 15:00:04 · 224 阅读 · 0 评论 -
美不可言的CSS 一
3D 方块如何在 CSS 中创建立体的方块呢?用以下的 SCSS mixin 即可方块的长度、高度、深度都可以通过 CSS 变量自由调节@mixin cube($width, $height, $depth) { &__front { @include cube-front($width, $height, $depth); } &__back { @include cube-back($width, $height, $depth); }转载 2020-11-06 14:53:42 · 257 阅读 · 0 评论 -
vue项目 使用provide、inject无闪烁刷新当前页面
解决的办法及遇到的问题:this.$router.go(0)这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的。 location.reload()这种也是一样,画面一闪,体验不是很好推荐解决方法:用provide/inject组合原理:允许一个祖先组件向其所有子孙后代...原创 2019-10-17 10:03:12 · 343 阅读 · 0 评论 -
他写出了 Vue,却做不对这十道 Vue 笔试题
请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传,而是前端娱乐圈今日份的瓜——有十道关于 Vue 的选择题,在群里引出了一众社区知名人士竞折腰,最后钓出了 Evan You 本人亲自挑战……然后他自己也做错了(其中的某两道)。鲁迅会做错鲁迅文选的阅读理解?有截图为证:所以,只要答对这十道题里的九道以上,你就实打实地(在做题这个维度上)超越了尤大,比他更懂 Vue 了噢!是不是很心动?其实要求都不用这么高,只要做对六七道,就已经可以吊打一群小有名气的社区选手了。所转载 2020-11-04 16:02:22 · 410 阅读 · 1 评论 -
2020年前端面试题
节前公司突然决定解散技术部,整的小伙伴们手忙脚乱,怎么好好的公司就突然要解散呢!博主刚来这个公司才4个多月,被整的一脸懵逼。剩下就是一些扯皮的事,遇到这么坑的公司也是没有办法。都说金九银十,称这大好的日子赶紧去面试找个靠谱的公司吧!下面整理了一些前端面试题,希望能给在找工作的小伙伴一些帮助。基础的面试题,在这里就不一一说了,主要说一下进阶的面试题。一、Vue Key指令的作用key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进行对比,来判断是否为相同节原创 2020-10-14 12:55:50 · 244 阅读 · 0 评论 -
Vue的钩子函数-守卫篇
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢…Vue-Router导航守卫:有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导...原创 2020-01-06 10:02:08 · 369 阅读 · 0 评论 -
前端代码优化(基础)
索引优化代码先来看一个简单的例子:需求是星期回显,传 1 回显 星期一,传 7 回显 星期日,其他类推,无效回显空字符串;类似的需求还有回显月份第一种实现方法: switch 实现function previewWeek(i){ switch(i){ case 1: return '星期一' break;...原创 2020-04-19 13:53:59 · 845 阅读 · 0 评论 -
埋点与监控
什么是埋点?百度原话:埋点分析,是网站分析的一种常用的数据采集方法其实通俗的讲前端埋点主要是为了运营以及开发人员采集用户行为数据,以及页面性能等数进行后续的数据分析,举一些例子:比如,拿到页面在各种网络下的加载时间,再比如拿到用户在某个页面的停留时间!埋点的目的是什么?在现今用户就是上帝的年代,互联网竞争如此之大的时代,有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去...原创 2020-04-19 12:48:21 · 2593 阅读 · 0 评论 -
你未必知道的CSS知识点
需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。知识点篇01.????CSS计数器的使用演示地址:codepen02.????文本缩进,块级用text-indent,内联用margin-left03.????美化表格常用技巧。等比、定宽、错色等演示地址:codepen...转载 2019-10-16 17:50:41 · 338 阅读 · 1 评论 -
讨论帖~~前端以后的发展方向以及趋势!
来说说前端以后的发展方向以及趋势~~web前端的发展史静态网页的诞生1989年,在欧洲粒子物理实验室(粒子物理研究通常与来自世界各地的研究所进行合作)的IT部门工作的Tim Berners-Lee向其领导提出了一项名为Information Management: A Proposal的提议:使来自世界各地的远程站点的研究人员能够组织和汇集信息,在个人计算机上访问大量的科研文献,并建议...原创 2019-01-26 16:46:32 · 1483 阅读 · 0 评论 -
NodeJS开发博客(一)项目搭建
一、安装NodeJs去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包根据自己的系统选择自己需要下载的NodeJS安装包。二、使用CMD命令行 检查NodeJS 、npm 是否安装成功!window+R 输入CMD 然后在命令行中输入 node -v 和 npm -v 查...原创 2019-02-19 16:42:10 · 8728 阅读 · 2 评论 -
Node.JS中异步与同步
首先,你得知道阻塞(blocking)和非阻塞(non-blocking)有啥区别。你可以把Node.js看做一个人+一个团队:JS的执行部分看做是一个人,叫它 a ;调用libuv实现的IO操作的部分看做是一个团队,比如 arr ;a 只有他自己1个人(单线程),他同一时间内只能干一件事,这部分是阻塞的,一项工作(语句)执行完才能执行下一项,比如一个for循环:for(le...原创 2019-01-31 17:57:48 · 1564 阅读 · 0 评论 -
JS 冷门知识
监听网络状态navigator.onLine 方法代码如下:/* 监听网络状态 */mounted(){ let that = this; window.addEventListener('online', that.update, true); window.addEventListener('offline', that.update, true);...原创 2019-09-12 19:59:52 · 445 阅读 · 0 评论 -
你(可能)不知道的 WEB API
简介作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(真的很简单,样式等于没有~)这几个api分别是:page lifecycle onlineState 利用deviceOrienta...原创 2019-09-04 20:10:50 · 210 阅读 · 0 评论 -
iYiuMessage 消息提示组件
自己写了一个简单的消息提示组件,我管他叫iYiuMessage。先给一个Github地址:https://github.com/JensenYao/iYiuMessage初版写出来有一段时间了,一直没有时间去整理发布博客,今天来给大家介绍一下iYiuMessage。初版iYiuMessage简单的运用 prototype 来完成的第一版。它现在可以自定义 Message 信息...原创 2019-08-27 18:45:10 · 216 阅读 · 0 评论