前端面试题总结fanmengfei

1. CSS 盒子模型,绝对定位和相对定位?

① 盒模型

背景会应用于元素内容、内边距、边框三者组成的区域;

margin值可以设置为负值,很多情况下会需要使用margin负值;padding没有负数;

浏览器的兼容性:IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素

② 绝对定位和相对定位

绝对定位会隐式改变元素的display类型,同元素设置float:left | right;时一样,都会隐式将元素的display设置为inline-block;

但是float在IE6下的双边距bug就是用display:inline; 来解决的。

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法?

浮动带来的影响——父元素高度塌陷了,此时就需要来清楚浮动

3. 如何保持浮层水平垂直居中

4. 样式的层级关系,选择器优先级,样式冲突,以及抽离样式模块怎么写,说出思路,有无实践经验

1、样式的层级关系:一个是权重,另一个就是共用样式和私用样式了,比如说两个ul,它们的子元素除了背景色之外都一样,那可以直接用li {}来定义相同的公用样式,用 .ul_1 li {} , .ul_2 li {} 来定义不相同的样式。可以根据元素之间的差别来选择用哪种方法。推荐用多层级的方式书写css选择器

2、选择器优先级:(!important>)id选择器>class选择器(属性选择器/伪类选择器)>标签选择器(伪元素选择器) 同类选择符条件下层级越多的优先级越高。优先级就近原则,同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。

基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。

4、抽离样式模块    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。        最简单的初始化方法: * {padding: 0; margin: 0;} (强烈不建议)        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }        h1, h2, h3, h4, h5, h6{ font-size:100%; }        address, cite, dfn, em, var { font-style:normal; }        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }        small{ font-size:12px; }        ul, ol { list-style:none; }        a { text-decoration:none; }        a:hover { text-decoration:underline; }        sup { vertical-align:text-top; }        sub{ vertical-align:text-bottom; }        legend { color:#000; }        fieldset, img { border:0; }        button, input, select, textarea { font-size:100%; }        table { border-collapse:collapse; border-spacing:0; }

7. px和em和rem的区别,CSS中link 和@import的区别是?

px和em和rem的区别

CSS中link 和@import的区别参考博客

8. 了解过flex吗?

JavaScript篇

1. JavaScript 里有哪些数据类型,解释清楚原始数据类型和引用数据类型解释清楚 null 和 undefined,。讲一下 1 和 Number(1)的区别

原始类型(基本类型):按值访问,可以操作保存在变量中实际的值。原始类型汇总中null和undefined比较特殊。

引用类型:引用类型的值是保存在内存中的对象。

undefeated和null:

Undefined类型  Undefined只有一个值,即特殊的undefined,使用var声明变量但未对其初始化时的值;  使用已声明但未初始化但变量,将得到“undefined”;使用未声明但变量,将会报错;  var message;  //声明变量,但未初始化,默认值未undefined  alert(message);  //弹出框将显示message但值,即“undefined  alert(age);   //将产生错误  使用typeof操作符对已声明但未初始化的变量和尚未被声明的变量所返回的值均未“undefined”  var message;  alert(typeof message);   //显示undefeated  alert(typeof age);  //显示undefined  即使未初始化的变量会自动赋予undefined值,但仍然推荐显示但初始化变量,这样在使用typeof操作符返回“undefined”值时,就能知道被检测到的变量还未被声明,而不是尚未初始化;

Null类型  只有一个值,即特殊的null;  逻辑角度看,null值表示一个空对象指针,所以 “typeof null“ 返回的是“object”;  若定义的变量准备在将来用于保存对象,则推荐将该变量初始化为null,而不是其他值;  undefined值是派生自null值,所以“null == undefined“的值是true;  无论在什么情况下都没有必要吧一个变量显式的设置为undefined;只要意在保存对象的变量在还没有真正保存对象时都应该明确地设置为null值;

讲一下 1 和 Number(1)的区别

1是Number类型,是常量。  Number(1)是对1执行Number类包装,会对传入的参数去两侧空格,去掉引号,如果是纯数字,则返回纯数字,否则返回NaN

参考文档:

2.  讲一下 prototype 是什么东西,原型链的理解,什么时候用 prototype

prototype是函数对象上面预设的对象属性

Object / function F(){} 这样子的就是构造函数,一个是JS原生API提供的,一个是自定义的

new Object() / new F() 这样子的就是实例

实例就"只能"查看__proto__来得知自己是基于什么prototype被制造出来的,而"不能"再重新定义实例的prototype妄想创造出实例的实例了。

原型

是一个对象上面的原型,这个原型通常是它的构造器的prototype属性

原型链

什么时候用 prototype

使用 prototype的好处是不会额外产生内存,所有实例化后的对象都会从原型上继承这个方法。也就是需要一个子类拥有父类的某些特性(同种特性可以覆盖),又可以添加自己的特性,而不会影响父类时候使用prototype。

Prototype通常用来解决一个问题:对象的创建比较耗费资源。比如,对象创建的时候需要访问数据库、需要读取外部文件、需要使用网络,这些都是比较耗费时间和内存的。如果可以用clone来解决,就方便多了。当需要创建很多 拥有相同属性的对象时候需要clone。

3. 函数里的this什么含义,什么情况下用

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象

4. apply和 call 什么含义,什么区别?什么时候用。

call和apply都用于函数调用,和使用函数名直接调用不同,call和apply可以指定一个额外的参数作为函数体内的this对象。

由于call和apply可以改变函数体内的this指向,因此通常被用来将一个对象原型上的方法应用到另一个对象上。

参考文档:

5. 数组和对象有哪些原生方法,列举一下,分别是什么含义,比如连接两个数组用哪个方法,删除数组的指定项和重新组装数组(操作数据的重点)。

数组

6. 怎样避免全局变量污染?ES5严格模式的作用,ES6箭头函数和ES5普通函数一样吗?

怎样避免全局变量污染?

方法一:只创建一个全局变量。

方法二:使用闭包

对于闭包,还有一个方法,就是使用匿名自执行函数,其实这货就是个如假包换的闭包,所有代码写在其中,在它内部声明的变量全部都是局部变量,一般用来写完全独立的脚本,比如jQuery,插件等。。。

方法三:0全局变量

这个方法直接杜绝了全局变量,那就是不在全局声明变量(包括隐式声明全局变量);

ES5严格模式的作用,ES6箭头函数和ES5普通函数一样吗?

1、消除javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

2、消除代码运行的一些不安全性,促进代码运行的安全;

3、提高编译器效率,增加运行速度;

4、为未来新版本的javascript做好铺垫

1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

this对象的指向是可变的,但是在箭头函数中,它是固定的。

7. JS 模块包装格式都用过哪些,CommonJS、AMD、CMD。定义一个JS 模块代码,最精简的格式是怎样。

8. JS 怎么实现一个类。怎么实例化这个类。

严格的说,JavaScript 是基于对象的编程语言,而不是面向对象的编程语言。  在面向对象的编程语言中(如Java、C++、C#、PHP等),声明一个类使用 class 关键字。  例如:public class Person{}  但是在JavaScript中,没有声明类的关键字,也没有办法对类的访问权限进行控制。

JavaScript使用函数来定义类。

语法:  function className(){      // 具体操作  }

说明:this关键字是指当前的对象。

创建对象(类的实例化)

创建对象的过程也是类实例化的过程。  在JavaScript中,创建对象(即类的实例化)使用 new 关键字。  语法:  new className();

面向对象编程的基本概念

面向对象编程(Object Oriented Programming,OOP,面向对象程序设计) 的主要思想是把构成问题的各个事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙一个事物在整个解决问题的步骤中的行为。  面向过程就是分析出解决问题所需要的步骤,然后用函数逐步实现,再依次调用就可以了。

面向对象与面向过程是两种不同的编程思想,没有哪一种方式绝对完美,需要根据程具体项目来定。比如,开发一个小的软件或网页,工程量小,短时间内就可完成,完全可以采用面向过程的开发方式,使用面向对象,反而会增加代码量,减缓运行效率。

面向过程的编程语言(如C语言)不能创建类和对象,不能用面向对象的方式来开发程序;面向对象的编程语言(如Java、C++、PHP)保留了面向过程的关键字和语句,可以采用面向过程的方式来开发程序。

类的继承

一个类可以继承另一个类的特征,如同儿子继承父亲的DNA、性格和财产等,与现实生活中的继承类似。

9. 理解闭包吗?请讲一讲闭包在实际开发中的作用;闭包建议频繁使用吗?

闭包:就是一个获取并访问某个作用域,可在外访问或者自身内部访问。

最大的两个作用

读取函数内部变量

让变量值始终保持在内存里

result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作

管理私有变量和私有方法,将对变量(状态)的变化封装在安全的环境中

将代码封装成一个闭包形式,等待时机成熟的时候再使用,比如实现柯里化和反柯里化

需要注意的:

由于闭包内的部分资源无法自动释放,容易造成内存泄露 解决方法是,在退出函数之前,将不使用的局部变量全部删除。

闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

建议不要深度的使用闭包,那样的代码非常难以维护以及理解。

10.说一下了解的js 设计模式,解释一下单例、工厂、观察者。

需要了解的几个设计模式:

跨域:

上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

如果页面编码和被请求的资源编码不一致如何处理?

描述:

提示的是某某变量未定义,我就百度了。 没找到我想要的答案,  灵机一动想到是不是编码问题 。于是在js后加了 charset="utf-8" 这个 。

发现还真好了。 。 绕了好些圈子 。 这次记下了。避免下次再遇到类似的状况。

开源工具

gulp是工具链,可以配合各种插件做js压缩,css压缩,less编译等工作

webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件

bower是包管理器,用来管理你项目里的那些外部依赖的。

2. Git常用命令

计算机网络基础

1. 说一下HTTP 协议头字段说上来几个,是否尽可能详细的掌握HTTP协议。一次完整的HTTP事务是怎样的一个过程?

cookies 是干嘛的?

网页是没有记忆的.一个用户浏览同一个网站的不同的网页将会被网站视为完全新的访问者.当我们浏览同一个网站的不同网页时,会话cookie使得我们正在访问的网站能不用重复要求我们提供已经给过的信息.

最常见的例子是电商网站的购物车, 当你访问一个类目页面,选择一些商品,cookie会记住你的选择,因此当你下单时购物车会有相应的商品.

如果没有cookie,当你下单时,新的页面将不能记住你之前的选择,购物车也将是空的.

当然你可以调整你的浏览器的cookie设置.

持久型cookie是干嘛的?

当你未来访问网站时持久cookie帮助网站记得你的信息.

服务器和浏览器之间的 cookies 是怎么传的?

请描述一下cookies,sessionStorage和localStorage的区别?

4.是否了解Web注入攻击,说下原理,最常见的两种攻击(XSS 和 CSRF)了解到什么程度。

5.是否了解公钥加密和私钥加密。如何确保表单提交里的密码字段不被泄露。验证码是干嘛的,是为了解决什么安全问题。

验证码是干嘛的,是为了解决什么安全问题:

6.编码常识:文件编码、URL 编码、Unicode编码 什么含义。一个gbk编码的页面如何正确引

url编码

url编码是一种浏览器用来打包表单输入的格式,URL编码遵循下列规则: 每对name/value由&;符分开;每对来自表单的name/value由=符分开。如果用户没有输入值给这个name,那么这个name还是出现,只是无值。任何特殊的字符(就是那些不是简单的七位ASCII,如汉字)将以百分符%用十六进制编码,当然也包括象 =,&;,和 % 这些特殊的字符。其实url编码就是一个字符ascii码的十六进制。不过稍微有些变动,需要在前面加上“%”。比如“\”,它的ascii码是92,92的十六进制是5c,所以“\”的url编码就是%5c。那么汉字的url编码呢?很简单,看例子:“胡”的ascii码是-17670,十六进制是BAFA,url编码是“%BA%FA”。

escape(),encodeURI() 和 encodeURIComponent() 编码函数是JavaScript编程中非常常用的几个函数。

前端框架

1.对 MVC、MVVM的理解?

MVC是一种架构模式,M表示Model,V表示视图View,C表示控制器Controller:

3.前后分离的思想了解吗?

前后端先定义接口,比如约定只用json数据进行互相通信。

但是前台的页面跳转,可能就是用前台框架路由的概念去跳转,跳转后去 ajax请求后台 获得新页面需要的json数据。

单写前台时 应该有模拟静态数据的工具,支持只用前台用静态数据 去开发一套页面。然后后台开发好之后,把和后台对接的接口数据 数据

THE END
0.封面设计(精选5篇)文字的处理、安排、选用应让人一目了然,如一个字可以看成一个点,一行字可以看成一条线,一段文字可以看成一个面等,因此,在编排版面时,文字与图片应相对合理布局,有的放矢,层次分明,灵动鲜活,以达到图文并茂的效果。 随着期刊业的繁荣发展,我国期刊的封面设计总体水平有了很大的提高、新兴的科技为封面设计注入jvzquC41yy}/3vnujw4dqv4jcq}fp862;9930qyon
1.初中历史新教材培训心得(通用15篇)这是新课标改革带来的好处。同时,我也深刻认识到,新课标改革对老师的知识水平,能力水平的要求都很高,我一定要更加努力学习更多的知识,一边使自己适应新课标改革下对教师的要求。 初中历史新教材培训心得 4 在暑假期间农垦总局组织我们历史教师在农垦教育学院进行了集中培训,我有幸参加,感觉受益匪浅。jvzquC41yy}/qq6220ipo8f14283394759<57;3jvor
2.课程与教学问题范文通过工程制图、建筑材料、房屋建筑学、建筑结构等专业基础课程的学习,学生初步掌握了图纸的识图与绘制、房屋各部分的构造组成以及材料的鉴别能力。但这里忽略了一个问题,高职学生有其自身显著的特点,其优势是动手能力强,擅长趣味性的情境记忆;其弱势是理论基础差,对单向灌输、抽象空洞的理论讲解不愿意学。从学生的心理jvzquC41yy}/i€~qq0ipo8mcqyko1;;5;27/j}rn