![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 76
codingWeb
知行合一
展开
-
vue2中使用pinia(vuex转pinia)
最近项目中,想在vue2中把状态管理库从vuex转到pinia。原创 2022-08-19 17:24:01 · 5895 阅读 · 3 评论 -
前端监控三方平台Webfunny及docker部署
最近调研一些前端监控的三方平台,发现了Webfunny挺好用的,而且价格不贵,个人也能承担我发现了一个不错的前端监控平台👍,纯私有化部署,快来下载试试吧~ #Webfunny原创 2022-05-26 19:16:46 · 804 阅读 · 2 评论 -
three.js实现全套3d测距功能(附完整代码)
网上关于测距的实现都是比较片面的,没有完整的例子,最近因为需求,有对相关需求进行实现,给出我的实现方案,供大家参考效果图:完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2022-04-24 11:54:02 · 3469 阅读 · 25 评论 -
vue3中部分api(生命周期等hook)只能在setup中使用,如何实现的
vue3规定声明周期hook等一些api只能写在setup函数内部,不能用于其他地方,如果我在setup之外使用,将会给出警告,如:<script>import {onMounted} from 'vue';onMounted(()=>{ console.log(1)})export default { setup(props) { return{ } }}</script>正确的做法是放到setup函数中,来看下源码它是如何做到规定原创 2022-04-14 19:50:06 · 2112 阅读 · 1 评论 -
一道很难的promise题目
上篇文章讲了promise的实现,这篇则结合题目让你对promise有个更深入的认识:为了能让大家有个更直观的认识,会使用到https://www.jsv9000.app/这个工具,它能可视化出异步任务执行的整个过程题目1: 简单,相信都能答出 Promise.resolve().then(() => { console.log(0) return 'aaa' }).then(res => { console.log(res)原创 2022-03-07 22:56:06 · 833 阅读 · 0 评论 -
measure.js 2.0发布 (增加 css-viewer 能力)
github地址: 帮忙点个star呗!!measure.js,功能的原型是蓝湖上的度量功能,我把他提取出来,脱离蓝湖也能使用example:原创 2022-01-03 20:14:22 · 7360 阅读 · 0 评论 -
measure.js,一个Web元素度量工具,欢迎来star~~,为ui走查打造(脱离蓝湖也能使用它的度量功能
蓝湖里面的尺寸度量功能好用吗?现在脱离蓝湖也能使用了原创 2021-12-25 23:50:54 · 722 阅读 · 0 评论 -
网络知识复习-含图
OSI 七层模型OSI ( Open System Interconnection )是理想化的模型,将网络进行分层,其目的是将复杂的流程简单化,从而实现分而治之。(专人干专事)一.网络分层的含义?下层是为了上层提供服务的。应用层:用户最终使用的接口表示层:数据的表示、安全、压缩会话层:建立和管理会话的传输层: (主要提供安全及数据完整性保障) 网络层不可靠,保证可靠的传输网络层:(主要关心的是寻址) ,进行逻辑寻址,定位到对方,找到最短的路数据链路层: (主要关心两个设备之间原创 2021-11-21 00:25:23 · 2207 阅读 · 0 评论 -
前端监控原理及实践
随着产品的用户数量的不断增长,对于站点体验衡量的的需求也日益紧迫,用户会将产品和他们每天使用的体验最好的 Web 站点进行比较。想着手优化,则必须先有相关的监控数据,才能对症下药。性能是留住用户的关键。 大量的研究报告已经表明了性能和商业成绩的关系,糟糕的性能会让您的站点损失用户数、转化率和口碑。错误监控则能够让开发者第一时间发现并修复问题,单靠用户遇到问题并反馈是不现实的,当用户遇到白屏或者接口错误时,更多的人可能会重试几次...原创 2021-10-06 19:18:47 · 1010 阅读 · 1 评论 -
css中你不知道的:not,:is选择器用法
用CSS将div内,在不改变html的前提下,除了P标签,其它的字体颜色变成蓝色<div class="box"> <span>我是蓝色</span> <p>我是黑色</p> <h1>我是蓝色</h1> <h2>我是蓝色</h2> <h3>我是蓝色</h3> <h4>我是蓝色</h4&g原创 2021-09-13 21:57:56 · 714 阅读 · 0 评论 -
webpack中编写自定义loader和plugin,及如何调试(debug)webpack,vuecli等脚手架
debug(调试)webpack:因为plugin和loader的编写需要nodejs环境,需要追踪一些参数,这时候调试就显得很重要了,但调试webpack不像在浏览器中debug那么轻松,需要一些配置:首先在package.json中加入如下代码: 改命令表示调试webpack并停在第一行 "scripts": { "start": "node --inspect-brk ./node_modules/webpack/bin/webpack.js" }调试分为两种:浏览器中调试原创 2021-08-29 22:41:10 · 2165 阅读 · 0 评论 -
webpack中require.context自动化注册,vue应用
简介:require.context是webpack中,用来创建自己的(模块)上下文;webpack会在代码构建的时候去解析该函数使用:require.context(directory, useSubdirectories = false, regExp = /^\.\//);该方法可以接收3个参数:需要搜索的文件夹目录(必传)是否需要搜索它的子孙目录,默认为false一个匹配文件的正则表达式我的目录结构如下:使用api输出如下:console.log(1,require.c原创 2021-08-28 22:10:17 · 298 阅读 · 1 评论 -
SSO单点登录
我注意到了公司内部很多系统,登录的时候都是跳转到同一个页面,登录之后,本系统和其他系统都已经显示登录,保存了登录状态了,这其实就是SSO单点登录的功劳说清楚这东西,需要有一些cookie的前置知识:顶级域名和子级域名之间的cookie共享和设置关系:顶级域名:顶级域名cookie的设置,只能设置domain为自身,不能设置domain为二级域名或者三级域名等等,否则cookie无法生成。如tusimple.com能设置domain为tusimple.com或者www.tusimple.com原创 2021-03-29 23:55:15 · 245 阅读 · 4 评论 -
js正则表达式详解及个人经验总结(正反向预查,分组捕获,反向引用,子表达式...等等)
正则表达式regular expression:RegExp用来处理字符串的规则只能处理字符串它是一个规则:可以验证字符串是否符合某个规则(test),也可以把字符串中符合规则的内容捕获到(exec / match…)编写正则表达式创建方式有两种字面量构造函数//=>字面量创建方式(两个斜杠之间包起来的,都是用来描述规则的元字符)let reg1 = /\d+/g;//=>构造函数模式创建 两个参数:元字符字符串,修饰符字符串//=>构造函数因为传递的原创 2021-03-19 17:55:56 · 797 阅读 · 1 评论 -
前端js常用剪贴板(复制粘贴)操作和应用,以及navigator.clipboard新粘贴板API使用
最近的项目上需要做复制粘贴相关的操作,来总结下吧复制、剪切、粘贴事件:copy 发生复制操作时触发;cut 发生剪切操作时触发;paste 发生粘贴操作时触发;每个事件都有一个 before 事件对应:beforecopy、beforecut、beforepaste;这几个 before 一般不怎么用,所以我们把注意力放在三个事件就可以了。触发条件:鼠标右键菜单的复制、粘贴、剪切;使用了相应的键盘组合键,比如:ctrl+c、ctrl+v;复制操作:copy事件使用示例:<原创 2020-12-28 23:29:14 · 14603 阅读 · 4 评论 -
探索图片懒加载的最佳实践及封装一个懒加载插件
这周研究了下目前图片懒加载的所有主流方式,分享下,末尾封装了一个兼容所有方式的图片懒加载插件图片懒加载的意义:1.首先它能提升用户的体验,试想一下,如果打开页面的时候就将页面上所有的图片全部获取加载,如果图片数量较大,对于用户来说简直就是灾难,会出现卡顿现象,影响用户体验。2.有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。原理:1、将页面中的img标签src指向一张小图片或者src为空,2、然后定义data-image属性(这个属性可以自定义命名,我常用data原创 2020-11-24 22:19:49 · 479 阅读 · 2 评论 -
js中url、base64、blob、字符串等相互转换方法---有关系图,最全总结
事情的起因是这样,这周在工作时,调用了一个图片转灰度透明的接口,返回来的是一个image字段不是一个url地址,是一个base64编码的字符串一般来说,图片在后端的存储方式分为两种:可以将图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成二进制流或base64,直接存储到数据库的 Image 类型字段中.对于第一种存储方式,我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式,我们前端需要将二进制流交由 blob 对象处理,然后通过 b原创 2020-11-08 00:50:41 · 11177 阅读 · 5 评论 -
前端工程化之代码规范---ESLint + Prettier + husky + lint-staged代码规范全家桶
每个开发者都有自己的习惯,代码的风格也不尽相同,比如缩进的格数,结尾加不加分号,定义函数有没有空格,这些看似好像不起眼的风格,但在多人开发的时候,代码commit提交,可能就会出现一大片冲突,或者过多修改过的情况,对项目管理和维护是极其不友好的,而且在review,阅读项目代码的时候,一个项目中出现几种,甚至10几种的代码风格,我相信没人受得了这事,人都有一种惯性思维,习惯看一种风格,切换到其他风格可能需要适应一下,更别说人手一套风格的项目了,这肯定是不能接受的 ,这个问题很严重,必须得解决...原创 2020-11-07 16:34:45 · 1235 阅读 · 0 评论 -
contentEditable,window.getSelection详解---可编辑div,容器,设置/获取光标位置,光标处插入内容及光标的操作
这周碰到一个骚东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区域的一些操作吧,比如获取光标位置,设置光标,往可编辑区域光标处插入内容等等HTML中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素原创 2020-11-07 00:49:55 · 8607 阅读 · 8 评论 -
前端工程化之commit规范(代码提交规范)
其实commit规范不管是前端还是后端也好,我觉得吧,在任何的工程化的项目中都是不可或缺的部分啦,commit 提交不规范,项目维护和管理起来是极其麻烦的,毕竟每个人都具有自己的个性,commit的格式也是参差不齐git 可以帮我们很好地管理代码,但是在多人合作的时候,经常会碰到各种随意的 commit message,当你需要会看 commit message 的时候,就会很头疼。幸运的是我们可以使用工具去处理掉这个问题,不让这种小问题影响到项目的进展首先来看一下被业界广泛认可的 Angular原创 2020-11-02 00:11:02 · 10351 阅读 · 0 评论 -
浅析js中隐式类型转换的规则(巨坑)
虽然开发中基本都是用的===全等,==很少用,基本不用,但奈何有些面试题考的很刁钻,我就来做个小总结把大多数隐式转换的规则:先说结论:大多数情况下,隐式转换都遵循这个规则,当然有特殊情况,特殊情况特殊对待就行了,当使用==判等时,会转成同类型再比较1. 对象和布尔值比较对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false2. 对象和字符串比较对原创 2020-10-15 18:42:27 · 1189 阅读 · 3 评论 -
css有趣实用的技巧和一些冷门知识点
border-radius的8个属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-10-07 22:14:28 · 406 阅读 · 0 评论 -
TCP的队首阻塞
紧接上篇博客采用http2解决队首阻塞,但可能会产生TCP阻塞的问题TCP发生队首阻塞的原因:HTTP/2虽然可以解决http队首阻塞问题,但是 TCP 层面的队首阻塞是 HTTP/2 无法解决的(HTTP 只是应用层协议,TCP 是传输层协议),TCP 的阻塞问题是因为传输阶段可能会丢包,TCP是一个按序传输的通道,一旦丢包就会等待重新发包,阻塞后续内容传输TCP的队首阻塞问题,我们经常会在http2协议中去讨论,因为http2中TCP通道很少,可能只有一个在http2中丢包了会怎么办?采用原创 2020-08-29 19:23:01 · 3320 阅读 · 2 评论 -
css实现容器(宽高不等的)内部自适应的正方形
先来看需求:容器(宽高不等的)内部自适应的正方形方案一:设置垂直方向的 padding 撑开容器在 CSS 盒模型中,一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定,margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了:代码如下:<!DOCTYPE html><html lang="zh">原创 2020-08-14 20:09:17 · 1688 阅读 · 0 评论 -
css实现下划线的最佳实践及其他方式
开发中下划线效果挺常见的,使用频繁,特别用于对一些文章的内容做一些层次区分,重点分明,用户体验也好,谈谈下划线的多种实现,以及最佳实践1、文字下划线的实现可以使用原生样式:text-decoration:underline.mark{ font-size: 22px; text-decoration: underline; text-decoration-color: red;}局限:没法调整下划线的位置,太贴文字了也不好看灵活性太差,用法太单一2、边框法,就.原创 2020-08-11 15:04:26 · 2125 阅读 · 0 评论 -
url编码 及 js中url编码的api和应用
在因特网上传送URL,只能采用ASCII字符集,即是常说的get请求只能使用ASCII 字符也就是说URL只能使用字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*’()[不包括双引号]、以及某些保留字(空格转换为+),才可以不经过编码直接用于URLRFC文档的建议:这意味着 如果URL中有汉字或者不在ASCII字符集中的特殊符号,就必须编码后才能使用。对于非ASCII字符,RFC文档建议使用utf-8对其进行编码得到相应的字节,然后对每个字节执行百分号编码可以看到a!@$%%5E&原创 2020-08-09 16:23:58 · 1137 阅读 · 0 评论 -
你不知道的passive event listener-让移动端滑动体验起飞(优化页面滑动)
优化前和优化后的对比事情的起因是在腾讯面试的时候被问到了,被吊打了,自闭了,想想也不冤,因为以前确实从来没碰到过这样的问题,如果以前碰到过还回答不出来,我就去撞墙了先来个场景:<script type="text/javascript"> document.addEventListener("touchstart", function(e){ e.preventDefault() }) </script>当你去测试时:报错了:Unable t原创 2020-08-07 01:21:10 · 849 阅读 · 1 评论 -
惊!把vue项目改成electron桌面端应用如此简单
以前vue项目改成桌面端我记得是比较麻烦的,要配置很多的依赖项,没想到现在就是执行几行命令就完事了目标:尝试把此项目改成桌面应用 在项目根目录下执行如下命令:vue add electron-builder安装过程中会提示选择版本,一般有三个版本可以选择,选择最新的版本就可以了安装完成后:1.执行npm run serve 正常打开网页端项目2.执行npm run electron:serve 打开桌面端应用想打包桌面端应用,执行如下命令npm run electron:build原创 2020-07-31 16:02:33 · 4804 阅读 · 9 评论 -
手写bind(),call(),apply(),防抖和节流实现,及常用的数组api
手写xxx并不是说一定要在开发中去用才有意义,也不是为了覆盖原生提供的方法,而是培养自己的思维方式,学习下这种实现思路,让自己对方法的运用更加通透bind,call,apply的实现;需要注意的是,bind的一种特别用法:通过bind改变完this指向后返回的函数,调用的参数也算在内的哦 function fn(a, b) { console.log(a, b) console.log(arguments) } var newFn = fn.bind(this, 1, 2)原创 2020-07-30 21:56:01 · 243 阅读 · 0 评论 -
解决async/await中promise返回reject报错的问题,浅谈js异常捕获的历程
javascript我觉得印象深刻的两大特点,单线程和异步,单线程不说了,今天来说下异步吧,这星期我碰到的一个问题,这是我以前没有留意到的,异步编程步步都是坑,正常的思维方式应该是同步的,而异步思维没经过训练,很容易犯错,我想啊,promise用async,await优化,不仅是为了更优雅的书写,和阅读,通过优化把异步代码写成同步,也是为了更加符合人正常的思维方式正常的异常捕获: try { throw new Error(3) } catch(e) { console.log(e)原创 2020-07-26 17:26:49 · 23746 阅读 · 10 评论 -
挖掘css背景模糊的三种表现形式(背景整体模糊,背景局部模糊,背景局部清晰)
深挖一下背景模糊效果的三种表现形式:背景整体模糊背景局部模糊背景局部清晰背景整体模糊:最近频繁出现一个需求,实现类似于这种效果,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位position和滤镜filter实现,来看看吧先定结构,有坑点: <div class="bg"> <div class="content">我是内容</div> </div>分析:,如果我们把background和fi.原创 2020-07-18 18:56:13 · 2415 阅读 · 0 评论 -
直击算法,剖析前端高频算法(含排序算法,去重,数组扁平化,交差并补,深浅拷贝)
大O标识法和时间复杂度:度量一个程序的执行时间通常有两种方法 - 事后统计的方法 - 事前分析估算的方法 OΟ(1)<Ο(log2(n))<Ο(n)<Ο(n^2)<Ο(n^3)<…<Ο(2^n)Ο(1):如果算法的执行时间不随着问题规模n的增加而增长,即使算法中有上千条语句,其执行时间也不过是一个较大的常数let a=12;let b=13;let temp=a;a=b;b=temp;Ο(log2(n)):当数据增大 n 倍时,耗时增大 logn 倍(这里的 log 是以 2原创 2020-07-15 02:16:15 · 226 阅读 · 0 评论 -
硬核测试script中的defer,async,最直观的认识,详解async,defer,一篇搞懂
先来看看理论知识:<script src="script.js"></script>没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即” 指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。<script async src="script.js"></script>有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。原创 2020-07-05 02:06:15 · 228 阅读 · 0 评论 -
react-HOOK---一篇搞定react-hook,既生react,何生hook,深挖hook中常用的四个API
Hook:Hook是react 16.7新增的一个特性,主要是用来让无状态组件(函数式组件)可以使用状态,以前为了进行状态管理,需要使用类组件或者redux等来管理,相当于类组件中的state,只不过用useState去代替了useState():useState 是来定义一个状态的,它与类组件的状态不同,函数组件的状态可以是对象也可以是基础类型数据,useState返回的是一个数组,第一个是当前的状态值,第二个是对象,表明用于更改状态的函数(类似于setState)import Re原创 2020-07-02 20:49:28 · 1032 阅读 · 2 评论 -
在uniapp中使用vuex-已经被内置了
uni-app已经内置了vuex,所以只要正确引入就好了。1、在项目的根目录下,创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件2、在该js文件下定义公共的数据以及方法函数,并且把它导出import Vue from 'vue'import vuex from "vuex"Vue.use(vuex)export default new vuex.Store({ state:{ num:0 }, mutations:{ add(state){原创 2020-07-01 18:07:19 · 1948 阅读 · 0 评论 -
uni-app元素节点操作-uni.createSelectorQuery()
我们知道uniapp中式没有window对象,和dom元素的,但是有时我们需要获取页面上节点的一些几何信息,以帮助我们完成业务和功能的实现,怎么办呢?查阅官方文档:接下来就来踩踩uniapp节点操作的坑吧按照文档:写下如下代码,验证:<template> <view class="content"> <view class="text-area" style="position: relative;"> <text class="title" s原创 2020-07-01 17:41:32 · 42898 阅读 · 9 评论 -
总结20个面试常见的HTML&CSS知识点
可以和前面的javascript常见面试题一起看哦还是老样子,选择性的给出答案1.行内元素/块级元素 非替换元素/替换元素⭐⭐⭐行内元素/块级元素2.img的title和alt属性 ⭐⭐•title是全局属性img的title和alt属性HTML全局属性3.meta标签⭐⭐Meta标签用法大全4.DOCTYPE 标签⭐⭐⭐ •标准模式 兼容模式5.script标签的defer和async⭐script标签的defer和async6.W3C盒模型和怪异盒模型 ⭐⭐⭐原创 2020-06-25 15:31:26 · 227 阅读 · 0 评论 -
table 》 tr 设置样式无效? table tr 这样设置才行,why?
今天碰到的一个问题,之前一直没有注意到,虽然很快找到问题所在了,但感觉有必要记录一下,希望有同样遇到这个问题的小伙伴,但没找到原因的,能看到这篇文章先来看问题:html如下: 想让 tr变成红色背景<style type="text/css"> table > tr { background-color: red; }</style><body> <table border cellspacing="0" cellpaddi原创 2020-06-18 00:24:56 · 4912 阅读 · 1 评论 -
总结20个面试常见的JavaScript知识点
在准备面试时,由于没有那么多的时间和精力,不能把所有知识点复习地面面俱到。再加上网上面试题目琳琅满目,更不知道哪些知识点需要重点复习。一共总结了20个JavaScript知识点总的来说,对于新人,不要把太多的精力放在框架上面了,框架固然重要,但我认为基础更加重要,某种程度上它能决定你的高度:简单的题目就不给出答案了,我觉得有价值的知识点,就附上答案或者个人的总结吧1.数据类型⭐⭐⭐•基本类型 •引用类型举例:Symbol的作用2.判断变量的类型 ⭐⭐⭐•typeof •inst原创 2020-06-17 16:01:23 · 288 阅读 · 0 评论 -
前端之路何去何从-----思考与总结
2016 年的时候,我们只会 jQuery 可能就能找到一份工作,但是现在你至少要会 三大框架中的一种才可以。前端的发展实在是太快了,平均每隔16个月,就可能会出现一次变革,一次大的版本迭代,相比于其他领域,我觉得前端迭代的速度应该是最快的,前端开发工程师应该是站在潮流最前线的一批人,当然也代表着机遇与挑战现在前端项目大多数都是框架开发,Vue啊,React啊,以及国内很少在用的Angular,而“新一代的前端工程师”,往往只是了解前端界的上古神兽jQuery,但实际中很少或者基本没怎么用过,在国企或者原创 2020-06-13 23:33:21 · 364 阅读 · 2 评论