- 博客(57)
- 收藏
- 关注
RSS订阅原创 一文让你轻松掌握HTTP大全
HTTP简介本文从早期的HTTP/0.9出发，针对每次标准的更新分析其优缺点，层层递进，面面俱到，到如今的HTTP/3.0，使大家对HTTP的发展有比较全面的认识和理解。HTTP协议全称(Hyper Text Transfer Protocol)超文本传输协议，是用于传输诸如 HTML 的超媒体文档的应用层协议。作为TCP五层模型的应用层，它被设计用于 Web 浏览器和 Web 服务器之间的通信，但它也可以用于其他目的。HTTP是一个属于应用层、面向对象、无状态的协议。所谓无状态是指HTTP协议自身
2021-02-04 16:08:31
234
原创 Vue3.0初探：Proxy VS defineProperty
前言2019.10.5日发布了Vue3.0，到了2020年4月21日晚，Vue作者尤雨溪在B站直播分享了Vue.js 3.0 Beta最新进展，估计Vue3.0正式版也快出来了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构：使用 Typescript放弃 class 采用 function-based API重构 complier重构 virtual DOM新的响应式机制这次的分享就聊聊新的响应式机制，进入正文～回顾Vue2.x的
2020-10-21 11:54:26
268
原创 JS异步处理的进化史
前言javascript是一门单线程的语言，也就是说一次只能完成一件任务，如果有多个任务，就需要排队进行处理。如果一个任务耗时很长，后面的任务也必须排队等待，这样大大的影响了整个程序的执行。为了解决这个问题，javascript语言将任务分为两种模式：同步：当我们打开网站，网页的页面骨架渲染和页面元素渲染，就是一大推同步任务。异步：我们在浏览新闻时，加载图片或音乐之类占用资源大且耗时久的任...
2019-08-25 12:37:29
408
原创 Webpack核心概念解析
原文链接：https://juejin.im/post/5cd3dba3f265da036f4e9a0eWebpack核心概念解析终于忙完了论文，可以愉快的开始学习了，重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行，以webpack4.0为文档进行解读，从简单的概念解读到最后的实现。整个知识点涉及范围：loader使用...
2019-05-09 15:57:24
265
原创 webpack解读之loader
原文地址：https://banggan.github.io/2019/04/27/webpack解读之LOADER/Webpack核心概念解析终于忙完了论文，可以愉快的开始学习了，重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行，以webpack4.0为文档进行解读，从简单的概念解读到最后的实现。整个知识点涉及范围：lo...
2019-04-27 14:49:54
169
原创 前端开发者应该明白的浏览器工作原理
原文地址：https://banggan.github.io/2019/02/20/前端开发者应该明白的浏览器工作原理/前言作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟做了什么？相信很多人脑海里都会出现个大概的轮廓，可是一到细化具体的过程就答不上来。那么，作为前端开发者，应该从哪些方面延伸来...
2019-02-20 20:42:04
216
原创 HTML之语义化标签
HTML的语义类标签在我们的工作中经常遇见的，语义是我们说话表达的意思，多数的语义实际是从文字继承而来的。语义类的标签是纯文字的补充。为什么要用语义标签？正确使用语义标签的好处在于：语义类标签对开发者更为友好：增强可读性，清晰的网页结构，方便团队的开发和维护。有利于SEO搜索引擎检索。并不是说不管什么场景都尽量使用语义类标签，不恰当的使用反而会造成冗余，如ul无序列表，很多时...
2019-01-23 11:22:39
748
原创 TypeScript学习笔记之对象类型
原文地址：https://banggan.github.io/2019/01/21/TypeScript学习笔记之对象类型/在TypeScript中，利用接口(Interfaces)来定义对象的类型。在面向对象语言中，接口（Interfaces）、它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。在TypeScript中没有接口的概念，在编译成Java...
2019-01-21 12:55:33
1011
原创 Vue源码解读之依赖收集
原文地址：https://banggan.github.io/2019/01/19/Vue源码解读之依赖收集/通过上一篇Vue源码解读之响应式原理,我们可以看到Vue利用defineReactive会把普通的对象装换为响应式对象，在defineReactive函数中，重点是const dep = new Dep()，在设置getter的时候，收集依赖也就是dep.depend()依赖收集先看...
2019-01-19 16:06:27
825
1
原创 TypeScript学习笔记之变量声明
原文地址：https://banggan.github.io/2019/01/18/TypeScript学习笔记-之变量声明/变量声明因为TypeScript是JavaScript的超集，所以它本身就支持let和const。const是对let的一个增强，它能阻止对一个变量再次赋值，在TS中，主要就是var let const,就简单说一下用法吧：var声明var a =10; ...
2019-01-18 17:06:10
315
原创 TypeScript学习笔记之基本类型
原文地址：https://banggan.github.io/2019/01/16/TypeScript学习笔记之基本类型/基本类型JavaScript的类型分为原始数据类型和对象类型，原始数据类型主要包括：布尔值、数值、字符串、null、undefined原始数据类型布尔值在TypeScript中，使用boolean定义布尔值类型let do: boolean = true使用构...
2019-01-16 14:41:16
154
原创 TypeScript学习笔记之初入TypeScript
原文地址：https://banggan.github.io/2019/01/16/TypeScript学习之初入TypeScript/what?TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript；主要提供类型系统和对ES6的支持；免费开源。官网：http://www.typescriptlang.org/why？优势增加代码的可读性...
2019-01-16 11:07:35
182
原创 Vue源码解读之响应式原理
原文地址：https://banggan.github.io/2019/01/12/Vue源码解读之响应式原理/相信用过Vue的基本上都知道Vue的响应式都是利用了Object.defineProperty。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 g...
2019-01-12 15:40:15
244
1
原创 Vue源码解读之数据绑定
原文地址：https://banggan.github.io/2019/01/08/Vue源码解读之数据绑定/从最开始vue初始化到渲染的整个流程如下：new Vue----一系列的初始化----$mount做挂载—如果是带编译的版本就compile,没有就跳过—render函数—生成vnode—patch方法—渲染成DOM,如下图：何为数据驱动数据驱动就是指视图由数据来生成，在传统的前端...
2019-01-08 15:21:55
628
1
原创 Vue源码解读之基础前言
原文地址：https://banggan.github.io/2019/01/05/Vue源码解读之基础前言/前言从开始学习Vue到现在也有1年半了吧，以后的工作也是大部分的Vue相关，为了打好基础，方便迎接年后Vue3.0，给自己定了一个计划-有针对性的读源码并做一个系列的总结。Flow静态检测Vue.js 的源码利用了 Flow 做了静态类型检查，所以要对flow有一定的了解诶啊在 ...
2019-01-05 16:47:02
267
原创 axios知识点总结
原文地址：https://banggan.github.io/2019/01/04/axios总结/Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在Vue中常用axios来做前后端的交互；上一张git上的star值特点从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API...
2019-01-05 14:52:31
890
原创 Vue基础知识点-路由
原文地址：https://banggan.github.io/2019/01/03/Vue路由/Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。使用步骤引入vue-router对象安装插件：Vue.use(VueRouter)创建一个路由对象 var router = new VueRouter（{rou...
2019-01-03 21:10:12
194
1
原创 Vue知识点总结
基础知识点框架与库的区别jquery库+DOM操作+http请求 = 全家桶如何起步引包Vue.js通过Vue对象，new Vue（options）配置options对象el:发生动作的目的地template:模板（必须为一个根节点）data函数，返回的是一个对象components:key是组件名，value是组件对象methods：配合事件props：子组件接受的参...
2019-01-03 14:41:15
1039
原创 2018年度总结
前言感觉今年过的很快，其实回头看看经历了很多很多。在2018的尾巴上，回顾这一年的经历，只为明年做的更好。回首过去关于学习这一年，教研室从一楼搬到了五楼，搬砖的工作量也相应的随楼层的增加而增加。前前后后忙了两个项目，主要的技术栈是bootstrap、Vue、elementUI、webpack等开发工具，那段时间很忙，很头疼，因为没有前辈指导，所有踩的坑都得一个一个一遍又一遍的踩，却感觉很充...
2018-12-30 18:38:44
142
原创 JS之this的指向理解
1.this是什么？this是对象自动生成的一个内部对象，是在运行时基于函数的执行环境绑定的，因为函数的调用场合不同，this的值也有变化。this指向什么，完全取决于 什么地方以什么方式调用，而不是 创建时 。这句话目前也只能说在ES5中才是正确的，而在ES6的箭头函数中，this的指向就是在定义的时候就确定的。2. this的绑定规则this的绑定总共差不多有下面五种：默认绑定...
2018-12-03 20:51:53
655
转载 vue是如何实现computed实时计算
每当问到VueJS响应式原理，大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter，当属性被访问或修改时通知变化”。然而，其内部深层的响应式原理可能很多人都没有完全理解，网络上关于其响应式原理的文章质量也是参差不齐，大多是贴个代码加段注释了事。本文将会从一个非常简单的例子出发，一步一步分析响应式原理的具体实现思路。...
2018-08-16 21:50:21
5289
1
原创 通用的事件绑定的实现
考虑IE兼容性关于IE低版本的兼容性处理： IE低版本使用attachEvent绑定事件实现，使用量也比较少，很多网站并不支持。考虑代理代理是事件冒泡的一个具体应用 场景：动态随时新增元素，如一个div下面的多个a标签； 方法：将事件绑定到父级div上，通过target属性拿到具体的事件发生者div1.attachEventListener('click',functio...
2018-08-13 21:53:47
329
原创 谈谈我对vuex的理解
在近期做得项目中，用到Vue框架，必不可少的也用到vuex状态管理，再加上面试中也被问到了，索性把这一块拿出来抽时间整理一下：核心概念Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。 官网的一张图： Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行...
2018-08-12 16:12:20
7415
转载 前端学习资源合集
在前端路上摸索前行，在这里分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。欢迎更新，以下各排名不分先后顺序。自己 RSS 长期订阅了一些IT 和技术相关博客，这里是我Feedly 输出的opml，可直接导入一些RSS 阅读器:https://github.com/foru17/luolei-dotfiles...
2018-08-11 21:21:16
894
原创 js实现持续的动画
利用setInterval实现采用定时器实现window.onload=function(){ var mydiv=document.getElementById("mydiv"); var start=document.getElementById("start"); var stopmove=document.getElementById("stopmove"); var x..
2018-08-11 21:13:46
3417
原创 整理IE低版本浏览器的bug
IE6双倍距的问题问题： 当浮动元素设置margin边距时，边距会加倍。 解决方法：是给浮动元素加上display：inline属性IE6图片下方有空间隙问题：图片的下方默认的空隙 解决方案： 给img设置 display:block属性IE63像素偏移BUG问题：当浮动元素与非浮动元素相邻（注意这里的相邻可以是纵向的也可以是横向的）时，这个3像素的Bug就会出现，它...
2018-08-11 20:52:24
309
原创 函数节流和去抖动
使用场景以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。window对象的resize、scroll事件拖拽时的mousemove事件射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的...
2018-08-06 08:44:28
379
原创 JS实现继承
继承方式原型链继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承ES6原型链继承核心：将父类的实例作为子类的原型。SubType.prototype = new SuperType() // 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向SuperType。SubType.prototype.constructor ...
2018-08-05 21:12:49
651
原创 http与https
https的SSL加密是在传输层实现的。http和https的基本概念http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的...
2018-08-05 20:35:24
308
原创 数组和对象的深拷贝、浅拷贝
数组的浅拷贝首先看一下代码：let arr1=[1,3,3];let arr2 = arr1;console.log(arr2);//[ 1, 3, 3 ]arr1[1]=8;console.log(arr2)//[ 1, 8, 3 ]在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝，如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需...
2018-07-30 10:25:05
342
原创 如何看待typeof？
typeof判断基本数据类型这种方法对于一些常用的类型来说那算是毫无压力，比如Function、String、Number、Undefined等，如：numbertypeof(10);typeof(NaN);//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。typeof(Infinity);booleantypeof(true);typeof(fa...
2018-07-30 09:56:09
299
原创 TCP与UDP的区别
一、TCP TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有确认、窗口、重传、拥塞控制机制，在数据传完后，还会断开连接用来节约系统资源。 TCP的缺点： 慢，效率低，占用系统资源高，易被攻击 TCP在传递数据之前，要先建连接，这会消耗时间，而且在数据传递时，确认机制、重传机制、拥塞控制机制等都会消耗大量的时间，而...
2018-07-26 19:58:54
176
原创 ES6之箭头函数
一、基本用法 ES6 允许使用“箭头”（=>）定义函数。var f = () => 5;// 等同于var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;...
2018-07-25 10:12:59
244
原创 JavaScript内存机制
JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。 一、基础数据类型 JS中的基础数据类型，这些值都有固定的大小，往往都保存在栈内存中（闭包除外），由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问 数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构，遵循后进先出的原则。 ...
2018-07-24 22:26:14
207
转载 Web Worker理解
Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。 作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主...
2018-07-24 21:28:48
219
转载 jQuery源码浅析
一、 jQuery 闭包结构 // 用一个函数域包起来，就是所谓的沙箱 // 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局 // 把当前沙箱需要的外部变量通过函数参数引入进来 // 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数 (function(window, undefined) { ...
2018-07-23 11:00:30
253
转载 ES7之async的理解
ES2017 新特性：Async Functions (异步函数) 2017年08月01日 09:15:48 阅读数：1406 ...
2018-07-21 22:07:28
1582
转载 Javascript异步编程四种方法
这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchro...
2018-07-20 15:26:05
213
原创 阮一峰ES6之Generator函数理解
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。 Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号，二是，函数体内部使用yield语句，定义不同的内部状态。 一、用法 function* helloWorldGenerator(){ ...
2018-07-19 17:50:45
736
原创 阮一峰ES6之Promise对象的理解
一、Promise的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消...
2018-07-18 21:36:56
7414
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人