前端学习
文章平均质量分 68
兔子juan
我是一个性格活泼外向的女孩,现如今是一名计算机科学与技术专业的学生,喜欢前端,开始学习,差的我就努力追赶,加油↖(^ω^)↗
展开
-
前端基础问题 -- 高度塌陷问题详解(面试重点问题)
高度塌陷:父元素的高度,默认被子元素撑开,目前来讲son多高,father就多高。此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素,导致父元素的高度丢失,就是我们说的高度塌陷问题。父元素一旦高度塌陷,则它下边的元素会向上移动,导致整个页面的布局混乱!例如,我们常常想要图一:但是,输出的总是图二:原理:在w3c标准(非IE6以下版本采用的是W3C标准)...原创 2018-09-23 22:14:07 · 792 阅读 · 0 评论 -
JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。 JS延迟加载有助于提高页面加载速度。 一般的几种方法如下:defer 属性async 属性动态创建DOM方式使用jQuery的getScript方法使用setTimeout延迟方法让JS最后加载1.defer属性 HTML 4.01 为 <script>标签定义了 defer属性。...原创 2018-08-22 11:05:16 · 671 阅读 · 0 评论 -
CSS浮动、定位
这是一个基础知识,也是面试多多少少会问到的。下面我带大家梳理一下!一、文档流的概念指什么?有哪种方式可以让元素脱离文档流?文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。 让元素脱离文档流的方法有:浮动和定位。二、有几种定位方式,分别是如何实...原创 2018-08-18 22:15:14 · 1602 阅读 · 0 评论 -
JavaScript原生代码实现楼层跳跃
<!doctype html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width...转载 2018-08-08 22:12:58 · 781 阅读 · 0 评论 -
面试题之一 —— 手写一个promise
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦成功就不允许失败,一旦失败就不允许成功。function Promise(excutor) { let self = this self.status = 'pending'...转载 2018-08-13 16:34:02 · 8371 阅读 · 0 评论 -
面试题 —— Ajax的基本原理总结
前两天面试的时候,面试官问我,你掌握的技能是Ajax,那你给我讲一下它的基本原理吧! 妈呀,瞬间脑子空白。当时在门口背了好久的网络知识点,一时竟然说不吃话,只记得什么异步通信,同步数据,面试官的笑让我不寒而栗…………今天整体的整理一遍Ajax的知识点吧。 ...原创 2018-08-13 11:11:47 · 29601 阅读 · 3 评论 -
HTML页面加载过程
window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程window.onload 和 DOMContentLoaded 的区别DOMContentLoaded:DOM结构加载完毕window.onload:DOM...转载 2018-08-15 22:46:19 · 2032 阅读 · 0 评论 -
前端性能优化指南
概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加...转载 2018-08-15 20:48:52 · 293 阅读 · 0 评论 -
最简单的移动端适配方案
目前最流行的方案当属淘宝的flexible了,因为之前一直做服务端开发,对前端不是很了解。对于这套方案看了n久还是不太理解,后来自己学习viewport的相关概念,捉摸出一套自己的办法(至少我没查到有人这么干的…),写在这里和大家分享一下。 其实对于多数的移动h5的适配需求并没有那么繁琐,只要保证和设计稿比例一致,在各种奇葩屏幕都能够显示出完整的信息就可以了。所以这里不讨论retina屏幕图片模...转载 2018-08-15 20:46:24 · 811 阅读 · 1 评论 -
CSS3中的伪类
1、动态伪类:hover :link :visited :active2、UI元素状态伪类我们把”:enabled”,”:disabled”,”:checked”伪类称为UI元素状态伪类,这...转载 2018-08-19 21:26:31 · 3419 阅读 · 0 评论 -
前端开发中的正则表达式 以及 常用的正则表达式大全
RegExp 是正则表达式(Regular expression)的缩写,就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征。比如 表达式“ab+” 描述的特征是“一个 ‘a’ 和 任意个 ‘b’ ”,那么 ‘ab’, ‘abb’, ‘abbbbbbbbbb’ 都符合这个特征。正则表达式可以用来:验证字符串是否符合指定特征,比如验证是否是合法的邮件地址。用来...原创 2018-08-20 12:13:23 · 540 阅读 · 0 评论 -
总结:Vue.js中父子组件之间的通信问题
这是学vue框架的小伙伴必懂的问题之一:父子组件之间的通信。父子组件之间的关系:通常在组件Parent的模板中使用组件Child,那么此时Parent就是父组件,而Child就是子组件。父子组件应该解耦,组件实例的作用域是孤立的,子组件中不能直接使用父组件的数据。应该使用props传递父组件到子组件的数据,子组件通过events给父组件发消息,以此实现父子组件间的通信。 一、父组件向...原创 2018-08-23 12:14:58 · 640 阅读 · 0 评论 -
js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度)主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。解题思路 : 1.de...原创 2018-09-03 15:55:49 · 1455 阅读 · 0 评论 -
面试题重点 -- 元素居中的几种方法以及各自需要注意的点
再一次敲黑板,重点的重点,今天秒针的面试再次考了我这个题,又给我弄蒙了o(╥﹏╥)o问题:怎样实现div元素居中(垂直、水平)?<body> <div id="father"> <div id="child"> 让我居中呀! </div> </div>&原创 2018-09-11 17:08:44 · 830 阅读 · 0 评论 -
JavaScript的作用域链及闭包
闭包概念:指有权访问另一个函数作用域中的变量的函数。 创建方式:在一个函数内部创建另一个函数。但是,在我们了解闭包之前,有个很重要的概念需要先了解清楚,那就是作用域链,我们需要彻底理解作用域链。1.JavaScript的作用域及作用域链作用域任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScri...原创 2018-09-02 15:35:30 · 292 阅读 · 0 评论 -
总结JS中的继承
ECMAScript没有明确的继承机制,而是通过模仿实现的,而且ECMAScript只支持实现继承(即继承实际的方法,还有接口继承),实现继承主要是依靠原型链来实现的。昨天总结了创建对象的几种方法:JavaScript创建对象的几种方式,既然创建了对象,那么我们就要给它实际用起来,这一节就好好总结一下JS中的继承方法,这也是一道重要的面试题目!**实现继承的4种方法**1....原创 2018-09-01 21:49:14 · 263 阅读 · 0 评论 -
面试问题:对象的深拷贝和浅拷贝区别以及详解
深拷贝和浅拷贝的区别 JavaScript中有两种类型的对象拷贝:浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。 最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。浅拷贝 —-只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做“(浅复制)浅拷贝”,换句话说,浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复...原创 2018-08-21 19:52:04 · 4921 阅读 · 0 评论 -
JS对象深度克隆的实现
JavaScript中的数据类型分为两大类:原始类型和对象类型。 (1)原始类型包括:Number、String、Boolean、null、undefined(我们需要克隆的主要是前面三个) (2)对象类型包括:对象(Object),函数(Function)、数组(Array)。 在克隆过程中对这两类数据类型的处理方式是不一样的,下面先分别讲解两种数据类型的克隆方式。原始类型克隆...原创 2018-08-21 17:39:11 · 3051 阅读 · 0 评论 -
重绘和重排是什么?如何减少重绘和重排
一个页面由两部分组成:DOM:描述该页面的结构render:描述 DOM 节点 (nodes) 在页面上如何呈现当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元...转载 2018-08-24 15:44:12 · 5024 阅读 · 0 评论 -
原型和原型链的理解
因为这个概念的理解,总是让我绕进去,有点怀疑智商…… 今天好好理解一下这个概念!先看一个例子:function Person(){ this.name = 'Mike';}var person = new Person();Person.prototype.say = function(){ console.log('Hello,'+this.name);};...原创 2018-08-23 22:41:56 · 1028 阅读 · 0 评论 -
移动端前端适配方案(总结) -- 面试重点
在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。首先,谈一下目前为止出现的一些关于移动端适配的技术方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewport缩放 (4)rem 方式1.Media Queri...原创 2018-08-15 19:55:26 · 74752 阅读 · 4 评论 -
三种垂直居中的方法
总结三种常用的垂直居中的方法 1.多个块级元素垂直居中,利用绝对定位以及transform,适用于不知道元素的宽度和高度。.parent{ position:relative; }.child{ position:relative; top: 50%; transform: translateY(-50%); /*CSS3的新属性*/}2、使用dipla...原创 2018-08-15 17:07:57 · 1188 阅读 · 0 评论 -
javascript 中函数调用方法:apply() 和 call()
每个函数都包含两根非继承而来的方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。 首先,apply()方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中第二个参数可以是Array的实例,也可以是arguments对象。例如:...转载 2018-07-31 18:12:48 · 1120 阅读 · 1 评论 -
总结:常见正则表达式(记住)
1. 校验基本日期格式var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/</span>;</div></div></li><li><div class="hljs...转载 2018-08-03 17:23:17 · 609 阅读 · 0 评论 -
POST和GET区别 -- 面试重点之一
这是面试经常问到的一个问题之一,不论你是前端、后台、网络安全工程师,还是各种和网络浏览器打交道的职业,或多或少的都应该知道这个知识点,毕竟也是很多专业的本科必修课之一!POST和GET区别:表单提交中get和post方式的区别有5点1.get是从服务器上获取数据,post是向服务器传送数据。2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字...原创 2018-07-30 11:38:17 · 5345 阅读 · 2 评论 -
CSS预处理器 -- stylus 、sass、less
在写CSS的时候我们会发现,为了兼容浏览器等原因,我们往往需要写很多冗余的代码,CSS预处理器就是为了解决CSS的这些问题,简化CSS代码的编写。目前最主流的CSS预处理器是LESS、SASS和Stylus,主要从以下几个方面进行讨论:基本语法变量 嵌套 混入(mixin) 继承 函数 @import 运算符 逻辑控制 基本语法LESS的基本语法...转载 2018-07-26 15:24:51 · 452 阅读 · 0 评论 -
JavaScript:void(0)含义
相信很多人经常会看到:javascript: void(0),那么你知道它是什么意思吗? javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。 为什么要使用href=”javascript:void(0);”href=”javascript:void(0);”...原创 2018-07-09 11:00:17 · 10336 阅读 · 2 评论 -
浅谈CSS3中Flex布局
一、简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单、方便、快速。 flex( flexible box:弹性布局盒模型),W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持: 其中在webkit内核的浏览器(Safari、Chrome等浏览器...原创 2018-07-23 16:17:46 · 267 阅读 · 0 评论 -
笔试题目 -- css3弹性盒子flex实现三栏布局
刚开始学习前端的时候,没有注意到这里,3-4月份找实习的时候也见过这个题目,在网上找到答案就敲上去了,没留意。 但是前提做CVTE笔试题目时,又发现的这道题目,决定好好看一下,记下来:题目: 请用flex实现三栏布局,高度已知,左右栏宽度300px,中间自适应。弹性盒子本身就是并排的,我们设置宽度即可。 用一个容器container包裹三栏,设置comtainer容器的d...原创 2018-07-23 16:46:27 · 3876 阅读 · 0 评论 -
font-size:0 —— 解决inline、inline-block元素间的空白间隙
很多时候我们都会遇到这么个问题:display为inline和inline-block的时候,当你代码换行后,会在网页上产生一个空格,这个空格有可能会导致最后一个会掉下来。避免方法可以不换行,只不过这种方法很不好,所以一般都是设置 font-size:0如图: 一般我们是这样的: 内容和左图是挨着的,给人的呈现感很好,这里的font-size:0; 但是当font-size为负...原创 2018-07-26 10:36:25 · 1201 阅读 · 0 评论 -
js中arguments到底是什么?
类数组对象:arguments总所周知,js是一门相当灵活的语言。当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面,那么这到底是什么东西?在js中万物皆对象,甚至数组字符串函数都是对象。所以这个叫做arguments的东西...转载 2018-07-31 19:41:43 · 278 阅读 · 0 评论 -
js实现轮播图原理及示例(转)
网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式: div+css代码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt;转载 2018-07-27 21:25:44 · 12687 阅读 · 0 评论 -
轮播图的实现原理
一、实现轮播图最主要的就是定时器 (setInterval 函数和 clearInterval 函数),他们分别是定时和清除定时。二 、html代码如下:<div class="warp"> <div class="mod-tab"> <ul id="list"> <li class="转载 2018-07-27 22:11:46 · 4703 阅读 · 0 评论 -
搞定所有的跨域请求问题: jsonp & CORS
网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置。本文解决跨域中的 get、post、data、cookie 等这些问题。本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式。JSONP前端 jQuery 写法 后端 SpringMVC 配置 ...原创 2018-08-15 16:50:03 · 1203 阅读 · 0 评论 -
快速创建一个vue项目
身为入行未深的小白前端,不断的学习是我们不可丢失的习惯。前端流行的框架也是层出不穷,vue在众多框架中脱颖而出。今天花了两个小时的时间自己走了一边创建vue项目的流程,跟你们分享。1:打开cmd命令行,首先安装node步骤:https://nodejs.org/en/dow...转载 2018-08-12 10:47:29 · 677 阅读 · 0 评论 -
px和em的区别
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化f...原创 2018-08-02 12:07:55 · 10366 阅读 · 0 评论 -
项目:Vue.js高仿饿了吗外卖APP(二)
【vue】饿了吗项目 – goods商品列表开发(PS:结合自己这几天看的,以及前人给出的经验,借鉴他人的博客,总结出下面的内容)1.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink 一个数字,规定项目将相对于其他灵活的项目...原创 2018-08-02 12:02:35 · 3175 阅读 · 1 评论 -
vue饿了吗学习笔记 – webpack版本问题
问题webpack版本最近在学习慕课网的vue.js高仿饿了么外卖APP,在项目准备时就遇到了webpack版本问题。视频中使用的webpack是1.12.2,而现在的webpack 版本已经到了3.6,原先的代码已经不适用了。言归正传,当我们想给我们的mock data设置一个接口请求,原版本是配置在dev-s...转载 2018-08-02 10:18:15 · 613 阅读 · 0 评论 -
es6 javascript的Iterator 和 for...of 循环
1 Iterator( 遍历器) 的概念JavaScript 原有的表示“ 集合” 的数据结构, 主要是数组( Array) 和对象( Object), ES6 又添加了 Map 和 Set。 这样就有了四种数据集合, 用户还可以组合使用它们, 定义自己的数据结构, 比如数...转载 2018-08-14 14:03:55 · 153 阅读 · 0 评论 -
如何获取UA?
通过JS获取浏览器UA(User Agent,用户代理)&lt;script&gt;function whatBrowser() {//获取完整的浏览器名称document.Browser.Name.value=navigator.appName; //获取浏览器的版本,一般不与实际的浏览器版本对应document.Browser.Version.value=navigator.ap...原创 2018-08-01 21:03:04 · 6003 阅读 · 0 评论