- 博客(86)
- 收藏
- 关注
RSS订阅原创 canvas应用之前端实现为图片添加水印功能
前言最近翻看面试题目，无意中发现了这个题目。所以自己就写一个demo。感觉很有趣，特分享出来。实现思路我们分析一下，什么叫图片添加水印？常见的添加水印都是在图片上面添加一个图层（内容：防伪标识或者是公司的logo之类）。我们去淘宝找人设计的话，一般都是给添加了水印的图片。只要不给你原型图，基本上无法去除水印。写到这里我们基本上可以判断，所谓的水印技术，就是两张图片。一张是我们的原图，另一种就是水印图片，然后水印图片就是那种透明背景的图片，这样两张图片叠加，既可以看见原图的内容，还加了标识。方向确
2021-04-01 14:10:50
603
原创 html-webpack-plugin 又出幺蛾子 | 一次解决bug的过程
背景介绍先说一下这一次出现问题的需求背景，在顺便引出 html-webpack-plugin。最近在做监控，而我需要监控到文件加载错误，并实现上报。熟悉的小伙伴，已经知道，这是一个很容易实现的功能 <script> window.addEventListener('error', function(event) { console.log(event) },true) </script> <script src="cutex/xuan.js
2021-03-28 00:41:57
1212
1
原创 春招路上的疑惑之你应该避开这些雷
前言金三银四已经到来，各大厂也都开始了招聘抢人。做为长期潜伏在各个内推，求职群中我，偶尔为了可怜的内推金，帮小伙伴们内推一波。遇到有想法的同学，倒是也可以一起聊几句，顺便解决他们的一些小疑惑。所以，我收集了以下的一些问题。尽量用聊天的方式解答大家的疑惑，更希望可以帮助到大家。简历应该如何写？各种花里胡哨的套路我就不说了，来点高频的，有用的技术栈是关键，你可以写的复杂，也可以写的简单，关键是要做好写出来被问的准备。比如写熟悉GIT协同开发，然后仅仅会用 git status,git commit
2021-03-15 23:26:35
286
3
原创 前端大文件上传，断点续传（附源码）
前言无论是面试还是实际工作，我们都会遇到大文件上传的问题。事实上，在我之前的面试中，也被问到上传大文件（Excel）如何处理，当时答的磕磕巴巴，直接导致整个面试以失败结束。最近想起了整个事情，花了点时间，整理出这个demo，当然了，整篇文章，不仅仅讲思路过程，最后也会附送源码前端：Vue.js Element-Ui后端：node.js express fs思路前端大文件上传将大文件转换成二进制流的格式利用流可以切割的属性，将二进制流切割成多份组装和分割快同等数量的请求块，并行或串行
2021-02-28 14:00:24
951
2
原创 我因为不会http/3.0，当场被面试官怼（凶）
1、导读注意，这不是标题党，这是发生在我身上的真实故事。这是某大厂二面，上来让我讲一下http/3.0算法。作为一个候选人，我当然不能说不会了
2021-02-08 22:13:55
339
原创 21年，校招前端应该如何准备项目冲击大厂？？？
1、前言说明一下，本文面向的读者是自我感觉实力还不错，却不知道如何准备项目，又或者手里只有一些学校的课设小demo之类的项目，但是呢！！！又想冲击一下大厂或者保一下中厂的同学。以下内容为本人亲身经历整理出来的，希望对各种冲击春招的学弟学妹提供点帮助。2、准备一个什么样项目如果你目前什么项目也没有，又没有什么花里胡哨的想法。又或者想法不少，但没时间，没能力做出来。那么，我建议你…花点时间做一个个人博客项目。一个 前端 + 后端 + 数据库 + 上线 一条龙下来的个人项目。个人博客虽然简单。但，麻雀
2021-02-01 23:22:57
641
原创 一个域名究竟可以维护多少个TCP连接？？？
1、答案TCP/1.1 时代 浏览器为每一个域名维护了6个TCP连接TCP/2.0 时代 浏览器为每个域名维护1个TCP持久连接不卖关子，答案放在这里。如果想知道为什么不同版本的 TCP 连接数不同，那么请往下看…2、为什么是六个，而不是其他数字呢？在 HTTP/1.1 时代，为了提升并行下载效率，浏览器为每个域名维护了 6 个 TCP 连接。这很好理解，我们有100个资源，多线程（6个）去找服务端去要，肯定比单线程（1个）快的多。那么问题来了，既然多线程这么好，为什么域名不多维护几个呢？7个，
2021-01-30 18:12:27
1983
原创 不要再看loader原理了，自己写一个就什么都明白了
1、loader的作用loader又叫模块转换器。换言之就是将输入到模块到内容按照自己到特性转换输出去（有点像Vue的过滤）。同时，所有的loader的功能都是单一的，他们只会关心自己的输入与输出。同理，loader有链式调用转换的功能（有点像promise then，想要了解这一块的同学，可以看我的另一篇文章 手撕代码之Promise的实现（附源码））2、多个loader使用规则从右向前从下向上从右向前module.exports = { module: { rules: [
2021-01-24 22:51:07
2645
原创 2021的你该如何准备校招
1、前言虽然我们经常说，金三银四。但是当前时间点1月份末，进入二月份。开始准备2021年春招，也不算太早。接下来就通过我自己的亲身经历，给大家一个模版和建议，希望对大家有些帮助。祝各位好运连连，春招斩获大厂offer。2、温馨提示1、不排除有些人 能力强 + 运气好。春招一个星期完成。但是大多数人还是要做好长期战斗准备。2、你永远不要等准备好了才去面试。因为你永远不可能准备好。3、希望有一个并肩战斗的兄弟，陪你一起。你们可以相互打气。4、别轻言放弃，整个毕业环节，你一共有大的招聘机会三次。大三
2021-01-23 23:23:37
234
原创 手撕代码之Promise的实现（附源码）
ES6已经普及很多年了，我们早已过去了callback时代。公司要求也不再是停留在promise的使用上了。所以本文带大家一起从零开始写自己的 Promise,剖析其内在原理。1、promise 基本结构1.1 状态我们都知道promise 有三种状态PendingResolvedRejected并且promise 的状态是不可逆的1.2 参数每一个 Promise 都有两个 函数参数，分别是resolved 成功状态rejected 失败状态1.3 方法通过查看 P.
2021-01-11 21:59:50
354
原创 正则下，全角字符，半角字符如何匹配
正常的开发情况下，我们很多情况下，都会碰到匹配数字字母的情况。我们可以如下的写法：[0-9] 匹配数字[a-zA-Z] 匹配字母[\w] 匹配字母数字下划线[\w^\_] 匹配字母数字正常情况下，我们这样写，理论上没有任何问题，这个时候，你可以复制下面的代码到浏览器尝试一下，是否匹配的到const a = '0123456789'const b = 123const c = '１２３４５６７８９０'const d = '１'const rule = /[\w^\_]
2020-12-24 21:21:21
8888
2
原创 前端正则表达式入门
无论是前端还是后端，我们开发中，经常会遇到字符串的查找、匹配、替换、检索等操作。以JavaScript为例，对一大段的字符串进行替换，也许需要进行进行一次循环次啊可以，很是麻烦。所以，我们大多数是由正则表达式进行这部分工作。1、前言本人资质愚钝，在加上生性懒惰。在很长一段时间中，难以入门正则表达式，看各种教材老是不得法门。工欲善其事必先利其器，我写了一个简单的正则表达式模拟器，上传到Github，其中也有一些或入门或常见的例子（正则表达式）。强烈建议大家在学习之前，下载工具，避免了不断测试的麻烦。点.
2020-07-27 22:58:48
181
原创 一文搞懂HTTP面试
前言无论是前端，还是后端。面试中大概率都会被问道HTTP。根据自己的经验，同时也收集了大量的资料。总结出下面几类题目。1、HTTP基本概念。注:也许问的少，但是我们应该清楚状态码请求字段2、HTTP请求类型。GET和POST有哪些区别3、HTTP缓存状态码大概率的304，接着缓存，同时就会涉及到请求字段4、HTTP的历史0.9 1.0 1.1 2.0 3.0各阶段增加哪些内容，优缺点5、五层模型虽然是应用层 HTTP协议6、HTTPS1 HTTP的基
2020-06-02 17:22:16
485
2
原创 前端面试之浏览器渲染（十）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。渲染过程上面这个图的基本流程如下：1、解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是DOM Tree2、解析css，生成CSSOM(CSS规则树)3、把DOM Tree 和CSSOM结合.
2020-05-15 16:50:36
344
原创 前端面试之类型那些事（九） --- 基本类型、引用类型、类型转换、类型检测
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。我们都知道JS是一个弱类型的语言。在过去仅仅是var代替了所有，ES6之后又引入了let，const。虽然在写的时候，没有那么多是区别，但是实际计算的时候，该是什么还是什么。基本类型，引用类型总体来说，JS分为基本类型，引用类型。.
2020-05-14 19:08:54
180
原创 前端面试之安全那些事（八）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。XSSXSS，又叫跨站脚本攻击。攻击方式攻击者通过在页面输入JS脚本代码，恶意篡改客户端网页代码，从而在用户浏览网页的时候，获取用户数据，而达到自己想做的事情的目的。一般攻击者常干以下的事情：获取被攻击者本地数据，比如cooki.
2020-05-14 17:09:37
159
原创 前端面试之原型链那些事（七）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。创建对象有几种方法如何判断一个变量是不是数组原型、构造函数、实例、原型链instanceof 原理new 运算符手写一个Jquery，考虑插件和扩展性Class的原型本质，怎么理解原型和原型来年的图示属性和方法的执行规则.
2020-05-11 21:37:03
363
原创 前端面试之浏览器运行机制EventLoop（六）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。进程与线程进程我们常常说JS是单线程的，有没有想过为什么呢？我们学习操作系统的时候说的进程与其又是什么关系呢？虽然面试官不...
2020-05-06 01:19:23
531
原创 前端面试之HTTP缓存的那些事（四）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。HTTP缓存大概会被问到这些方面说一下HTTP的强缓存，协商缓存吧什么叫强缓存，协商缓存前端cookie，localS...
2020-04-22 01:46:49
322
原创 面试面试之Vue渲染过程（双向绑定原理）（三）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。Vue双向绑定的核心是数据劫持结合发布订阅者模式的方式，通过Object.defineProperty()这个原生的API来劫...
2020-04-21 19:29:07
823
原创 前端面试之跨域（二）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。前端跨域常见问题请你谈一谈跨域吧跨域如何解决有哪些方法先说明一下前端为什么会有跨域。浏览器的同源策略规定只有资...
2020-04-20 19:35:41
178
原创 前端面试之内存的那些事情（一）
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。首先我罗列一些我自己在面试中遇到的问题，以及我搜集到的或者我认为需要了解的问题。请你说一下JS的垃圾回收机制吧。什么是垃...
2020-04-19 22:50:22
216
原创 JS数组常用方法总结(一)
join() reverse()sort()concat()slice()splice()push()pop()unshift()shift()toString()toLocaleString()forEach()map()every()some()reduce()reduceRight()indexOf()lastIndexOf()
2020-04-18 13:28:13
169
原创 JavaScript代码模块化设计（ES6）
使用JS写代码的我们常常将逻辑相同的代码提取出来 写一个模块比如// test1.jsexport const x = 1export let y = 1// test2.jsimport { x,y } from './test1.js这个时候就可以在test2.js中使用 test1.js的产量以及逻辑了当然了，如果仅仅有一个逻辑暴露在外，我们还可以使用如下的方式来写//...
2020-03-29 18:07:23
157
原创 vue 回到顶部 backTop（自定义组件）
使用方式<back-top :topHeight = 'topHeight' ,/>使用参数参数类型是否必填默认描述topHeightNumber否500初始出现的高度speedNumber否10初始返回的速度setSpeedNumber否20加速度rightNumber否60距离浏览器右侧的距离...
2020-03-21 19:44:18
2354
原创 Web前端的单位（px，rem，vh..）
1、px这个应该不用多说，只要接触了前端这个单位是一定会的，了解的。唯一需要说的就是像素px是相对于显示器屏幕分辨率而言的。2、百分比这个我们在实际开发中也常常会使用，我自己在做布局的时候，常常会用到它。这个也不用太多解释。比如我们设定宽度是 80%; 在浏览器大小是100px的时候，宽度自然是800px。那么理所当然的，如果浏览器大小变成了1500px，宽度自然也就变成了1200px3...
2020-03-21 15:02:09
1639
原创 JS之防抖（debounce）和节流（throttle）以及其使用场景
防抖（debounce）当事件高频率触发时（keyup事件，scroll事件，浏览器大小），为了不加重浏览器的负担，而仅仅在其结束后的一段时间再进行相应的操作 // 最实在的写法 let timer = null ipt.addEventListener('keyup',function(event) { // 如果有清空 if (timer) { clearTimeo...
2020-03-19 23:03:46
444
原创 JS的事件事件绑定的通用函数（含事件代理的处理）
最简单的事件绑定的通用函数 // 通用事件绑定函数 function bindEvent(elem,type,fn) { elem.addEventListener(type,fn) } const div1 = document.getElementById("div1") bindEvent(div1,'click',event => { console.log("点...
2020-03-19 16:42:17
2413
原创 JavaScript的数据类型的检测
在说JavaScript的数据类型的检测前，要知道有哪些数据类型值类型：Number，String，Boolean，undefined，null，Symbol（ES6）引用类型：Object，Date，Array，Functionjs的数据检测手段// 常用的三种typeofinstanceofObject.prototype.toString()// 不常用的两种constru...
2020-03-19 01:20:09
101
原创 前端面试之闭包
首先，我们就要明白什么是闭包闭包：指外部可以访问函数内部变量的一种实现方法，通过闭包让我们将函数内部外部联系到一起闭包的两种形式·1、函数作为返回值2、函数作为参数闭包的形式// 函数作为返回值// 实例一function test() { let a = 1; return function() { return a; }}let temp = t...
2020-03-18 21:47:05
496
原创 ajax的那些事以及跨域问题的解决
为了介绍ajax，手写先来一段ajax代码吧手写ajax// 一个最简单的get ajax请求const xhr = new XMLHttpRequest()xhr.oend("GET","/路径"，true)xhr.onreadtstatechange = function() { if(xhr.readyState === 4) { if(xhr.status === 200...
2020-03-18 00:32:54
172
原创 前端页面性能优化的几种方式
先说一下整体思想，使用缓存：DOM缓存，浏览器缓存，请求缓存减少请求：少请求就意味着变化少加载要考虑有限顺序：重要的先加载，不重要的后加载以下就是我对这些的阐述，没有分类，想到什么就写了什么，不是很完整，欢迎补充一、资源合并，减少JS的请求加载次数二、将CSS放在请求的最上面，将JS请求放在HTML最下面这样可以让用户在最短的时间内看到画面，也避免了JS中操作DOM元素，导致页面重排...
2020-03-17 12:25:46
771
原创 程序员必知的HTTP知识，TCP三次握手，四次挥手，TCP与UDP的相同与区别（一）
TCP三次握手协议1、客户端（client）想要建立连接，向服务端发送消息（server），SYN，等待服务端的响应。2、服务端在接收到客户端的SYN包后，会对客户端进行ACK响应，同时也会发送自己的SYN包，即发送SYN+ACK包。3、客户端收到服务端的响应SYN后，向服务端发送确认包ACK后。此包发送完毕，代表TCP三次握手完成。个人理解：之所以要进行反复确认，就是两端（客户端，服务端...
2020-03-14 23:05:09
163
原创 前端必知必会的存储cookie,sessionStorage,localStorage的区别及应用场景
前端有三种存储方式，分别是cookie sessionStorage localStorage其中sessionStorage，localStorage是H5的新特性，这一点是要明白的。cookie特性cookie的存储的比较小，大概只有4kb左右。它主要是为了与客户端交传递信息（存在headers请求头体）。每一次请求都会主动带上cookie的内容。如果在浏览器中设置了cooki...
2020-03-11 00:49:19
1122
原创 Js(二) 从es5（callback）到es6（promise）回调函数的变化以及应用理解
在说清楚如何写回调函数的时候，首先我觉得应该说清楚，什么是回调，为什么会产生回调，回调的应用场景。大多数的回调场景发生在加载资源这一块，比如加载script，加载图片，再比如从后端请求回数据，然后对请求回来的数据分析。又比如script，图片加载失败，这个时候我们要清楚，要做出一个最基本的提示。如果这个时候有一些不太了解浏览器加载的人会有如下的疑惑let data = function() ...
2020-02-27 16:30:41
1275
原创 Js(一) 箭头函数详解，以及箭头函数中this的变化
在ES5的时候定义函数有以下两种方法1 var obj = function() { console.log("这是我定义的一个函数")}2 function test（） { consoe.log("这是一个函数")}在ES6的时候对于函数的定义有了改变 箭头函数let obj = () => { console.log("这是我定义的箭头函数")}let t...
2020-02-26 18:39:50
342
原创 Vue.js中的键盘事件失效问题
场景在登录场景中，我们输入完账号密码以后，需要点击确定提交按钮提交信息，同样的也可以点击回车（enter）错误的写法 <el-button @click="onSubmit" @keyup.enter="onSubmit">登录</el-button>这种的写法点击enter是没有效果的正确的写法<script> export default{...
2019-12-13 13:34:14
1472
2
原创 微信小程序GIT的账号注册，前后连接以及git的简单使用
不说废话直接上干货，本篇博客分为两部分 ，一部分是给git账号密码的设定以及连接。第二部分是git的简单使用。第一部分首先自己的电脑上要有git环境,具体git环境如何搭建，请查看其他优秀的博客。接下来就是小程序自己账号的设定了。新建一个项目，点击右面的版本管理就会进入如下的界面。点击右上角的代码管理，就会进入微信小程序git管理的官网。官网网址小程序GIT官网按照流程注册完毕后，回到编...
2019-11-15 22:19:30
2627
原创 cnpm淘宝镜像安装
前端工作者学习者，通常会使用npm来安装各种东西。npm的服务器在国外，一般来说下载的速度还是比较慢的。所有就有了淘宝镜像这一说法。windows+R 命令行输入cmd进入命令行，输入以下命令npm install cnpm -g --registry=https://registry.npm.taobao.org安装完成后会有如下提示+ [email protected] 6...
2019-11-10 15:29:39
428
原创 ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed
vue项目我的这个版本是 3.10.0module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'}这里面是一个坑在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。改成module.exports = { publi...
2019-11-04 19:32:05
25074
20
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人