- 博客(58)
- 收藏
- 关注
RSS订阅原创 前端面试之 options 请求详解
options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"*"）使用该方法。(简而言之，就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持
2022-06-15 15:40:05
3488
2
原创 设置了alias以后vscode 点击路径跳转不了，也没有了智能提示路径，也找不到文件引用(Find file references)
设置了alias以后vscode 点击路径跳转不了讲个找文件被哪个文件引用的快捷方法webpack设置快捷访问的别名alias引发问题 点击路径跳转不了，也没有了智能提示路径（输入了“@”后没有提示src文件下的目录）讲个找文件被哪个文件引用的快捷方法右键文件webpack设置快捷访问的别名alias设置resolve: { alias: { //这样设置就可以直接在组件使用‘@/’直接访问src '@': path.resolve('src'),
2022-03-21 10:58:13
2903
1
原创 React 设置className数组，多个类名
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。比如说有一个固定样式"title":<div className="title">标题</div>，然后还要一个点击高亮的样式:<div className={index === this.state.active ? "active" : null}>标题</div>不能这样写：<div className="title" className={ind
2021-11-08 19:45:01
3967
原创 docker client must be run with elevated privileges to connect
docker client must be run with elevated privileges to connect 必须以提升的权限运行客户端才能连接windows运行docker的时候提示权限不足，首先看下自己是不是用管理身份打开的powershell （在运行那里搜索powershell 然后有管理身份运行）还是不行的话 在命令行输入cd “C:\Program Files\Docker\Docker”（自己安装docker的目录）执行./DockerCli.exe -SwitchD
2021-04-13 11:54:46
5065
3
转载 【探索】NodeJS中间层搭建——楔子
前言最近碰了个壁，公司开发的一个新项目里我大胆地提出要前后端完全分离，用JavaScript模板引擎、ajax、路由等技术替代繁琐的前后端混合的业务逻辑，项目进行到一半前辈提出来仅仅靠前端的力量无法满足公司对SEO的要求。是放弃之前的工作重新改用后端velocity模板引擎来渲染页面，把工作重心转交给Java后端，还是坚持走全后端分离路线但是另辟一条蹊径呢？ 最后又来了个大胆的决定——用nodeJS搭一个中间层来渲染数据，弥补前端模板引擎和路由无法做到的SEO友好性工作。年轻就是任选，哈哈 _前后端分离
2021-03-17 17:52:27
357
转载 什么是回流，什么是重绘，有什么区别？
什么是回流，什么是重绘，有什么区别？html 加载时发生了什么在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而
2021-02-23 16:43:38
221
转载 跨域问题Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origin
跨域问题Access to XMLHttpRequest’'from origin '’ has been blocked by CORS…Access-Control-Allow-Origin跨域问题解决方案：CORSAccess to XMLHttpRequest at ‘’ from origin '’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check:
2021-01-18 13:55:54
1747
2
转载 Vue项目Webpack优化实践，构建效率提高50%
Vue项目Webpack优化实践，构建效率提高50%vue.jswebpack发布于 2018-12-24公司的前端项目使用Vue框架，Vue框架使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分享。1、缩小文件的搜索范围1.1、优化Loader配置由于Loader对文件的转换操作很耗时，所以需要让尽可能少的文
2020-11-27 15:56:51
438
转载 前端安全编码规范
前端安全编码规范来源：待你如初https://segmentfault.com/a/1190000037657222前言随着互联网高速的发展，信息安全已经成为企业重点关注焦点之一，而前端又是引发安全问题的高危据点，所以，作为一个前端开发人员，需要了解前端的安全问题，以及如何去预防、修复安全漏洞。下面就以前端可能受到的攻击方式为起点，讲解web中可能存在的安全漏洞以及如何去检测这些安全漏洞，如何去防范潜在的恶意攻击。1. 跨站脚本攻击（Cross Sites Script）跨站脚本攻击，Cross
2020-11-16 18:02:51
782
原创 解读完这些Vue面试题，拿到了20k的offer
解读完这些Vue面试题，拿到了20k的offer作者：微信公众号前端学苑2020年注定是不平凡的一年，互联网行业的低迷、疫情的发生，对经济影响挺大的。作为有6年前端开发的老司机表示压力山大，“找工作”成了首要任务，最近面试了很多公司，都在问“原理”、“源码”，不能只知道怎么用了，而是更关注深层的技术点。深度、广度是很重要的。本篇文章主要是 “ 从源码角度 - 解读Vue常考面试题 ”。回答面试题的套路1､先说这个点的明确定义，或者是特性；2､再说具体的应用场景；3､说说自己的看法、观点；4
2020-11-16 17:57:38
349
原创 CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryvue后台管理系统启动编译阶段 报内存溢出的错误解决办法全局安装increase-memory-limit 增加node服务器内存限制npm install -g increase-memory-limit进入工程目录，执行：increase-memory-limit完美解决...
2020-11-10 14:27:38
310
2
转载 小前端进腾讯啦！
小前端进腾讯啦！如果大家有看到我上一篇文章，就知道从2020年的年头到年中，我一直在面试者阿里的各种岗位，但是结果都是很无奈，下面的链接，有兴趣的可以看看。https://zhuanlan.zhihu.com/p/223459952zhuanlan.zhihu.com图标从我开始做前端的时候，我就发誓我必须要进BAT，作为一个只是普通大专毕业的我，也没有大厂的工作背景，其实对于30岁甚至35岁之后的发展，个人感觉是很受限制的，所以进入BAT是我一开始的目标，可能这就是曲线救国吧。那么本篇文章
2020-11-03 10:06:50
1145
1
转载 HTTP和HTTPS协议，看一篇就够了
一、前言：先来观察这两张图，第一张访问域名http://www.12306.cn，谷歌浏览器提示不安全链接，第二张是https://kyfw.12306.cn/otn/regist/init，浏览器显示安全，为什么会这样子呢？2017年1月发布的Chrome 56浏览器开始把收集密码或信用卡数据的HTTP页面标记为“不安全”，若用户使用2017年10月推出的Chrome 62，带有输入数据的HTTP页面和所有以无痕模式浏览的HTTP页面都会被标记为“不安全”，此外，苹果公司强制所有iOS App在20
2020-10-21 09:51:08
319
原创 HTTP GET 和 POST 有什么区别？
首先最直观的是语义上的区别。而后又有这样一些具体的差别:1.从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。2.从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。3.从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息。4.从幂等性的角度，GET是幂等的，而POST不是。(幂等表示执行相同的操作，结果也是相同的)5.从TCP的角度，GET 请求会把请求报文一次性发
2020-08-06 11:23:34
156
原创 快速搭建koa+mysql项目 两分钟上手
快速搭建koa+mysql项目 两分钟上手前言Koa 作为 Express 原班人马打造的新生代 Node.js Web 框架，自从发布以来就备受瞩目。在这一篇文章中，我们将手把手带你开发一个简单的用户系统 REST API，支持用户的增删改查以及 JWT 鉴权，从实战中感受 Koa2 的精髓，它相比于 Express 做出的突破性的改变。我们将选择 TypeScript 作为开发语言，数据库选用 MySQL，并使用 TypeORM 作为数据库桥接层。主题下面是小弟整理的一个小demo,使用方法很
2020-07-30 16:14:20
592
原创 阿里 P6 水平自测，看看自己什么水平!
关注前端人原文:《阿里巴巴淘系技术》知乎问答本篇文章将根据阿里P6职级对标需要掌握的技术程度和技能要求,文章内容比较长，请话几分钟时间认真静下心看看，对比下自己现在所掌握的情况，也就能大概预估出自己所处技术水平，和自己欠缺的部分,记得关注公众号哦1.熟练掌握JavaScript。初级：JavaScript各种概念都得了解，《JavaScript语言精粹》这本书的目录都得有概念，并且这些核心点都能脱口而出是什么。知道组合寄生继承，知道class继承。知道怎么创建类function + class
2020-07-30 08:29:45
1065
原创 Vue中computed和watch的区别
Vue中computed和watch的区别计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默
2020-07-22 19:29:55
173
转载 vue的双向绑定原理及实现
vue的双向绑定原理及实现前言使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：代码： 效果图：是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。由于本文只是
2020-07-16 19:31:18
156
转载 深入理解浏览器的缓存机制
深入理解浏览器的缓存机制一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应
2020-07-15 19:02:05
224
转载 浅谈vue-router原理
浅谈vue-router原理…, 下面这种路由表的写法比较优雅，我把路由单独写在一个文件routes.js .router／routes.js 文件代码```goconst routes = [ { path: '/', redirect: '/recommend' }, { path: '/recommend', component: () => import('../components/recommend/view.vue') },
2020-07-14 19:31:51
374
转载 vue核心之虚拟DOM(vdom)
一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回
2020-07-09 19:00:20
237
转载 写给初中级前端的高级进阶指南（万字路线）
前言以下文章来源于公众号前端从进阶到入院 ，作者ssh前端由于公众号文章不允许外链，需要跳转文中链接的同学可以在脚注里找到各个的资源链接，也可以通过点击阅读原文更加方便的跳转链接。我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，
2020-07-07 09:44:34
805
原创 这么全面的Vue开发技巧，vue指令
前言本文来自公众号程序员黑叔Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context()1.场景:如页面需要导入多个组件,原始写法:import titleCom from ‘@/components/home/titleCom’import bannerCom from ‘@/components/home/bannerCom’import cellCom from ‘
2020-07-07 08:58:28
332
原创 如何使用 Webpack 实现模块化打包？
目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup，我们以 Webpack 为例：Webpack 作为一个模块打包工具，本身就可以解决模块化代码打包的问题，将零散的 JavaScript 代码打包到一个 JS 文件中。对于有环境兼容问题的代码，Webpack 可以在打包过程中通过 Loader 机制对其实现编译转换，然后再进行打包。对于不同类型的前端模块类型，Webpack 支持在 JavaScript 中以模块化的方式载入任意
2020-07-05 10:00:30
603
转载 如何使用 Proxy 来代理 JavaScript 里的类
如何使用 Proxy 来代理 JavaScript 里的类Proxy 对象（Proxy）是 ES6 的一个非常酷却鲜为人知的特性。虽然这个特性存在已久，但是我还是想在本文中对其稍作解释，并用一个例子说明一下它的用法。什么是 Proxy正如 MDN 上简单而枯燥的定义：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。虽然这是一个不错的总结，但是我却并没有从中搞清楚 Proxy 能做什么，以及它能帮我们实现什么。首先，Proxy 的概念来源于元编程。简单的说，元编
2020-07-04 12:09:07
233
转载 2020三元同学春招阿里淘系、阿里云、字节跳动面经 & 个人成长经验分享 | 掘金技术征文
原博客地址 https://juejin.im/post/5e7d4e8b6fb9a03c6422f112本人今年 211 本科大三下，掘金六级博主，最近投实习，一共投了三家，阿里的淘系和阿里云，字节跳动的抖音，当然都是找人内推的，结果简述如下:淘系二面通过，但入系统只能选择一个，后来选择了阿里云；阿里云走完了五轮面试，现在等 offer ；字节跳动抖音三轮技术面+一轮HR，现在已经收到了前端架构组的 offer。首先把面经分享给大家，由于技术水平和经历的不同，我不敢保证我的面经问题对你有任何的参
2020-07-03 18:33:27
4443
转载 普通函数function和箭头函数ES6 ()=」{}的区别
~~普通函数function和箭头函数ES6 ()=>{}的区别~~箭头函数：let fun = () => { console.log('lalalala');}普通函数：function fun() { console.log('lalla');}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。（1）箭头函数
2020-07-03 09:58:07
315
原创 超级实用的 ES6 特性
这篇文章介绍了一些特性，在我看来，一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性。1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：let firstHalf = [ one , two ];let
2020-07-02 18:15:56
185
原创 v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？
v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？大家都知道v-for的优先级肯定是比v-if高的，那么有思考过同时用的话会导致什么问题吗？当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>
2020-07-01 19:17:58
1032
原创 JS数组的所有方法（非常实用）
JS数组的所有方法（非常实用）作者：幻灵尔依https://juejin.im/post/5d71fff5f265da03e4678328用不好数组的程序猿不是一个好猿，我说的~前段时间接手一个项目，逻辑晦涩难懂，代码庞大冗余，上手极其困难。很大的原因就是数组方法使用不熟练，导致写出了很多垃圾代码，其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技（奇巧淫技主要是reduce~）。数组操作首先要注意且牢记splice、sort、reverse这3个常用方法是对
2020-06-24 18:34:37
1754
转载 最全Web前端面试题汇总 笔试题汇总 JavaScript HTML css
最全Web前端面试题汇总 笔试题汇总 JavaScript HTML css前言本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！面试有几点需注意：1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方 向↑。2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以
2020-06-23 19:38:43
7545
原创 element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱问题
element-ui el-table组件的fixed列固定后样式高度错乱问题代码如下<el-table-column align="center" label="操作" width="180" fixed="right" > <template
2020-06-23 17:31:15
9840
2
原创 JavaScript reduce() 方法使用
定义和用法reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数参数 描述function(total,currentValue, index,arr) 必需。用于
2020-06-16 19:22:02
145
原创 前端跨域方式和原理
jsonp跨域jsonp是一种跨域通信的手段，它的原理其实很简单：利用由于使用script标签的src属性，因此只支持get方法function jsonp(req){// 动态创建script标签var script = document.createElement(‘script’);var url = req.url + ‘?callback=’ + req.callback.name;script.src = url;document.getElementsByTagName(‘he
2020-06-16 08:57:45
200
原创 JSON.stringify() 对象系列化的各种用法 JSON.parse()用法
JSON.stringify() 玩出新花样，太腻害了译者 / zoomdong阅读本文需要 3分钟前言JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。作为一名 JavaScript 开发人员，JSON.stringify() 是用于调试的最常见函数。但是它的作用是什么呢，难道我们不能使用 console.log() 来做同样的事情吗？让我们试一试。//初始化一个 user 对象const user = {“name” : “Pra
2020-06-16 08:45:45
666
转载 前端每日一题：手写async await的最简实现（20行搞定）！阿里字节面试必考
手写async await的最简实现（20行搞定）！阿里字节面试必考前言如果让你手写async函数的实现，你是不是会觉得很复杂？这篇文章带你用20行搞定它的核心。经常有人说async函数是generator函数的语法糖，那么到底是怎么样一个糖呢？让我们来一层层的剥开它的糖衣。有的同学想说，既然用了generator函数何必还要实现async呢？这篇文章的目的就是带大家理解清楚async和generator之间到底是如何相互协作，管理异步的。示例const getData = () =>
2020-06-11 19:24:49
304
原创 尤雨溪：重头来过的 Vue 3 带来了什么？
尤雨溪：重头来过的 Vue 3 带来了什么？ 尤雨溪 高级前端进阶 今天作者：尤雨溪，翻译：CSDN在过去的一年里，Vue团队一直在开发Vue.js的下一个主要版本Vue 3，我们希望能在2020年上半年将其发布（在撰写本文时，这项开发工作正在进行中）。重写Vue新的主要版本的构想是在2018年底形成的，当时Vue 2的代码库大约已有两年半的运行历史。这看起来不像是通用软件生命周期中的一段很长的时间，但在这段时间里，前端环境发生了巨大的变化。两个关键的因素导致了我们考虑重写Vue新的主要版本：主流
2020-06-11 18:50:37
220
原创 前端每日一题：从输入网址（url）到浏览器呈现页面内容，中间发生了什么？
前端每日一题：从输入网址（url）到浏览器呈现页面内容，中间发生了什么？从输入网址到页面呈现这个过程大致可分为以下这几个部分：网络通信页面渲染1.网络通信1.1输入网址当我们在浏览器的地址栏输入网址例如(https://www.zhihu.com/)，https://代表使用的传输协议，www.zhihu.com代表服务器地址，zhihu.com代表域名。一个完整的URL包括协议、服务器地址(主机)、端口、路径https://www.zhihu.com/1.2 域名解析域名解析的过程实际上
2020-06-09 19:00:40
338
转载 一位前端 P7 大佬的面试经验分享
个人近期面试情况 一位前端 P7 大佬的面试经验分享今年二月以来，我的面试除了一个用友的，基本其他都被毙了，可以说是非常残酷的。其中有很多自己觉得还面的不错的岗位，比如百度、跟谁学、好未来等公司。说实话，打击比较大。情况基本上是从三月开始好起来的，这个时间点，可能疫情快过去了，国家也开启了接近40万亿的基础建设计划，在这个时间断，面试的几个代表性的公司，包括腾讯、饿了么、宝宝树、旷世科技等等，基本都成了。最终，就在三月9号，饿了么刚给我确认了p7的职位。也算自己到了另一个奋斗的阶段了。对自己的经历，做
2020-06-05 17:25:19
597
原创 前端每日一题：什么是防抖和节流？有什么区别？如何实现
防抖就是有时候在一个输入框快速输入的时候就会一直请求后端接口，这样会造成内存消耗和数据一直变化抖动触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，思路：每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输
2020-05-28 18:32:23
368
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人