- 博客(23)
- 收藏
- 关注
RSS订阅原创 为什么 token可以防止 csrf?
Token被用户端放在Cookie中（不设置HttpOnly），同源页面每次发请求都在请求头或者参数中加入Cookie中读取的Token来完成验证。CSRF只能通过浏览器自己带上Cookie，不能操作Cookie来获取到Token并加到http请求的参数中。...
2021-06-18 17:51:54
613
2
原创 JWT Token存储在Cookie还是LocalStorage
JWT 是将web 应用无状态化的一种方式。1. 首先拿到JWT TokenHTTP/1.1POST /tokenHost: galaxies.comContent-Type: application/x-www-form-urlencodedusername=abc&password=password服务器返回HTTP/1.1 200 OK{ "access_token": "eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGx...
2020-11-05 11:26:25
2558
原创 SubType.prototype.constructor = SubType原因
constructor属性不影响任何JavaScript的内部属性。instanceof检测对象的原型链，通常你是无法修改的（不过某些引擎通过私有的__proto__属性暴露出来）。constructor其实没有什么用处，只是JavaScript语言设计的历史遗留物。由于constructor属性是可以变更的，所以未必真的指向对象的构造函数，只是一个提示。不过，从编程习惯上，我们应该尽量让对象的constructor指向其构造函数，以维持这个惯例。...
2020-11-01 10:45:14
272
转载 图解 Vue 响应式原理
最近部门分享，有同学提到了 Vue 响应式原理，大家在讨论时，发现一些同学对这一知识理解还不够深入，不能形成一个闭环，为了帮助大家理解这个问题，我重新过了一下 Vue 源码，并整理了多张流程图，便于大家理解。 Vue 初始化 模板渲染 组件渲染 本文 Vue 源码版本：2.6.11，为了便于理解，均有所删减。本文将从以下两个方面进行探索： 从 Vue 初始化，到首次渲染生成 DOM 的流程。 从 Vue 数据修改，到页面更新 DOM 的流程。 ...
2020-09-24 09:17:37
173
原创 详解vue的diff算法
前言我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM，当v
2020-09-18 11:25:45
185
原创 JavaScript深入理解之继承
JavaScript深入理解之继承写在前面继承是面向对象语言中最重要的一个概念。许多面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法和签名，而实现继承则继承实际的方法。由于在 JavaScript 中函数没有签名，因此无法实现接口继承，只支持实现继承。原型链在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。这一部分已经在前面总结过了，就不再多说了。缺点：.
2020-09-11 17:21:57
218
原创 git ssh key配置
git ssh key配置git clone支持https和git（即ssh）两种方式下载源码：当使用git方式下载时，如果没有配置过ssh key，则会有如下错误提示：下面就介绍一下如何配置git的ssh key，以便我们可以用git方式下载源码。首先用如下命令（如未特别说明，所有命令均默认在Git Bash工具下执行）检查一下用户名和邮箱是否配置（github支持我们用用户名或邮箱登录）：git config --global --list 笔者的机器显示信息如下（已配.
2020-09-11 17:20:43
127
原创 git 使用http 和 ssh 区别
git 使用http 和 ssh 区别在管理Git项目上，很多时候都是直接使用https url克隆到本地，当然也有有些人使用SSH url克隆到本地。这两种方式的主要区别在于：使用https url克隆对初学者来说会比较方便，复制https url然后到git Bash里面直接用clone命令克隆到本地就好了，但是每次fetch和push代码都需要输入账号和密码，这也是https方式的麻烦之处。而使用SSH url克隆却需要在克隆之前先配置和添加好SSH key，因此，如果你想要使用SSH ur.
2020-09-11 17:18:44
1472
原创 深入理解JavaScript原型和原型链
1. 前言关于JS原型和原型链我之前刚学js就有写过一篇学习笔记形式的博客，但前两天翻出来一看——什么鬼，这是我写的吗？自己都看不懂了，于是我重新整理思路，今天「前端料包」带来第四篇。原型和原型链是js中的难点也是重点，有句话说，没理解透原型和原型链，就算还没有真正入门的前端。并且原型和原型链会是面试中必不可少的话题。看完这篇相信你能对原型和原型链会有个深刻的理解。如果觉得本文对你有所帮助请点亮左边的????，不甚感激????2. 函数对象JS所有对象分为函数对象和普通对象。凡是通过
2020-09-10 09:22:42
184
原创 关于ES6中箭头函数this和普通函数this指向的问题理解
最近在看ES6，发现对箭头函数的this和普通函数的this理解不是很明确，花了一些时间，将自己理解的思路整理一下，如有错误，欢迎指正： 先说一下普通函数中的this，普通函数中的this表示调用此函数时的对象，如下例：var x=11;var obj={ x:22, say:function(){ console.log(this.x) }}obj.say();//console.log输出的是22调用say函数的是对象obj，所以this指代对...
2020-08-25 18:17:58
304
原创 JS面向对象编程之：封装、继承、多态
一、封装 （1）封装通俗的说，就是我有一些秘密不想让人知道，就通过私有化变量和私有化方法，这样外界就访问不到了。然后如果你有一些很想让大家知道的东西，你就可以通过this创建的属性看作是对象共有属性和对象共有方法，这样别人知道你的公共的东西啦，不止如此，你还可以访问到类或对象自身的私有属性和私有方法。哇，这种权利好大呀，外面的公共的方法和属性，和内部的私有属性和方法都可以访问到，都有特权啦，因此就叫做特权方法了。看个例子就知道啦。类的内部this上定义的属性...
2020-08-20 16:55:38
541
转载 浅谈JS中的 [] + {}和{} + []
在前几天读到《你不知道的javascript》的类型与文法章节中有看到这两个题目1. []+{} /* [object Object] */2. {} + [] /* 0 */在js中，加法运算的规则很简单，只会触发两种情况:1. number + number2. string + string所以，在JavaScript隐式转换规则中首先会推算两个操作数是不是number类型，如果是则直接运算得出结果。如果有一个数为string，则将另一个操作数隐式的转换为string，然后...
2020-08-19 18:10:16
625
原创 for in 和 for of不同
for in 和for of的区别1 遍历数组通常用for循环ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。Array.prototype.method=function(){ console.log(this.length);}var myArray.
2020-08-16 10:00:38
218
转载 vue双向绑定原理及实现
MVC模式MVC模式以往的MVC模式是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新MVVM模式MVVM模式就是Model–View–ViewModel模式。它实现了View的变动，自动反映在 ViewModel，反之亦然。我对于双向绑定的理解，就是用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。再说细点，就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(inpu
2020-08-16 09:42:19
156
转载 带你深度解锁Webpack系列(优化篇)
前两篇文章中，主要是讲解了Webpack的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对Webpack的配置进行优化。如果你还没有看过前两篇，推荐先阅读《带你深入解锁Webpack系列(基础篇) 》和《带你深入解锁Webpack系列(进阶篇)》├──webpack@4.41.5└──webpack-cli@3.3.10本文对应的项目地址(编写本文时使用)供参考：https://github.com/Yv...
2020-08-05 17:45:23
418
转载 万字长文带你深度解锁Webpack（进阶篇）
1. 静态资源拷贝有些时候，我们需要使用已有的JS文件、CSS文件（本地文件），但是不需要webpack编译。例如，我们在public/index.html中引入了public目录下的js或css文件。这个时候，如果直接打包，那么在构建出来之后，肯定是找不到对应的js/css了。public目录结构├──public│├──config.js│├──index.html│├──js││├──base.j...
2020-08-05 17:43:10
149
转载 4W字长文带你深度解锁Webpack系列(上)
三篇长文，4W余字，带你解锁Webpack，希望读完这三篇文章，你能够对webpack的各项配置有一个更为清晰的认识。1.webpack 是什么？webpack是一个现代JavaScript应用程序的静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。2.webpack 的核心概念 entry: 入口 output: 输出 loader: 模块转换...
2020-08-05 17:34:05
111
原创 websocket 断开重连机制（心跳机制）
一、何为心跳？心跳就是客户端定时的给服务端发送消息，证明客户端是在线的， 如果超过一定的时间没有发送则就是离线了。二、如何判断在线离线？当客户端第一次发送请求至服务端时会携带唯一标识、以及时间戳，服务端到db或者缓存去查询改请求的唯一标识，如果不存在就存入db或者缓存中，第二次客户端定时再次发送请求依旧携带唯一标识、以及时间戳，服务端到db或者缓存去查询改请求的唯一标识，如果存在就把上次的时间戳拿取出来，使用当前时间戳减去上次的时间，得出的毫秒秒数判断是否大于指定的时间，若小于的话就是在
2020-08-04 11:04:26
3220
转载 vue双向绑定原理分析
当我们学习angular或者vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理。简易vue源码地址：https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.definePropert
2020-08-04 10:08:58
136
转载 什么是虚拟 dom，vue核心之虚拟DOM(vdom)
什么是虚拟 dom虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找
2020-07-22 09:58:01
1433
转载 vue的双向绑定原理及实现
vue的双向绑定原理及实现前言使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：代码： 效果图：是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。...
2020-06-30 11:31:09
172
转载 一文带你看懂cookie
一文带你看懂cookie在前端面试中，有一个必问的问题：请你谈谈cookie和localStorage有什么区别啊？localStorage是H5中的一种浏览器本地存储方式，而实际上，cookie本身并不是用来做服务器存储的。但在 localStorage 出现之前，cookie被滥用当做了存储工具，什么数据都放在cookie中，即使这些数据只在页面中使用、而不需要随请求传送到服务端（当然cookie也做了一些限制：大小受限、每个域名下生成的cookie数量受限）。就像CSS中的float，最初被设
2020-06-29 22:53:04
450
转载 什么是event loop
经常会被人问到 你来谈一谈什么是event loop,一开始我是一脸懵逼,慢慢的在网上看到很多贴子 才明白是怎么回事.先看一段代码console.log(0)setTimeout(function() { console.log(1)}, 1000);console.log(2)//打印顺序是 0 2 1js的事件循环我们都知道 js是单线程的原因:。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
2020-06-29 22:50:45
214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人