- 博客(35)
- 收藏
- 关注
RSS订阅原创 前端面试题总结五
前言继续。。正文1.写 React / Vue 项目时为什么要在组件中写 key，其作用是什么vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中。可以先了解一下diff算法。在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => in...
2019-03-24 13:58:55
240
原创 深复制和浅复制
正文我们都知道js数据中有基本类型和引用类型。那引用类型复制的时候，有两种情况传值和传址。浅复制Object.assign(target,obj)深复制function getType(obj){ //tostring会返回对应不同的标签的构造函数 var toString = Object.prototype.toString; var map =...
2019-03-22 21:49:35
170
转载 vue双向绑定
正文vue是通过Object.defineProperty()来实现数据劫持的。我们先来看看Object.defineProperty()能干什么：Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。Object.defineProperty(obj, prop,...
2019-03-21 14:27:04
199
原创 v-model 原理
正文先贴出示例代码：<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="conten...
2019-03-21 11:06:34
536
转载 原生ajax封装成Promise
代码： function myAjax(method,url,params){ this.state = 'FULFILLED' this.fulfillList = [] this.rejectList = [] (function(that){ var data = null ...
2019-03-21 10:09:10
1159
原创 diff算法
前言Vue和React都是采用虚拟dom渲染的，当节点更新是用diff算法来比较。正文diff比较方式在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。<div> <p>123</p></div><div> <span>456</span></di...
2019-03-21 09:26:09
1865
原创 React 生命周期
React生命周期先贴出图示：当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componentWillMount4、render5、componentDidMount当组件在服务端被实例化，首次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState...
2019-03-20 22:15:11
154
转载 轮播图实现
前言做一下轮播图的效果正文1.轮播图实现要求：页面:1.视觉窗口,即可见区域2.包含所有图片的容器3.具体的每一张轮播图片4,锚点列表, 点击可跳到具体某一页5.左右切换按钮让每一个轮播页大小刚好等于视图窗口大小1.设置视图窗口宽度, 让超过的部分隐藏2.设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大. 因为如果容器不够大的话容器中每一张图片就算...
2019-03-18 19:45:44
511
转载 TCP UDP区别
TCP与UDP区别总结：1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保 证可靠交付3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主...
2019-03-16 11:12:14
399
原创 vue ssr渲染
前言前段时间做了一个vue服务器渲染项目，今天来总结一下。正文什么是服务器端渲染 (SSR)Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。为什么使用服务器端渲染 (SSR)...
2019-03-15 19:09:31
263
原创 vue生命周期
前言继续继续正文先贴出官网的生命周期图：根据例子来了解一下： &lt;div id="app"&gt; {{data}} &lt;/div&gt; var a = new Vue({ el: "#app", data(){ return { data:'aaa',
2019-03-15 15:39:29
152
转载 Cookie
前言今天聊一聊cookie吧正文1.认识cookie首先先来认识一下cookie打开CSDN，开发者模式，Application->Cookies可以看到：可以看到左边栏Cookies下方会列举当前网页中设置过cookie的域都有哪些。上图中只有一个域，即“https://www.csdn.net”。而右侧区域显示的就是某个域下具体的 cookie 列表，对应上图就是“http...
2019-03-15 14:44:36
430
原创 CSRF 和 XSS
前言今天是CSRF 和 XSS正文1.XSSXSS 全称(Cross Site Scripting) 跨站脚本攻击， 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的. 比如获取用户的Cookie，导航到恶意网站,携带木马等。XSS 是如何发生的呢假如有下面一个textb...
2019-03-14 20:55:52
256
转载 JS 原型与原型链
前言总结一下原型链正文1.普通对象与函数对象JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明：var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){}...
2019-03-14 19:20:06
165
转载 Promise 原理解析
前言今天深入了解一下promise正文MDN描述：Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象、一个 Promise有以下几种状态:pend...
2019-03-14 15:11:48
967
转载 跨域
前言关于跨域，自己看了很多博客，但总是有一种无法贯通的感觉，今天自己总结一下，希望能更好的理解。正文1.什么是跨域首先要了解同源和跨源的概念，同源的定义：如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。三个任一不相同 则为跨域。跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原...
2019-03-14 13:55:49
173
原创 cookie localStorage sessionStorage
前言今天学习一下前端浏览器缓存的三种方式。正文三者的异同特性CookielocalStoragesessionStorage数据的生命期可设置失效时间，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中，如果使用coo...
2019-03-14 13:53:54
280
转载 前端面试题总结四
前言越继续越发现自己差的多，加油吧！正文1.统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率不限制 key 的顺序输入的字符串参数不会为空忽略空白字符//自己思考let str = 'hwllo wird'function count(str){ //去重 let newStr = str.replace(' ',...
2019-03-13 21:44:18
202
原创 数组常用方法
前言总结一下常用的数组方法正文1. mapmap() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 var arr = [1,2,3,4,5] const newarr = arr.map(x=&gt;x*2) console.log(newarr); //[2, 4, 6, 8, 10] var new_ar...
2019-03-11 19:49:34
379
转载 前端面试题总结三
前言学习学习！正文1.判断数组的三种方法Object.prototype.toString.call()每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以...
2019-03-10 17:19:23
199
原创 HTTP响应状态代码
前言总结一下http常用的一些知识。正文1.HTTP 响应状态代码HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类：信息响应，成功响应，重定向，客户端错误和服务器错误。信息响应100 Continue这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它。101 Switching Protocol该代码是响应客户端...
2019-03-10 16:02:30
816
转载 前端面试题总结二
前言继续学习。。正文1.已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组自己的实现var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8,...
2019-03-10 13:34:54
171
转载 前端面试题总结
前言在网上看到一些好的题，拿来研究研究。正文1. 深度优先遍历和广度优先遍历本次是实现html的遍历 <body> <div class="parent"> <div class="child-1"> <div class="child-1-1"> <div
2019-03-09 11:30:57
185
原创 防抖和节流
前言防抖与节流函数是一种最常用的 高频触发优化方式，能对性能有较大的帮助。正文防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。function debounce(fn, wait, immediate) { let timer = null return function() { ...
2019-03-07 21:37:18
426
转载 call、apply和bind方法的用法以及区别
前言最近在学习的时候，遇见了apply()函数，发现自己对于call，bind函数不了解，所以今天来看看。正文因为这三个函数的作用都是改变函数运行时this的指向，所以我们要来先看看this。函数调用有以下几种方法：方法调用模式：当一个函数被保存为对象的一个方法时，如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用，此时的this被绑定到这个对象。 var a...
2019-03-07 20:04:26
358
原创 Flex布局
前言今天来总结一下flex布局正文1.Flex是什么Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任任何容器都可以变为Flex布局.box{ display: flex;}行内元素也可以变成Flex布局.box{ display: inline-flex;}注意，设为 Flex 布局以后，子元素的float、clea...
2019-03-07 10:20:24
186
原创 css 居中 消除浮动 动画
前言继续css小知识点正文1. 居中布局水平居中1.行内元素: text-align: center2。块级元素: margin: 0 auto3.absolute + transform4.flex + justify-content: center垂直居中1.line-height: height2.absolute + transform3…flex + al...
2019-03-06 21:39:05
468
原创 css BFC规则
前言最近要准备面试了，所以总结一下面试中可能要遇到的知识点。今天是 css的一些点。正文BFC块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。首先是创建BFC的方式：根元素或包含根元素的元素浮动元素（元素的 float 不是 none）绝对定位...
2019-03-06 20:58:48
602
原创 正则表达式
前言今天就学习一下正则表达式。正文表达式全集字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\”匹配“\”而“(”则匹配“(”。^匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。$匹...
2019-02-28 14:39:32
107
原创 async/await内执行顺序
前言有好久没写博客了，主要是时间不够加上自己技术不够，最近开始校招。所以准备用写博客来总结一些技术点。今天在网上看到有人问到关于async/await 内的执行问题，所以自己看了一下官方文档。正文先贴出代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta cha
2019-02-28 11:14:27
945
转载 利用JS API优化输入框粘贴体验
前言今天有点小勤奋，就再写一篇博客吧。本文章是在张鑫旭大神博客上学习，大家可以去学习，我会在文章末尾贴出链接。目前输入框的体验输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。下面贴出一张图，是淘宝的注册利用JS API改变剪贴板内容下面先贴出代码：/**@de...
2018-11-20 22:47:10
201
原创 模块的的加载和导出
前言首先要承认自己又偷懒了，这次又没按时更新。嗯，还是回到正题，目前正在学习react，在做项目的时候，对require，import有些晕了，搞不清楚，所以今天就研究一下。...
2018-11-19 16:44:43
216
原创 校招准备之路
校招准备之路从大二开始接触前端知识，到现在陆陆续续有一年了，可是学的非常散，决定写博客来监督一下自己。希望自己可以校招成功。计划1.从今天开始，每三天写一篇博客。2.对css和js进行复习。3.在codewars刷题每两天至少一道。4.多浏览博客和最新技术。5.学习vue组件和对vue进行深入学习。附上一张前端学习表...
2018-11-09 15:51:48
554
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人