- 博客(55)
- 收藏
- 关注
RSS订阅
原创 前端架构系列
年底了，打算对这一年中用到的技术以及心得做一个总结。主要分下面几个模块的内容React 全家桶系列 react react-router redux mobx Vue 全家桶系列 vue vue-router vux 打包工具 gulp rollup webpack parcel 代码规范 eslint stylelint co...
2019-12-27 16:37:01
185
原创 OAuth 2.0 通过第三方账号来登录自己的网站
OAuth 2.0 基本概念OAuth 2.0 是目前最流行的授权机制，用来授权第三方应用，获取用户数据。 例如这是我开发的网站 http://edraw.top/，你并没有在我的网站上注册过账号，但是你可以通过 QQ 来登录我的网站，登录之后，我的网站也可以获取到你的 QQ 昵称和头像。 假如你自己做了一个网站，也懒得做注册和登录模块，那你不妨像我一样，利用 OAuth 2.0 接入这些知名的站点，让他们的账号信息为我所用。开发环境我的网站后端是用 nodejs 写的，用的是 eggjs，实际的授权
2021-01-13 17:08:21
750
原创 rrweb 浏览器录制及转视频方案
背景最近在做保险相关的项目，由于医保局的监管要求，用户购买保险的流程必须可以回溯。这样在用户和保险公司之前产生保险纠纷时，就可以有迹可循。比如用户说当时为自己和妻子二人投了保，但是保险公司后台只有一个订单，这时如果只是把后台数据给用户看，用户肯定不会信服。最好的手段就是把用户投保的具体操作录制成视频，在发生纠纷时，直接以视频为证，这样最有说服力。...
2021-01-13 11:30:33
3682
8
原创 账号中心、单点登录、OAuth2.0
OAuth第三方登录只是一种登录方式，它实质上就是 OAth 授权。OAth 的核心就是向第三方应用颁发令牌，然后第三方应用可以通过这个令牌向授权网站获取一些资源，如账号名称。举个例子，现在我要登录 CSDN（https://mp.csdn.net/），大致有三种方式：账号密码登录 微信扫码授权登录 第三方网站授权登录，如百度账号后两种其实都是 OAth 授权登录，我们来看一下怎...
2020-04-17 21:00:38
451
原创 函数式编程
面向对象一切事物皆是对象，通过面向对象的方式，可以把现实世界的事物抽象成对象，现实世界中的关系抽象成类、继承帮助人们对现实实接的抽象和数据建模如果把世界拆分成类和对象，得到的就是面向对象函数式世界就是由事物和事物之间的关系构成的如果把世界拆分成事物和事物之间的关系，得到的就是函数式纯函数纯函数的原始目的就是计算，不做任何其他事情。多次给它同一个值，输出的值也一定是固定的，可预期...
2020-04-09 16:03:23
104
转载 浅谈编码Base64、Hex、UTF-8、Unicode、GBK等
网络上大多精彩的回答，该随笔用作自我总结； 首先计算机只认得二进制，0和1，所以我们现在看到的字都是经过二进制数据编码后的；计算机能针对0和1的组合做很多事情，这些规则都是人定义的；然后有了字节的概念，8比特一个字节，如01011100就是一个字节； 人定义好计算机的0和1的数据结构做事的时候，如果每个人都用不同的数据结构，不同的定义，就会使得人和人之间让计算机做的事无法统一，也导致无...
2020-04-03 18:10:21
1064
原创 V8 内存管理
一、内存查看console.log( '\n node分配到的总内存 rss: ' + mem.rss, '\n 堆内存 heapTotal: ' + mem.heapTotal, '\n 已使用的内存 heapUsed: ' + mem.heapUsed, '\n node中额外申请到的c++内存: ' + mem.external, '...
2020-04-03 17:25:24
422
原创 浏览器内部结构
https://www.jianshu.com/p/5f1a8f586019浏览器是一个多进程多线程的系统，它会有一个主进程进行任务的调度。有一个第三方插件进程，避免插件崩溃时影响页面内容。然后每个 tab 页面都是一个单独的进程，每个 tab 进程中又有以下几个重要的线程：GUI 渲染现成 JS 引擎线程 HTTP 请求线程 事件触发线程 定时器现成GUI 线程...
2020-03-31 23:07:24
233
原创 websocket 连接过程
首先，websocket属于应用层协议，和 http 一样也是基于 TCP/IP 协议。websocket 连接的建立需要借助 http，连接建立完之后就与 http 无关了。过程Connection:Connection必须设置为Upgrade，表示客户端希望连接升级Upgrade:Upgrade必须设置为WebSocket，表示在取得服务器响应之后，使用HTTP升级将HTTP协议转...
2020-03-30 14:43:39
1572
转载 CommonJS 和 ES6 的模块标准有什么区别
目前主流的模块规范UMD CommonJs es6 moduleumd 模块（通用模块）(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof def...
2020-03-26 14:41:35
462
原创 React 全家桶之 react 性能优化
react 技术栈的使用和原理讲解已经告一段落了，既然已经知道的使用姿势和原理，下面我们来说一说在使用 react 技术栈来开发项目时，有哪些需要注意的地方，或者说如何提升页面的性能。...
2020-03-25 22:46:30
121
原创 js 中的深拷贝
一、JSON.stringify and JSON.parse现使用 JSON.stringify 将 Object 对象转化成基本类型 String，再使用 JSON.parse 将 String 转换成 Object。如var a = { name: '张三' }var b = JSON.parse( JSON.stringify(a) )缺点：不能拷贝 undefined、F...
2020-03-25 13:54:54
89
原创 浏览器缓存总结
最近一直被浏览器的缓存行为所困扰，因此换了一番功夫做一次总结，话不多说直接进入正题。浏览器的缓存策略包括两种：强缓存和协商缓存强缓存强缓存即直接从本地读取缓存副本，不需要向服务器发起请求，这种方式是最快的。HTTP 1.0 使用Expires指定资源的失效时间，如expires:Fri, 14 Apr 2018 00:00:00 GMT。只要发送请求时间是在Expires之前...
2020-03-25 09:51:14
108
原创 cookie、session、token 的区别
1，session 在服务器端，cookie 在客户端（浏览器）2，session 默认被存在在服务器的一个文件里（不是内存）3，session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）4，sess...
2020-03-24 22:31:12
170
原创 CDN 内容分发网络
定义CDN 全称叫做Content Delivery Network，一般我们所说的CDN加速，一般是指网站加速或者用户下载资源加速。比如当我们在访问https://www.taobao.com的时候，我们认为 DNS（域名解析）服务器会淘宝网的服务器 ip 地址解析出来返回给我们，然后我们本地与淘宝服务器建立 tcp 连接，开始发起 http 请求拉取网络资源。但是实际情况并非...
2020-03-24 22:23:57
151
原创 js 事件委托优缺点
优点减少了事件注册，节省了内存，如在 table 上代理所有 tr 的 click 事件 简化了 dom 更新时的事件操作，如现在 table 内增加了一行 tr，不用再为这个 tr 添加事件了缺点事件委托基于冒泡，不冒泡的事件无法委托，如 blur、focus、mouseenter、mouseleave、input、keydown、keyup 可能被中间层阻止 事件会频繁的被调用...
2020-03-24 18:21:21
524
原创 HTTP 系列之 —— 五层因特网协议
因特网协议栈共有五层结构：应用层、传输层、网络层、数据链路层、物理层。数据是从上到下经过一层一层包装之后发送出去的。我们从底层开始说起，这样说到上面的时候就能清楚后面发生的事情了，更加有利于理解 http 请求的流程一、物理层不管你在上层协议中玩出什么花儿来，数据最终还是要通过物理层传出去。在这一层上传输的单元是比特，也就是0和1的电信号二、数据链路层2.1 定义单纯的 0...
2020-03-19 09:17:02
794
原创 HTTP 系列之 —— HTTP 发展史
HTTP 协议是互联网的基础，工作也有好几个年头了，这次准备把 http 协议的知识点仔细的梳理一遍。首先从它的发展史开始吧！HTTP/0.9http 定稿的第一个版本是1991年发布的0.9版，它有以下特点只有一个 get命令 没有 header 等描述数据的信息 服务器发送完内容后，客户端与服务器之间的 tcp 连接就关闭了HTTP/1.0除了 0.9 中定义的 get...
2020-03-16 18:15:10
197
原创 JS 异步编程解决方案：Promise、Generator、Async/Await
Prommise简介回想一下我们使用传统方式（回调函数）是如何来解决异步编程依赖问题的login(param, function() { consloe.log('登录成功，开始获取用户信息') getUser(param, function() { console.log('已经获取到用户信息，现在来获取菜单') getMenu(param, functio...
2020-03-16 14:05:45
311
原创 什么是跨域？为什么要禁止跨域？怎样跨域？
什么是跨域现代浏览器处于安全考虑，都会去遵守一个叫做“同源策略”的约定，同源的意思是两个地址的协议、域名、端口号都相同的情况下，才叫同源。这个时候两个地址才可以相互访问 cookie、localStorage、sessionStorage、发送 ajax 请求，如果三者有一个不同，就是不同源，这时再去访问这些资源就叫做跨域。为什么禁止跨域跨域访问会造成很多安全问题，下面我们来看一...
2020-03-14 11:49:48
3964
原创 文件上传知识点整理
文件上传的方式有多种，在此做个总结，以后用到时方便查询。首先我们先来看一下 form 表单的格式multipart/form-data，它表示互联网上的混合资源，意思是资源是有多种元素组成的。multipart/form-data 是在 post 方法的基础上演变来的，具体如下：基于 post 方法，必须和 post 组合实现 与普通的 post 不同的是 request header...
2020-03-12 23:09:59
223
原创 JS bind 的用法及实现
用法我们先来看个小例子var age= 1;var obj = { age: 2, say: functino () { console.log(this.age) }}obj.say(); // 1obj.bind(window);obj.say(); // 2从上面的例子我们可以看出，bind 的作用就是为了修改函...
2020-03-11 17:49:22
1646
2
原创 React 全家桶之 react-redux
在谈 react-redux 之前，我们先来回顾一下 react 组件的通信方式：通过 props 父传子，子传孙。缺点是层级较深的话，传递会比较麻烦。消息横向传递很麻烦。 消息订阅发布模式，需要自己实现监听和触发这一过程。消息可以同级横向传递，如 A 和 B 都是 C 的子组件，可以在 C 组件中调度 A、B 的监听函数。 通过 react 中的上下文对象 context 来传递消息，由...
2020-03-11 16:26:34
158
原创 React 全家桶之 redux
react 组件通信方式props：通常我们会使用 props，将数据从父节点传到子节点。但是当子节点层级很深时，代码将变得冗余且难以维护。context：react 的上下文对象，可以跨层级传递数据。实际上 react-router、react-redux 都是基于 context 来实现的，可是官方并不建议我们使用 context，因为当组件结构日益复杂的时候，我们并不知道 conte...
2020-02-25 10:49:53
154
原创 React 全家桶之 react-router
传统的多页模式后端控制路由在以前我们采用的都是一个 URL 对应一个 html 页面的方式，由后端或者服务器去做路由控制。当一个 URL 找不到对应的页面时就会返回 404.单页模式（single page application，简称SPA）单页应用现在是越来越流行了，单页应用和传统的多页应用相比，前端只有一个页面。在不刷新页面的前提下，通过监听 URL的变化来渲染对应的...
2019-12-27 20:05:58
338
原创 React 全家桶之 react
目录react 生命周期零、编译阶段一、初始化阶段二、运行中的状态文本节点的更新原生节点的更新自定义组件的更新三、销毁阶段react 生命周期react的生命周期大致分为三个时期：初始化、运行中、销毁。零、编译阶段通常我们在写 react 时会采用 jsx 法语，经过 babel 编译之后实际上调用的是 createElement。R...
2019-12-25 18:24:25
303
原创 前端持续集成之—— Gitlab CI
Gitlab CI/CD开发者推送、提交代码到Gitlab，Gitlab通过项目的.gitlab-ci.yml 文件配置，找到指定的项目gitlab runner，runner运行相关的命令，进行编译、 集成、测试、交付、部署，一切顺利地话会分发到各个服务器（测试服务器、预发布服务器、正式服务器等），此时一个迭代开发上线流程走完。GitLab RunnerGitLab Runner是...
2019-10-10 14:26:10
773
原创 前端持续集成之——概念篇
在谈持续集成之前，我们先来回顾一下传统的软件开发模式-瀑布开发模型在传统软件开发流程中，开发、测试、运维三者是割裂开的，软件开发流程被分割成了多个独立的环节，分别由不同的人员执行。这使得软件开发过程中需要付出高昂的沟通成本，层层手动的流程将大量时间浪费在了重复的任务环节。举个例子：公司的一个老项目来了个大版本的新需求交给你，确定了需求、交互之后，你开始开活儿了 你和后端把接口文档定义...
2019-10-10 14:12:11
529
原创 抓包工具在排查bug中的应用
-Fildder（常用于PC端）-Charles（常用于移动端）bug排查与修复场景线上发现一个bug，但测试环境没有这条数据，无法验证。通常做法：1.接口返回的数据在代码中写死2.数据在mock平台上写死，本地在proxyTable中匹配问题：写死的代码容易忘记还原，直接发布到线上方案在不修改代码的原则上验证bug是否修复成功。举个例子：罗马数字...
2019-09-09 14:57:31
552
原创 Git LFS 初探
Git LFS（Large File Storage, 大文件存储），是 Github 开发的一个 Git 的扩展，用于实现 Git 对大文件的支持。Git v2.12后的版本才支持了Git LFS。通常会利用它来把项目中的大文件存储在 Git 仓库之外的地方，这样就可以减小 Git 仓库本身的大小， 从而达到加快 clone 速度的目的。原理举一个典型的应用场景，在产品的版本迭代中，视觉...
2019-08-29 23:42:34
418
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人