- 博客(28)
- 收藏
- 关注
转载 sass与less的区别?Stylus又是啥?
现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了Less、Sass 和 Stylus; 在这之前,我们先了解一点,sass和scss有什么区别? SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。 SCSS 和Sass 其实是同一种东西,我们平时都称之为 Sass...
2019-07-28 17:49:00
272
转载 react 高阶组件之小学版
高阶组件多么高大上的概念,一般用来实现组件逻辑的抽象和复用,在很多三方库(redux)中都被使用到,但是开发普通有任务项目时,如果能合理使用高阶组件,也会显著的提高代码质量。 我们今天就用最简单的逻辑来搞一搞这个家伙 我们先看一个栗子,看看这个家伙是如何进行逻辑复用的; 现在有一个组件MyComponent,需要从LocalStorage中获取数据, 然后...
2019-07-24 11:42:00
150
转载 react diff 极简版
为什么react这么快呢? 因为react用了虚拟DOM; 但是每次虚拟DOM转真实DOM不也是很浪费性能吗 ? nice,所以关键点在Diff算法这里,去对比新旧DOM树,而后通过补丁去更新到真实DOM上; 这个比对不是也很浪费时间吗 ? 正常情况下,比较两个树形结构差异的算法的时间复杂度是O(N^3),这个效率显然是无法接受的。 ...
2019-07-24 10:16:00
134
转载 react 16更新
1、render新的返回类型 render方法支持两种新的返回类型:数组(由React元素组成)和字符串 2、错误处理 16之前,组件在运行期间如果执行出错,就会阻塞整个应用的渲染,这时候只能刷新页面才能恢复应用。 16引入了新的错误处理机制,默认情况下,当组件中抛出错误时,这个组件会从组件树中卸载,从而避免整个应用的崩溃。 除此之外,1...
2019-07-23 20:00:00
153
转载 react 组件的生命周期 超简版
组件从被创建到被销毁的过程称为组件的生命周期; 通常,组件的生命周期可以被分为三个阶段:挂载阶段、更新阶段、卸载阶段; 一、挂载阶段 这个阶段组件被创建,执行初始化,并被挂载到DOM中,完成组件的第一次渲染。 依次调用的生命周期方法有: constructor componentWillMount render compo...
2019-07-23 17:29:00
122
转载 JS继承(简单理解版)
童鞋们,我们今天聊聊js的继承,关于继承,平时开发基本用不到,但是面试没有不考的,我就想问,这是人干的事吗? 好吧,迫于社会主义核心价值观,我们今天就来简单说一说js的继承,谁让它是面向对象编程很重要的一个方面呢 首先一句定义,什么是继承: A对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。 常见的集成方式有...
2019-07-17 17:54:00
207
转载 Vue Virtual Dom 和 Diff原理(面试必备) 极简版
我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图: 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念:...
2019-06-27 18:55:00
219
转载 Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: 1、什么是setter、getter ? 答:首先,别误以为他们就是一会要说的get、set,我们先看一句定义: 对象有两种属性:(1)数...
2019-06-24 16:03:00
242
转载 Vue生命周期的执行过程(面试必备) 极简版
最近准备面试,临时抱佛脚的来回顾一下vue相关的面试题,当然这是不对的,平时还是要努力呀,走起: 1、创建vue实例,Vue(); 2、在创建Vue实例的时候,执行了init(),在init过程中首先调用了beforeCreate钩子函数; 3、同时监听data数据,初始化vue内部事件,进行属性和方法的计算; 4、以上都干完了,调用Created钩子函数;...
2019-06-20 15:06:00
182
转载 Git婴幼儿使用手册【十分钟让你帅气的使用命令行和团队工作】
Git由来:......Git使用的好处:......如何使用Git:(以上会显得我们以下的是很纯纯的干货) 代码库有两个部分: 本地代码库;远程代码库; 本地代码库使用方法: 一、先创建一个文件,作为你的本地代码库,里面当然就是你项目的工程目录; 在终端里打开该文件,输入以下代码 ([xxxx] 内代表你要自...
2018-01-07 16:05:00
149
转载 前端为什么非要动静分离 说一下CDN托管的意义
大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存,因为浏览器缓存始终只是为了提升二次访问的速度,对于首次访问的加速,我们需要从网络层面进行优化,最常见的手段就是CDN(Content Delivery Network,内容分发网络)加速。通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载。 ...
2017-10-07 19:56:00
608
转载 关于新手必须要理解的几个名词,cookie、session和token
以下要说的,虽然不是开发过程中必须会遇到的,但却是进阶之路上必须要掌握的,一些涉及到状态管理与安全的应用当中尤为重要。 我之前虽略有学习,但也是东拼西凑临时看的一点皮毛,所以在这个假期利用一点时间,整合一篇博文出来,方便以后自己温故,当然能对新入行的朋友有些许帮助,那是最好的了。 好,废话结束,下面咱们开始。 ------------------------...
2017-10-04 00:01:00
216
转载 webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了
__dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。path.resolve(): 方法将一系列路径或路径段解析为绝对路径。语法:path.resolve([from ...], to)说明:将参数 to 位置的字符解析到一个绝对路径里。参数说明from 源路径to 将被解析...
2017-09-28 13:51:00
103
转载 module.exports,exports,export和export default,import与require区别与联系
还在为module.exports、exports、export和export default,import和require区别与联系发愁吗,这一篇基本就够了!一、首先搞清楚一个基本问题:module.exports和exports是属于CommonJS模块规范!(不清楚commonjs?大神请这边逛一逛commonjs规范)export和export default是属于E...
2017-09-13 18:26:00
124
转载 JS的 try catch 前端使用场景(尽管不多还是会用到)
try{//正常执行}catch(e/*你感觉会出错的 错误类型*/){// 可能出现的意外 eg:用户自己操作失误 或者 函数少条件 不影响下面的函数执行// 有时也会用在 比如 focus() 但可恶的ie有可能会第一次没有focus事件 再让他执行一次// 有时一些不是bug的bug 在ie上 他要求必须加上 catch 哪怕就一个空catch 以前在ie8上遇到...
2017-09-04 16:15:00
138
转载 javascript中对一个对象数组按照对象某个属性进行排序
在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同。在javascript中,也有一些精妙的算法,用来对一些对象进行排序。我在面试迅雷的时候,也拿到一道题,当时做题的时候考虑到时间,没有去仔细研究,回来后再读了一些方法,就知道真正的考点在哪里了。我们现在有一组“学生”对象,包含“名字,年龄”等属性,现在要求一个算法,把这些对象放在一个数组里,可以实现按照...
2017-08-31 19:12:00
646
转载 前端跨域知识总结
前言相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录。正文1. 什么是跨域?跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域。之所以会产生跨域这个问题呢,其实也很...
2017-08-25 08:41:00
56
转载 说说前端开发中的SEO
SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。我认为这是一门说来简单,但操作起来复杂的技术,只可意会,不可言传。作为一名前端工程师,不需要精通SEO,但必须要了解它。SEO有一条不变的准则就是它永远都在变,因为没有一沉不变的优化方案可供大家套用。但我们仍然可以...
2017-08-22 21:32:00
385
转载 location.hash的不一样用法
除了可以当做锚点,定位到同name位置,location.hash还有两个用法。 平时开发都会用得到。 一:使js事件在浏览器中产生历史记录。 举个栗子: 我们在JS里面改变了页面的数据、样式等,比如我们首先执行了JS函数A,把页面由白色变成了红色,在执行了JS函数B,把页面由红色变成了黑色,这个时候我想退回到页面为红色的状态,那么该...
2017-08-09 00:48:00
127
转载 arguments.callee用法
arguments.callee 在哪一个函数中运行,它就代表哪一个函数。 一般用在匿名函数中 在匿名函数中有时会需要自己调用自己,但是由于是匿名函数,没有名子,无名可调。 这时就可以用arguments.callee来代替匿名的函数。(function(n){if(n > 1) return n* arguments.call...
2017-08-08 11:26:00
171
转载 浏览器标准模式与怪异模式-CSS1Compat and BackCompat
由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirksmode或者称为CompatibilityMode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strictmode也有叫做Standarsmode),这...
2017-08-02 23:21:00
211
转载 【踩坑】nextSibling 和nextElementSibling的区别
DOM使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点)。nextSibling属性与nextElementSibling属性的差别:nextSibling属性返回元素节点之后的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点...
2017-08-02 13:58:00
359
转载 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器。以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能。 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现H...
2017-08-02 11:57:00
734
转载 总结个人使用过的移动端布局方法
说响应式之前,先说一下单位。 pt与px 在html设计字体的css样式中,有些字体设置成14pt,而不是14px,那pt是什么,和px又有什么关系呢? pt(point)是印刷行业常用的单位,等于1/72英寸,表示绝对长度。px(pixel)指的是像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的px元素显示会不一样,比如同样是14...
2017-08-01 22:28:00
143
转载 前端页面布局之Grid布局
在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还能站起来说啥不”。 为什么要说这个老梗呢,其实前端写页面布局,差不多就是这个道理,咱们(小子没学几天,这里说‘咱们’全当应景)之前用的都是啥,我来一张图: 差不多就是这...
2017-08-01 15:16:00
814
转载 最全的CSS hack没有之一
1、何为HACK?简单的说,HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼的问题,因为要写N多种兼容代码。当然,IE是最让人蛋疼的。一般来说,CSS HACK有3种表现形式:CSS属性前缀法::比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox...
2017-08-01 14:46:00
122
转载 不同内核浏览器的差异以及浏览器渲染简介
一、简单介绍一下什么是浏览器内核。浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页...
2017-08-01 14:25:00
204
转载 不同内核浏览器的差异以及浏览器渲染简介
一、简单介绍一下什么是浏览器内核。浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页...
2017-08-01 14:21:00
738
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人