前端
前端学习
落幕高墙
这个作者很懒,什么都没留下…
展开
-
防抖节流
相同点:在一段时间之后粗发对应的事件。区别:防抖会有"延迟",而节流不会有这个特性。防抖防抖其实就是一种延迟触发,注意这个延迟,是重点。 假设现在延迟时间为5s,那么当你第一次触发事件之后,会延迟5s,在这5s内,你在此触发事件,有会延迟5s 也就是说,防抖会有"延迟"这个特性。使用settimeout直接调用事件函数每次触发事件的时候,清空timer。使用se...原创 2019-10-20 18:01:40 · 269 阅读 · 0 评论 -
手写Vue之MyWatcher
这里的Watcher主要的功能是:重新定义Vue实例的数据域,给每个属性加上一个闭包,这个闭包里面就有一个Dep对象。然后set方法,如果设置的是一个对象,则会重新给这个对象生成Dep对象。如果是一个普通字符串或者其他数据,则不理会。get方法,会跟当前解析的表达式的watcher做一个关联。下面有详细注释代码:/** * 注意:Vue实例的数据域已被重新定义,将会触发set和...原创 2019-10-13 23:33:11 · 110 阅读 · 0 评论 -
手写Vue之MyObserver
在实例化Vue的时候,会实例化出Observer,Observer的作用就是给数据域的所有数据进行重新定义。observer的代码结构:构造方法ObserveAllPropertyInData该方法会遍历整个数据域,对数据域中的每个属性进行重新定义。defineReactive:可以看到,定义里面多了Dep等对象,这个我们放在Watche...原创 2019-10-13 18:56:05 · 206 阅读 · 0 评论 -
手写Vue之MyCompile
这一节主要是如何对{{xxx}}表达式和指令进行编译一.代码结构二.主要流程下面我们就按照上面的代码流程来解析。三.dom元素转文档碎片位于MyCompile的prototype中四.编译文档碎片不断递归所有的dom元素,每次到一个dom元素,判断是否是文本节点,如果是,进行表达式编译。如果不是,则取出这个节点的所有属性,如果是事件绑定...原创 2019-10-13 15:09:21 · 239 阅读 · 0 评论 -
阻塞渲染
cssCSS是一种渲染阻塞资源(render blocking resource),它需要完全被解析完毕之后才能进入生成渲染树的环节。CSS并不像HTML那样能执行部分并显示,因为CSS具有继承属性, 后面定义的样式会覆盖或者修改前面的样式。如果我们只使用样式表中部分解析好的样式,我们可能会得到错误的页面效果。所以,我们只能等待CSS完全解析之后,才能进入关键渲染路径的下一环节。需要注意的...原创 2019-10-10 16:26:55 · 577 阅读 · 1 评论 -
renderTree渲染
在这一步,需要把dom树和cssom树给结合起来,生成一棵完整的RenderTree。RenderTree其实很简单,就是遍历dom树,对于每个dom节点,放到cssom树上匹配,最后找到对应的唯一一条规则,附加上去。举个栗子,body{ div{ span{xxxxxx} }}cssom树如下:假设现在要生产renderTre...原创 2019-10-10 16:20:44 · 667 阅读 · 0 评论 -
css规则树
前面已经介绍过了,dom树和css树合并之后,形成一棵最终的RenderTree,最后这颗RenderTree才会被渲染到页面。比如下面的css会转成下面的树body { font-size: 16px }p { font-weight: bold }span { color: red }p span { display: none }img { float: right ...原创 2019-10-10 16:14:27 · 1235 阅读 · 0 评论 -
浏览器渲染过程
拿到对应的字节内容,将这些内容转换成字符。浏览器将会根据HTML 的标准把上一步的结果转换成 “标记(Token)”。比如<html>或者<body>这种被尖括号包住的 "标记(Token)" 均有特殊的意义解析HTML生成DOM树。解析CSS生成CSSOM规则树。将DOM树与CSSOM规则树合并在一起生成渲染树。遍历渲染树开始布局,计算每个...原创 2019-10-10 16:01:51 · 100 阅读 · 0 评论 -
call、bind、apply、new
1.callcall,能够改变一个函数的this指向如下,调用了a.fn,那这个时候,这个this肯定就是a了,不过后面调用了call,传入一个a那么这个时候,fn里面的this是指向a的,然后1,2是参数传入2.bindbind方法和call、apply方法有些不同,但是它们都可以用来改变this的指向。bind是直接返回一个全新的函数,这个函数的this发生了改...原创 2019-10-10 14:23:31 · 143 阅读 · 0 评论 -
手写一个instanceof
示例: a instanceof B检测a的原型链(__proto__)上是否有B.prototype,若有返回true,否则false每次不断循环,拿出a的原型,然后再拿出原型指向的构造方法,然后判断一下是不是B。如果A继承B,然后用B实例化a,然后a instanceof A会返回true,因为沿着__proto__链一直上去。function instance_of...原创 2019-10-10 12:04:09 · 949 阅读 · 0 评论 -
reflow与repaint
重流和重绘重流就是页面的布局发生了彻彻底底的改变,元素位置或者宽高发生了变化,整个页面需要重新布局,这个时候就需要reflow。重绘可能就是只绘一小部分,而不会绘制全部整个页面。Repaint——屏幕的一部分要重画,比如某个CSS的背景色变了。但是元素的几何尺寸没有变。Reflow——意味着元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的...原创 2019-10-10 17:08:23 · 355 阅读 · 0 评论 -
!DOCTYPE html
1 作用声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。document.compatMode:BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是Bac...原创 2019-10-10 17:12:05 · 149 阅读 · 0 评论 -
左右固定中间自适应
一.浮动左右浮动且w=300px,然后中间啥都不设置即可。【注意:中间啥都不设置,实际上中间这个div是会伸到两边两个浮动的div下面的,只是说,两边的两个div浮动起来,挡住了中间那个div,所以才会显示在最上面。】【大div高度为300px,所以中间div高度默认为300px,然后大div宽度默认继承浏览器宽度,所以中间div的宽度也跟大div宽度一样】二....原创 2019-10-11 15:51:27 · 115 阅读 · 0 评论 -
手写vue之defineProperty
vue里面的属性定义都是用Object的defineProperty来实现的,而defineProperty低版本浏览器不支持。这也是Vue为什么会有浏览器限制的问题。语法Object.defineProperty(obj, prop, descriptor)obj:需要定义属性的对象 prop:需要定义的属性 descriptor:属性的描述描述...原创 2019-10-11 15:51:46 · 493 阅读 · 0 评论 -
手写vue之nodeType
原创 2019-10-11 15:51:54 · 312 阅读 · 0 评论 -
实现一个伪数组
1.自定义个数组,并且这个数组必须要拥有Array的【prototype】所有方法2.给你一个半路杀出来的伪数组,让你把它变成一个真数组1.自定义个数组,并且这个数组必须要拥有Array的【prototype】所有方法这一题比较简单,我们可以通过call方法来把真正的函数执行委托给Array对象的prototype原型链上面的方法,如下图的代码,调用add,实际上委托给了p...原创 2019-10-11 15:52:02 · 795 阅读 · 0 评论 -
Vue之文档碎片
一般我们在处理dom的时候,不建议一个一个元素进行修改,而且把需要操作的dom节点一次性从页面取出,放入内存,然后在内存里面对这些dom统一进行操作,然后再挂载回去。这样能够提高性能,而且也让最大限度降低了页面重流和重绘的次数。创建了一个文档碎片,然后把aa里面的所有第一级的子元素加到文档碎片里面。然后遍历整个文档碎片,如果是元素节点的,拼接上内容,最后把文档碎片append回原来的元素上...原创 2019-10-11 15:52:09 · 994 阅读 · 0 评论 -
手写Vue之目标
我们要实现的是,通过id获取到对应的需要做模板解析的dom然后支持下面两种解析方式:1.{{}}花括号解析2.v-xxx等指令的解析通过new MyVue({ el:"", data:{ xxx1:{ } xxx2:"xxx" ...原创 2019-10-11 15:52:16 · 95 阅读 · 0 评论 -
手写Vue之MyVue
这里要实现的功能是,把new Vue({data:{}})里面的data数据进行挂载,直接挂载到this上面,然后通过代理的方式,间接获取和设置到this里面。如下图:_MyData是从传入的参数里面取出的,然后通过给this定义a和v两个属性,间接去操控_MyData里面的数据。function MyVue(option){ this.$option = option...原创 2019-10-11 15:52:26 · 302 阅读 · 0 评论 -
组合继承
1.用call复制父类的属性2.子类的prototype的__proto__直接指向父类的原型对象原创 2019-10-10 11:44:39 · 55 阅读 · 0 评论 -
原型、构造函数、实例三者关系
每创建一个函数,该函数都会自动带有一个prototype属性。该属性是一个指针,指向一个对象,该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们在js中实现继承).原型对象上默认有一个属性constructor,该属性也是一个指针,指向其相关联的构造函数。通过调用构造函数产生的实例对象,都拥有一个内部属性,指向了原型对象。其实例对象能够访问原型对象上的所有属性和方法。总结:三者...原创 2019-10-10 11:13:13 · 2035 阅读 · 0 评论 -
事件案例
事件冒泡实例一个按钮,一个div,点击这个按钮,显示div。点击文档空白处,隐藏div。你可能会这样写:给按钮设置一个事件,让按钮展示div。给文档添加一个事件,让文档隐藏div。问题来了,点击按钮,你会发现,div并没有出现,其实div是出现了,只是div出现了之后,由于document也有一个onclick事件,由于时间冒泡的机制,所以document也会被...原创 2019-10-05 22:43:58 · 124 阅读 · 0 评论 -
取消默认事件的补充
事件的取消在Event常用方法里面介绍过了,这里再补充几点:事件的取消也很简单dom.removeEvenListener这种方法比较简单粗暴/*事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情怎么阻止?当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;*/document.onkeydown = ...原创 2019-10-05 17:33:42 · 109 阅读 · 0 评论 -
Even的兼容性写法
even对象是一个全局对象ie=》nullchrome=》undefinedff=》未定义【非全局对象,事件函数的第一个参数】当只有发生了事件,对应的函数被调用,这个全局的Even对象才会被传进去。类似于:document.onclick = function(Even){ }这个时候,这个Even才会有值,当你这个函数执行完了,Even又会被清空掉如何即可f...原创 2019-10-05 17:27:28 · 143 阅读 · 0 评论 -
自定义事件
自定义事件,其实就是给这个dom注册一个事件,然后派发出一个对应的事件出去指定了事件类型,还有事件的参数。语法 : event =new Event(typeArg, eventInit) typeArg是一个表示事件类型的字符串。 eventInit是事件的配置项: ...原创 2019-10-05 17:25:34 · 239 阅读 · 0 评论 -
Event对象常用方法
preventDefault阻止默认行为,比如a标签就是阻止跳转行为.该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻...原创 2019-10-05 16:50:35 · 926 阅读 · 0 评论 -
dom事件级别
dom事件级别其实就是一些制定的标准:有0,2,3三种标准。0级就是类似下图那样,用onclick来绑定事件,也没有自定义事件啥的。事件会被覆盖。到了2级可以开始有多个事件,还支持事件的冒泡和捕获的设置。【false是冒泡,true是捕获】addeventListener(event,listener,useCaptrue) IE11以下:attachEvent(event,lis...原创 2019-09-28 23:04:47 · 628 阅读 · 0 评论 -
DOM和BOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。它把一系列浏览器对象内置到js的api中,使得我们能够操控浏览器的行为,比如控制浏览器的前进或者后退,控制浏览器的屏幕,获取浏览器的跳转历史等。DOM (Document Object Model)是指文档对象模型,他实际上指的是一种标准,就是把一些杂乱无章的东西按照一...原创 2019-09-28 22:35:03 · 254 阅读 · 0 评论 -
BFC
一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。BFC 特性(功能)先明确一下bfc的作用其中比较重要的几点就是:1.触发bfc的区域,会隔离开其他区域,使 BFC 内部浮动元素不会到处乱跑。2.bfc会把他里面的float元素的高度囊括进来计算,重新计算父...原创 2019-09-28 13:51:57 · 187 阅读 · 0 评论 -
实现一个通用的事件绑定函数
如上图是一个通用的事件绑定,支持事件代理。左图是定义,右图是调用。前三行是做兼容处理,如果不需要做代理,那么直接传入一个回调函数即可。因为fn为null的话,那么selector就是对应的回调函数。调用的时候如下:我们假设div1是父元素,那么这里selector=a,意思就是div1下面的所有a的都会把a的type类型的事件交给div1来。(子元素的冒泡会触发...原创 2019-10-05 22:46:57 · 418 阅读 · 0 评论 -
可视区
ClientX和ClientY,是藏在Even对象里面。注意ClientX和Y距离是可视区的距离。实例:div随着鼠标移动。这道题有2个注意点:1.鼠标移动的时候,是根据时间间隔来算的,同一时间内,移动的距离太大,有可能造成div顺移2.注意可视区,如果html的总高度太长,然后ClientY的高度又太小,那么看起来就像下面这个样子如果按照可...原创 2019-10-06 23:41:53 · 286 阅读 · 0 评论 -
js运行机制
js是单线程的JavaScript是单线程的,也就是说,同一个时间只能做一件事。他不像java,能够开出多个线程来执行任务,提高效率。万事都是事出有因,js为什么是单线程的呢?JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两...原创 2019-10-07 17:28:13 · 101 阅读 · 0 评论 -
ifram跨域
有时候父页面需要和子页面进行数据交互,但是如果子页面和父页面不同源,那么这个时候就会出现跨域问题。1.hash一般通过改变当前页面的location来附加上需要传递的数据,然后另外的页面截取hash值来获得数据。// 利用hash,场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B// 在A中伪代码如下:var B = document.getEleme...原创 2019-10-09 23:13:06 · 342 阅读 · 0 评论 -
跨域解决方案汇总
1.jsonp利用请求js脚本不会有跨域问题的特点。本地定义好一个函数,函数里面做执行。然后服务端返回同名函数的调用形式,这样,这个数据一到达客户端,就会被马上执行。优点:它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制兼容性很好,在古老的浏览器也能很好的运行不需要 XMLHttpRequest 或 ActiveX 的支...原创 2019-10-09 18:35:25 · 78 阅读 · 0 评论 -
手写jsonp
var util = {};/** * [function 判断是否为函数] * @param {[type]} source [description] * @return {[type]} [description] */util.isFunction = function (source) { return '[object Function]' ...原创 2019-10-08 22:48:08 · 100 阅读 · 0 评论 -
XHR等级
XHR一级XHR1 即 XMLHttpRequest Level 1. XHR1时, xhr对象具有如下缺点:仅支持文本数据传输, 无法传输二进制数据. 传输数据时, 没有进度信息提示, 只能提示是否完成. 受浏览器 同源策略 限制, 只能请求同域资源. 没有超时机制, 不方便掌控ajax请求节奏.XHR二级XHR2 即 XMLHttpRequest Level 2. XHR2...原创 2019-10-08 21:54:57 · 354 阅读 · 0 评论 -
手写ajax
var util = {};/** * [function 对象浅复制] * @param {[type]} dst [description] * @param {[type]} obj [description] * @return {[type]} [description] */util.extend = function (dst, obj) { ...原创 2019-10-08 21:36:47 · 64 阅读 · 0 评论 -
深拷贝
JSON.stringify 和 JSON.parse用 JSON.stringify 把对象转换成字符串,再用 JSON.parse 把字符串转换成新的对象。可以转成 JSON 格式的对象才能使用这种方法,如果对象中包含 function 或 RegExp 这些就不能用这种方法了。这种方法能正确处理的对象只有Number, String, Boolean, Array, 扁平对象,...原创 2019-10-07 23:19:12 · 99 阅读 · 0 评论 -
浅拷贝
实现浅拷贝的第一种方法遍历initObj里面的所有属性,放到另外一个对象里面,并且把这个对象返回function simpleClone(initalObj) {var obj = {};for ( var i in initalObj)obj[i] = initalObj[i];return obj;}浅拷贝var obj = {a: "hello"...原创 2019-10-07 22:23:41 · 158 阅读 · 0 评论 -
盒模型
标准模型 和IE模型首先基本的盒模型:content,padding,border,margin=》盒子内容,内填充,边框,外边距盒模型是有两种标准的,一个是标准模型,一个是IE模型。 从上图可以看出标准盒模型的width和height是只有content的,而ie盒模型的w和h是包含了content和padding还有border的。从上面的特性我们不难推断出...原创 2019-10-07 18:13:44 · 84 阅读 · 0 评论