- 博客(142)
- 收藏
- 关注
RSS订阅
原创 measure.js 2.0发布 (增加 css-viewer 能力)
github地址: 帮忙点个star呗!!measure.js,功能的原型是蓝湖上的度量功能,我把他提取出来,脱离蓝湖也能使用example:
2022-01-03 20:14:22
7356
原创 measure.js,一个Web元素度量工具,欢迎来star~~,为ui走查打造(脱离蓝湖也能使用它的度量功能
蓝湖里面的尺寸度量功能好用吗?现在脱离蓝湖也能使用了
2021-12-25 23:50:54
705
原创 前端监控三方平台Webfunny及docker部署
最近调研一些前端监控的三方平台,发现了Webfunny挺好用的,而且价格不贵,个人也能承担我发现了一个不错的前端监控平台👍，纯私有化部署，快来下载试试吧~ #Webfunny
2022-05-26 19:16:46
780
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
3250
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
2078
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
817
原创 实现一个符合promiseA+规范的promise
关于异步的解决方案目前有四种：callback(回调函数)generato + co库promiseasync+awaitpromise的基本特点：promise代表的是承诺的意思 promise最核心的就是有三个状态,等待态(pending), 成功态(fulfilled),失败态(rejected)状态只能从等待态改变成其他状态 ，不能从成功变成失败，也不能从失败变成成功默认你传入的executor会立刻执行, 这个executor函数接受两个参数 resolve,reject
2022-03-03 00:48:17
524
原创 网络知识复习-含图
OSI 七层模型OSI ( Open System Interconnection )是理想化的模型,将网络进行分层,其目的是将复杂的流程简单化,从而实现分而治之。(专人干专事)一.网络分层的含义?下层是为了上层提供服务的。应用层:用户最终使用的接口表示层:数据的表示、安全、压缩会话层:建立和管理会话的传输层: (主要提供安全及数据完整性保障) 网络层不可靠,保证可靠的传输网络层:(主要关心的是寻址) ,进行逻辑寻址,定位到对方,找到最短的路数据链路层: (主要关心两个设备之间
2021-11-21 00:25:23
2186
原创 前端监控原理及实践
随着产品的用户数量的不断增长，对于站点体验衡量的的需求也日益紧迫，用户会将产品和他们每天使用的体验最好的 Web 站点进行比较。想着手优化，则必须先有相关的监控数据，才能对症下药。性能是留住用户的关键。 大量的研究报告已经表明了性能和商业成绩的关系，糟糕的性能会让您的站点损失用户数、转化率和口碑。错误监控则能够让开发者第一时间发现并修复问题，单靠用户遇到问题并反馈是不现实的，当用户遇到白屏或者接口错误时，更多的人可能会重试几次...
2021-10-06 19:18:47
988
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
684
原创 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
2036
原创 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
288
1
原创 SSO单点登录
我注意到了公司内部很多系统，登录的时候都是跳转到同一个页面，登录之后，本系统和其他系统都已经显示登录，保存了登录状态了，这其实就是SSO单点登录的功劳说清楚这东西，需要有一些cookie的前置知识：顶级域名和子级域名之间的cookie共享和设置关系：顶级域名：顶级域名cookie的设置，只能设置domain为自身，不能设置domain为二级域名或者三级域名等等，否则cookie无法生成。如tusimple.com能设置domain为tusimple.com或者www.tusimple.com
2021-03-29 23:55:15
240
4
原创 js正则表达式详解及个人经验总结(正反向预查，分组捕获，反向引用，子表达式...等等)
正则表达式regular expression：RegExp用来处理字符串的规则只能处理字符串它是一个规则：可以验证字符串是否符合某个规则（test），也可以把字符串中符合规则的内容捕获到（exec / match…）编写正则表达式创建方式有两种字面量构造函数//=>字面量创建方式（两个斜杠之间包起来的，都是用来描述规则的元字符）let reg1 = /\d+/g;//=>构造函数模式创建 两个参数：元字符字符串，修饰符字符串//=>构造函数因为传递的
2021-03-19 17:55:56
764
1
原创 前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用
最近的项目上需要做复制粘贴相关的操作，来总结下吧复制、剪切、粘贴事件：copy 发生复制操作时触发;cut 发生剪切操作时触发;paste 发生粘贴操作时触发;每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste;这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。触发条件:鼠标右键菜单的复制、粘贴、剪切;使用了相应的键盘组合键，比如:ctrl+c、ctrl+v;复制操作：copy事件使用示例：<
2020-12-28 23:29:14
14417
4
原创 探索图片懒加载的最佳实践及封装一个懒加载插件
这周研究了下目前图片懒加载的所有主流方式，分享下，末尾封装了一个兼容所有方式的图片懒加载插件图片懒加载的意义：1.首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获取加载，如果图片数量较大，对于用户来说简直就是灾难，会出现卡顿现象，影响用户体验。2.有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。原理：1、将页面中的img标签src指向一张小图片或者src为空，2、然后定义data-image属性（这个属性可以自定义命名，我常用data
2020-11-24 22:19:49
466
2
原创 js中url、base64、blob、字符串等相互转换方法---有关系图，最全总结
事情的起因是这样，这周在工作时，调用了一个图片转灰度透明的接口，返回来的是一个image字段不是一个url地址，是一个base64编码的字符串一般来说，图片在后端的存储方式分为两种：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;将图片转换成二进制流或base64，直接存储到数据库的 Image 类型字段中.对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式，我们前端需要将二进制流交由 blob 对象处理，然后通过 b
2020-11-08 00:50:41
11083
5
原创 前端工程化之代码规范---ESLint + Prettier + husky + lint-staged代码规范全家桶
每个开发者都有自己的习惯，代码的风格也不尽相同，比如缩进的格数，结尾加不加分号,定义函数有没有空格，这些看似好像不起眼的风格，但在多人开发的时候，代码commit提交，可能就会出现一大片冲突，或者过多修改过的情况，对项目管理和维护是极其不友好的，而且在review，阅读项目代码的时候，一个项目中出现几种，甚至10几种的代码风格，我相信没人受得了这事，人都有一种惯性思维，习惯看一种风格，切换到其他风格可能需要适应一下，更别说人手一套风格的项目了，这肯定是不能接受的 ，这个问题很严重，必须得解决...
2020-11-07 16:34:45
1194
原创 contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
2020-11-07 00:49:55
8388
8
原创 前端工程化之commit规范（代码提交规范）
其实commit规范不管是前端还是后端也好，我觉得吧，在任何的工程化的项目中都是不可或缺的部分啦，commit 提交不规范，项目维护和管理起来是极其麻烦的，毕竟每个人都具有自己的个性，commit的格式也是参差不齐git 可以帮我们很好地管理代码，但是在多人合作的时候，经常会碰到各种随意的 commit message，当你需要会看 commit message 的时候，就会很头疼。幸运的是我们可以使用工具去处理掉这个问题，不让这种小问题影响到项目的进展首先来看一下被业界广泛认可的 Angular
2020-11-02 00:11:02
10270
原创 总结git各大命令详细 且 谈谈git flow流程
入职后，公司使用的是gitlab去做协同开发，相比以前只会在一条master主分支上玩耍，要复杂一些，我觉得吧，git本身的命令不难，难的是要理解协同开发的流程，不能再像以前那像随性的提交，提交也可能变得没那么容易了，毕竟协同开发会涉及到冲突的问题，使用gitlab或者协同开发一般都遵循git flow 流程git flow流程，我的理解 ：一般只有一个master主分支和一个dev分支，每个组员基于dev分支checkout出很多特性分支，各自开发自己的功能，开发结束后 ，向dev分支提出MR（mer
2020-10-25 23:28:54
814
原创 浅析js中隐式类型转换的规则（巨坑）
虽然开发中基本都是用的===全等，==很少用，基本不用，但奈何有些面试题考的很刁钻，我就来做个小总结把大多数隐式转换的规则：先说结论：大多数情况下，隐式转换都遵循这个规则，当然有特殊情况，特殊情况特殊对待就行了，当使用==判等时，会转成同类型再比较1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false2. 对象和字符串比较对
2020-10-15 18:42:27
1179
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
398
原创 Js中process.nextTick，setImmediate，setTimeout，Promise.then，async/await终极异步执行顺序全解析
虽然大家知道async/await，但是很多人对这个方法中内部怎么执行的还不是很了解await做了什么处理从字面意思上看await就是等待，await 等待的是一个表达式，这个表达式的返回值可以是一个promise对象也可以是其他值。很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈后面的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await
2020-09-28 22:09:07
1244
3
原创 详解Symbol（自定义值，内置值）-------小小的Symbol，大大的学问
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型Symbol 特点：1. Symbol 的值是唯一的，用来解决命名冲突的问题，即使参数相同// 没有参数的情况let name1 = Symbol();let name2 = Symbol();name1 === name2 // falsename1 === name2 // false// 有参数的情况let name1 = Symbol('flag');let .
2020-09-02 16:05:44
6940
原创 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
3284
2
原创 HTTP详解长短连接，管道化，队头阻塞及它们之间的关系
希望能耐心看下去，篇幅比较长，我尽可能详细的去叙述，总结清楚Http 长连接 和 短连接：早期的 HTTP协议，如HTTP0.9之前也被称为是“无连接”的协议。不会与服务器保持长期的连接状态，所以也称为短连接，短连接每一次的请求都需要重新建立TCP连接，有10个请求就需要建立10次TCP连接，这个效率，可想而知是非常低的到Http1.0就出现了长连接的通信方式，解决了短连接多次建立TCP连接的痛点，现在Http1.1基本都是默认开启Connection: keep-alive 长连接的， TCP连接
2020-08-29 16:55:20
3414
原创 react独特的事件机制（react-events）
react事件机制独特在哪里？function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> );}当我们在组件上设置事件处理器时，React内.
2020-08-19 18:17:31
1451
原创 react中setState()是异步的还是同步的，如何控制？
上上篇博客我讲了setState() 的批处理合并，而setState()是异步的还是同步的，和setState() 的批处理有很大的关系，推荐先看完上上篇博客再来看这篇，会清晰很多地址如下：setState()批处理，合并策略，控制批处理----batchUpdatessetState()是异步的还是同步的？先看异步的情况：import React, { Component } from 'react';class com2 extends Component { state =
2020-08-16 16:36:48
4573
1
原创 React-hooks的useEffect模拟componentDidUpdate生命周期
先回忆一下：class组件中的componentDidUpdate生命周期是初次渲染完后，当接收的props，state改变时或者this.forceUpdate()就会调用函数组件中的useEffect可以看做 componentDidMount，componentDidUpdate和componentWillUnmount 这三个函数的组合useEffect( ()=>{ } )只有第一个参数的时候此时相当于componentDidMount + componentDidUpdat
2020-08-15 18:14:59
10472
6
原创 setState()批处理，合并策略，控制批处理----batchUpdates
之前一直在做vue开发，可能对vue了解的多一些，也期待vue3的发展，但是近期想开始整明白react背后的事情react开发对setState的使用可能一点也不陌生，但肯定会碰到过这种情况import React from 'react'export default class BatchedDemo extends React.Component { state = { number: 0, } handleClick = () => {
2020-08-15 16:25:04
2728
4
原创 css实现容器(宽高不等的)内部自适应的正方形
先来看需求：容器(宽高不等的)内部自适应的正方形方案一：设置垂直方向的 padding 撑开容器在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：代码如下：<!DOCTYPE html><html lang="zh">
2020-08-14 20:09:17
1660
原创 css实现下划线的最佳实践及其他方式
开发中下划线效果挺常见的，使用频繁，特别用于对一些文章的内容做一些层次区分，重点分明，用户体验也好，谈谈下划线的多种实现，以及最佳实践1、文字下划线的实现可以使用原生样式：text-decoration:underline.mark{ font-size: 22px; text-decoration: underline; text-decoration-color: red;}局限：没法调整下划线的位置，太贴文字了也不好看灵活性太差，用法太单一2、边框法，就.
2020-08-11 15:04:26
2029
原创 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
1106
原创 你不知道的passive event listener-让移动端滑动体验起飞（优化页面滑动）
优化前和优化后的对比事情的起因是在腾讯面试的时候被问到了，被吊打了，自闭了，想想也不冤，因为以前确实从来没碰到过这样的问题，如果以前碰到过还回答不出来，我就去撞墙了先来个场景：<script type="text/javascript"> document.addEventListener("touchstart", function(e){ e.preventDefault() }) </script>当你去测试时：报错了：Unable t
2020-08-07 01:21:10
826
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
4656
9
原创 npm报错，npm.cmd无法运行，系统找不到指定的文件/运行输入cmd打不开的问题
今天不知道咋了，安装包的时候突然提示这个，我以为node卸载了，node -v查看了下，发现有呀，于是我重新下了一个node最新版本的安装包，重新安装覆盖了下，发现问题依然在于是我进入node的安装目录，看看这里有啥问题没，然后发现node目录下的npm.cmd无法正常打开，于是我尝试下cmd能打开不我没辙了，去百度查了下，找到答案如下：于是我去问同为window10系统的人复制了一份cmd.exe执行文件，就把问题解决了，太坑了，卡了我一个小时...
2020-07-30 23:55:10
7730
原创 手写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
225
原创 解决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
22761
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人