快捷搜索:  as  English

面试问题答案综合版(web)

$HTML, HTTP,web综合问题

1、前端必要留意哪些SEO

2、的title和alt有什么差别

3、HTTP的几种哀求措施用途

4、从浏览器地址栏输入url到显示页面的步骤

5、若何进行网站机能优化

6、HTTP状态码及其含义

7、语义化的理解

8、先容一下你对浏览器内核的理解

9、html5有哪些新特点、移除了那些元素?

10、HTML5的离线储存怎么应用,事情道理能不能解释一下?

11、浏览器是怎么对HTML5的离线储存资本进行治理和加载的呢

12、请描述一下 cookies,sessionStorage 和 localStorage 的差别

13、iframe有那些毛病?

14、WEB标准以及W3C标准是什么?

15、xhtml和html有什么差别?

16、Doctype感化? 严格模式与稠浊模式若何区分?它们有何意义?

17、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么差别?

18、HTML全局属性(global attribute)有哪些

19、Canvas和SVG有什么差别?

20、HTML5 为什么只必要写 ?

21、若何在页面上实现一个圆形的可点击区域?

22、网页验证码是干嘛的,是为了办理什么安然问题

23、viewport

24、衬着优化

$CSS部分

1、css sprite是什么,有什么优毛病

2、display: none;与visibility: hidden;的差别

3、link与@import的差别

4、什么是FOUC?若何避免

5、若何创建块级款式化高低文(block formatting context),BFC有什么用

7、清除浮动的几种要领,各自的优毛病

8、为什么要初始化CSS样式?

9、css3有哪些新特点

10、display有哪些值?阐明他们的感化

11、先容一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不合的?

12、CSS优先级算法若何谋略?

13、对BFC规范的理解?

14、谈谈浮动和清除浮动

15、position的值, relative和absolute`定位原点是

16、display:inline-block 什么时刻不会显示间隙?(携程)

17、PNG,GIF,JPG的差别及若何选

18、行内元素float:left后是否变为块级元素?

19、在网页中的应该应用奇数照样偶数的字体?为什么呢?

20、::before 和 :after中双冒号和单冒号有什么差别?解释一下这2个伪元素的感化

21、假如必要手动写动画,你觉得最小光阴距离是多久,为什么?(阿里)

22、CSS合并措施

23、CSS不合选择器的权重(CSS层叠的规则)

24、列出你所知道可以改变页面结构的属性

25、CSS在机能优化方面的实践

26、CSS3动画(简单动画的实现,如扭转等)

27、base64的道理及优毛病

28、几种常见的CSS结构

29、stylus/sass/less差别

30、postcss的感化

31、css样式(选择器)的优先级

32、自定义字体的应用处景

33、若何美化CheckBox

34、伪类和伪元素的差别

35、base64的应用

$JavaScript

1、闭包

2、说说你对感化域链的理解

3、JavaScript原型,原型链 ? 有什么特征?

4、请解释什么是事故代理

5、Javascript若何实现承袭?

6、谈谈This工具的理解

7、事故模型

8、new操作符详细干了什么呢?

9、Ajax道理

11、模块化开拓怎么做?

12、异步加载JS的要领有哪些?

13、那些操作会造成内存透露?

14、XML和JSON的差别?

15、谈谈你对webpack的见地

17、常见web安然及防护道理

18、用过哪些设计模式?

19、为什么要有同源限定?

20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的差别

21、javascript有哪些措施定义工具

22、常见兼容性问题?

22、说说你对promise的懂得

23、你感觉jQuery源码有哪些写的好的地方

25、Node的利用处景

26、谈谈你对AMD、CMD的理解

27、那些操作会造成内存透露?

28、web开拓中会话跟踪的措施有哪些

29、先容js的基础数据类型

30、先容js有哪些内置工具?

31、说几条写JavaScript的基础规范?

32、JavaScript有几种类型的值?,你能画一下他们的内存图吗?

33、javascript创建工具的几种要领?

34、eval是做什么的?

35、null,undefined 的差别?

36、[“1”, “2”, “3”].map(parseInt) 谜底是若干?

37、javascript 代码中的”use strict”;是什么意思 ? 应用它差别是什么?

38、JSON的懂得?

39、js延迟加载的要领有哪些?

40、同步和异步的差别?

41、渐进增强和优雅降级

42、defer和async

43、说说严格模式的限定

44、attribute和property的差别是什么?

45、谈谈你对ES6的理解

46、ECMAScript6 怎么写class么,为什么会呈现class这种器械?

47、什么是面向工具编程及面向历程编程,它们的异同和优毛病

48、从你自己的理解来看,你是若何理解面向工具编程的,它办理了什么问题,有什么感化

49、对web标准、可用性、可造访性的理解

50、若何经由过程JS判断一个数组?

51、谈一谈let与var的差别?

52、map与forEach的差别?

53、谈一谈你理解的函数式编程?

54、谈一谈箭头函数与通俗函数的差别?

55、谈一谈函数中this的指向吧?

56、异步编程的实现要领?

57、对原生Javascript懂得程度

58、Js动画与CSS动画差别及响应实现

59、JS 数组和工具的遍历要领,以及几种要领的对照

60、简述gulp是什么?

61、说一下Vue的双向绑定命据的道理

62、事故的各个阶段

63、let var const

64、快速的让一个数组乱序

$jQuery

1、你感觉jQuery或zepto源码有哪些写的好的地方

2、jQuery 的实现道理?

3、jQuery.fn 的 init 措施返回的 this 指的是什么工具? 为什么要返回 this?

4、jQuery.extend 与 jQuery.fn.extend 的差别?

5、jQuery 的属性拷贝(extend)的实现道理是什么,若何实现深拷贝?

6、jQuery 的行列步队是若何实现的?行列步队可以用在哪些地方?

7、jQuery 中的bind(), live(), delegate(), on()的差别?

8、是否知道自定义事故? jQuery 里的 fire 函数是什么意思,什么时刻用?

9、jQuery 经由过程哪个措施和 Sizzle 选择器结合的?

10、jQuery 中若何将数组转化为 JSON字符串,然后再转化回来?

11、jQuery 一个工具可以同时绑定多个事故,这是若何实现的?

12、针对 jQuery的优化措施?

13、jQuery 的 slideUp 动画,当鼠标快速继续触发, 动画会滞后反复履行,该若何处置惩罚呢?

14、jQuery UI 若何自定义组件?

15、jQuery 与 jQuery UI、jQuery Mobile差别?

16、jQuery 和 Zepto 的差别? 各自的应用处景?

17、jQuery工具的特征

$编程题

1、写一个通用的事故侦听器函数

2、若何判断一个工具是否为数组

3、冒泡排序

4、快速排序

5、编写一个措施 求一个字符串的字节长度

$其他

1、谈谈你对重构的理解

2、什么样的前端代码是好的

3、对前端工程师这个职位是怎么样理解的?它的前景会怎么样?

4、你感觉前端工程的代价体现在哪

5、日常平凡若何治理你的项目?

人事面

口试完你还有什么问题要问的吗

你有什么喜欢?

你最大年夜的优点和毛病是什么?

你为什么会选择这个行业,职位?

你感觉你得当从事这个岗位吗?

你有什么职业筹划?

你对人为有什么要求?

若何看待前端开拓?

未来三到五年的筹划是如何的?

常问

自我先容

你的项目中技巧难点是什么?碰到了什么问题?你是怎么办理的?

你觉得哪个项目做得最好?

近来在看哪些前端方面的书?

日常平凡是若何进修前端开拓的?

你最有成绩感的一件事

$HTML, HTTP,web综合问题

1、前端必要留意哪些SEO

合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,紧张关键词呈现不要跨越2次,而且要靠前,不合页面title要有所不合;description把页面内容高度概括,长度相宜,弗成过分堆砌关键词,不合页面description有所不合;keywords枚举出紧张关键词即可

语义化的HTML代码,相符W3C规范:语义化代码让搜索引擎轻易理解网页

紧张内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限定,包管紧张内容必然会被抓取

紧张内容不要用js输出:爬虫不会履行js获取内容

少用iframe:搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt

前进网站速率:网站速率是搜索引擎排序的一个紧张指标

2、的title和alt有什么差别

平日当鼠标滑动到元素上的时刻显示

alt是的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器涉猎图片。可提图片高可造访性,除了纯装饰图片外都必须设置故意义的值,搜索引擎会重点阐发。

3、HTTP的几种哀求措施用途

1、GET措施

发送一个哀求来取得办事器上的某一资本

2、POST措施

向URL指定的资本提交数据或附加新的数据

3、PUT措施

跟POST措施很像,也是想办事器提交数据。然则,它们之间有不合。PUT指定了资本在办事器上的位置,而POST没有

4、HEAD措施

只哀求页面的首部

5、DELETE措施

删除办事器上的某资本

6、OPTIONS措施

它用于获取当前URL所支持的措施。假如哀求成功,会有一个Allow的头包孕类似“GET,POST”这样的信息

7、TRACE措施

TRACE措施被用于引发一个远程的,利用层的哀求消息回路

8、CONNECT措施

把哀求连接转换到透明的TCP/IP通道

4、从浏览器地址栏输入url到显示页面的步骤

浏览器根据哀求的URL交给DNS域名解析,找到真实IP,向办事器提议哀求;

办事器交给后台处置惩罚完成后返回数据,浏览器接管文件(HTML、JS、CSS、图象等);

浏览器对加载到的资本(HTML、JS、CSS等)进行语法解析,建立响应的内部数据布局(如HTML的DOM);

载入解析到的资本文件,衬着页面,完成。

5、若何进行网站机能优化

content方面

削减HTTP哀求:合并文件、CSS精灵、inline Image

削减DNS查询:DNS缓存、将资本散播到恰当数量的主机名

削减DOM元素数量

Server方面

应用CDN

设置设置设备摆设摆设ETag

对组件应用Gzip压缩

Cookie方面

减小cookie大年夜小

css方面

将样式表放到页面顶部

不应用CSS表达式

应用不应用@import

Javascript方面

将脚本放到页面底部

将javascript和css从外部引入

压缩javascript和css

删除不必要的脚本

削减DOM造访

图片方面

优化图片:根据实际颜色必要选择色深、压缩

优化css精灵

不要在HTML中拉伸图片

6、HTTP状态码及其含义

1XX:信息状态码

100 Continue 继承,一样平常在发送post哀求时,已发送了http header之后办事端将返回此信息,表示确认,之后发送详细参数信息

2XX:成功状态码

200 OK 正常返复书息

201 Created 哀求成功并且办事器创建了新的资本

202 Accepted 办事器已吸收哀求,但尚未处置惩罚

3XX:重定向

301 Moved Permanently 哀求的网页已永远移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向,且老是应用 GET 哀求新的 URI。

304 Not Modified 自从上次哀求后,哀求的网页未改动过。

4XX:客户端差错

400 Bad Request 办事器无法理解哀求的款式,客户端不该当考试测验再次应用相同的内容提议哀求。

401 Unauthorized 哀求未授权。

403 Forbidden 禁止造访。

404 Not Found 找不到若何与 URI 相匹配的资本。

5XX: 办事器差错

500 Internal Server Error 最常见的办事器端差错。

503 Service Unavailable 办事器端暂时无法处置惩罚哀求(可能是过载或掩护)。

7、语义化的理解

用精确的标签做精确的工作!

html语义化便是让页面的内容布局化,便于对浏览器、搜索引擎解析;

在没有样式CSS环境下也以一种文档款式显示,并且是轻易涉猎的。

搜索引擎的爬虫依附于标记来确定高低文和各个关键字的权重,利于 SEO。

使涉猎源代码的人对网站更轻易将网站分块,便于涉猎掩照料护士解

8、先容一下你对浏览器内核的理解?

主要分成两部分:衬着引擎(layout engineer或Rendering Engine)和JS引擎

衬着引擎:认真取得网页的内容(HTML、XML、图像等等)、收拾讯息(例如加入CSS等),以及谋略网页的显示要领,然后会输出至显示器或打印机。浏览器的内核的不合对付网页的语法解释会有不合,以是衬着的效果也不相同。所有网页浏览器、电子邮件客户端以及其它必要编辑、显示收集内容的利用法度榜样都必要内核

JS引擎则:解析和履行javascript来实现网页的动态效果

最开始衬着引擎和JS引擎并没有区分的很明确,后来JS引擎越来越自力,内核就倾向于只指衬着引擎

9、html5有哪些新特点、移除了那些元素?

HTML5 现在已经不是 SGML 的子集,主如果关于图像,位置,存储,多义务等功能的增添

绘画 canvas

用于序言回放的 video 和 audio 元素

本地离线存储 localStorage 经久存储数据,浏览器关闭后数据不损掉

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素,比如article、footer、header、nav、section

表单控件,calendar、date、time、email、url、search

新的技巧webworker, websocket, Geolocation

移除的元素:

纯体现的元素:basefont,big,center,font, s,strike,tt,u`

对可用性孕育发生负面影响的元素:frame,frameset,noframes

支持HTML5新标签:

IE8/IE7/IE6支持经由过程document.createElement措施孕育发生的标签

可以使用这一特点让这些浏览器支持HTML5新标签

浏览器支持新标签后,还必要添加标签默认的样式

当然也可以直接应用成熟的框架、比如html5shim

10、HTML5的离线储存怎么应用,事情道理能不能解释一下?

在用户没有与因特网连接时,可以正常造访站点或利用,在用户与因特网连接时,更新用户机械上的缓存文件

道理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技巧),经由过程这个文件上的解析清单离线存储资本,这些资本就会像cookie一样被存储了下来。之后当收集在处于离线状态下时,浏览器会经由过程被离线存储的数据进行页面展示

若何应用:

页面头部像下面一样加入一个manifest的属性;

在cache.manifest文件的编写离线存储的资本

在离线状态时,操作window.applicationCache进行需求实现

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

11、浏览器是怎么对HTML5的离线储存资本进行治理和加载的呢

在线的环境下,浏览器发明html头部有manifest属性,它会哀求manifest文件,假如是第一次造访app,那么浏览器就会根据manifest文件的内容下载响应的资本并且进行离线存储。假如已经造访过app并且资本已经离线存储了,那么浏览器就会应用离线的资本加载页面,然后浏览器会比较新的manifest文件与旧的manifest文件,假如文件没有发生改变,就不做任何操作,假如文件改变了,那么就会从新下载文件中的资本并进行离线存储。

离线的环境下,浏览器就直接应用离线存储的资本。

12、请描述一下 cookies,sessionStorage 和 localStorage 的差别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(平日颠末加密)

cookie数据始终在同源的http哀求中携带(纵然不必要),记会在浏览器和办事器间往返通报

sessionStorage和localStorage不会自动把数据发给办事器,仅在本地保存

存储大年夜小:

cookie数据大年夜小不能跨越4k

sessionStorage和localStorage虽然也有存储大年夜小的限定,但比cookie大年夜得多,可以达到5M或更大年夜

有期光阴:

localStorage 存储持久数据,浏览器关闭后数据不损掉除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过韶光阴之前不停有效,纵然窗口或浏览器关闭

13、iframe有那些毛病?

iframe会壅闭主页面的Onload事故

搜索引擎的检索法度榜样无法解读这种页面,晦气于SEO

iframe和主页面共享连接池,而浏览器对相同域的连接有限定,以是会影响页面的并行加载

应用iframe之前必要斟酌这两个毛病。假如必要应用iframe,最好是经由过程javascript动态给iframe添加src属性值,这样可以绕开以上两个问题

14、WEB标准以及W3C标准是什么?

标签闭合、标签小写、不乱嵌套、应用外链css和js、布局行径体现的分离

15、xhtml和html有什么差别?

一个是功能上的区别

主如果XHTML可兼容各大年夜浏览器、手机以及PDA,并且浏览器也能快速精确地编译网页

别的是书写习气的区别

XHTML 元素必须被精确地嵌套,闭合,区分大年夜小写,文档必须拥有根元素

16、Doctype感化? 严格模式与稠浊模式若何区分?它们有何意义?

页面被加载的时,link会同时被加载,而@imort页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别,而link是XHTML标签,无兼容问题

link要领的样式的权重 高于@import的权重

声明位于文档中的最前面,处于标签之前。见告浏览器的解析器, 用什么文档类型 规范来解析这个文档

严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行

在稠浊模式中,页面以宽松的向后兼容的要领显示。模拟老式浏览器的行径以防止站点无法事情。 DOCTYPE不存在或款式不精确会导致文档以稠浊模式出现

17、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么差别?

行内元素有:a b span img input select strong

块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

空元素:

行内元素弗成以设置宽高,不独有一行

块级元素可以设置宽高,独有一行

18、HTML全局属性(global attribute)有哪些

class:为元素设置类标识

data-*: 为元素增添自定义属性

draggable: 设置元素是否可拖拽

id: 元素id,文档内独一

lang: 元素内容的的说话

style: 行内css样式

title: 元素相关的建议信息

19、Canvas和SVG有什么差别?

svg绘制出来的每一个图形的元素都是自力的DOM节点,能够方便的绑定事故或用来改动。canvas输出的是一整幅画布

svg输出的图形是矢量图形,后期可以改动参数来自由放大年夜缩小,不会是真和锯齿。而canvas输出标量画布,就像一张图片一样,放大年夜会掉真或者锯齿

20、HTML5 为什么只必要写 ?

HTML5 不基于 SGML,是以不必要对DTD进行引用,然则必要doctype来规范浏览器的行径

而HTML4.01基于SGML,以是必要对DTD进行引用,才能见告浏览器文档所应用的文档类型

21、若何在页面上实现一个圆形的可点击区域?

svg

border-radius

纯js实现 必要求一个点在不在圆上简单算法、获取鼠标坐标等等

22、网页验证码是干嘛的,是为了办理什么安然问题

区分用户是谋略机照样人的公共全自动法度榜样。可以防止恶意破解密码、刷票、论坛注水

有效防止黑客对某一个特定注册用户用特定法度榜样暴力破解要领进行赓续的登岸考试测验

23、viewport

// width设置viewport宽度,为一个正整数,或字符串‘device-width’

// device-width设备宽度

// height设置viewport高度,一样平常设置了宽度,会自动解析出高度,可以不用设置

// initial-scale默认缩放比例(初始缩放比例),为一个数字,可以带小数

// minimum-scale容许用户最小缩放比例,为一个数字,可以带小数

// maximum-scale容许用户最大年夜缩放比例,为一个数字,可以带小数

// user-scalable是否容许手动缩放

延伸提问

如何处置惩罚 移动端 1px 被 衬着成 2px问题

局部处置惩罚

mate标签中的 viewport属性 ,initial-scale 设置为 1

rem按照设计稿标准走,外加使用transfrome 的scale(0.5) 缩小一倍即可;

全局处置惩罚

mate标签中的 viewport属性 ,initial-scale 设置为 0.5

rem 按照设计稿标准走即可

24、衬着优化

禁止应用iframe(壅闭父文档onload事故)

iframe会壅闭主页面的Onload事故

搜索引擎的检索法度榜样无法解读这种页面,晦气于SEO

iframe和主页面共享连接池,而浏览器对相同域的连接有限定,以是会影响页面的并行加载

应用iframe之前必要斟酌这两个毛病。假如必要应用iframe,最好是经由过程javascript

动态给iframe添加src属性值,这样可以绕开以上两个问题

禁止应用gif图片实现loading效果(低落CPU耗损,提升衬着机能)

应用CSS3代码代替JS动画(尽可能避免重绘重排以及回流)

对付一些小图标,可以应用base64位编码,以削减收集哀求。但不建议大年夜图应用,对照消费CPU

小图标上风在于

削减HTTP哀求

避免文件跨域

改动及时生效

页面头部的

2.)子窗口:(http://child.domain.com/b.html)

document.domain = 'domain.com';

// 获取父窗口中变量

alert('get js data from parent ---> ' + window.parent.user);

nginx代理跨域

nodejs中心件代理跨域

后端在头部信息里面设置安然域名

11、模块化开拓怎么做?

急速履行函数,不裸露私有成员

var module1 = (function(){

var _count = 0;

var m1 = function(){

//...

};

var m2 = function(){

//...

};

return {

m1 : m1,

m2 : m2

};

})();

12、异步加载JS的要领有哪些?

defer,只支持IE

async:

创建script,插入到DOM中,加载完毕后callBack

13、那些操作会造成内存透露?

内存透露指任何工具在您不再拥有或必要它之后仍旧存在

setTimeout 的第一个参数应用字符串而非函数的话,会激发内存透露

闭包应用欠妥

14、XML和JSON的差别?

数据体积方面

JSON相对付XML来讲,数据的体积小,通报的速率更快些。

数据交互方面

JSON与JavaScript的交互加倍方便,更轻易解析处置惩罚,更好的数据交互

数据描述方面

JSON对数据的描述性比XML较差

传输速率方面

JSON的速率要远远快于XML

15、谈谈你对webpack的见地

WebPack 是一个模块打包对象,你可以应用WebPack治理你的模块依附,并编绎输出模块们所需的静态文件。它能够很好地治理、打包Web开拓中所用到的HTML、Javascript、CSS以及各类静态文件(图片、字体等),闪开拓历程加倍高效。对付不合类型的资本,webpack有对应的模块加载器。webpack模块打包器会阐发模块间的依附关系,着末 天生了优化且合并后的静态资本

16、说说你对AMD和Commonjs的理解

CommonJS是办事器端模块的规范,Node.js采纳了这个规范。CommonJS规范加载模块是同步的,也便是说,只有加载完成,才能履行后面的操作。AMD规范则长短同步加载模块,容许指定回调函数

AMD保举的风格经由过程返回一个工具做为模块工具,CommonJS的风格经由过程对module.exports或exports的属性赋值来达到裸露模块工具的目的

17、常见web安然及防护道理

sql注入道理

便是经由过程把SQL敕令插入到Web表单递交或输入域名或页面哀求的查询字符串,终极达到诈骗办事器履行恶意的SQL敕令

总的来说有以下几点

永世不要相信用户的输入,要对用户的输入进行校验,可以经由过程正则表达式,或限定长度,对单引号和双"-"进行转换等

永世不要应用动态拼装SQL,可以应用参数化的SQL或者直接应用存储历程进行数据查询存取

永世不要应用治理员权限的数据库连接,为每个利用应用零丁的权限有限的数据库连接

不要把机密信息明文寄放,请加密或者hash掉落密码和敏感的信息

XSS道理及警备

Xss(cross-site scripting)进击指的是进击者往Web页面里插入恶意html标签或者javascript代码。比如:进击者在论坛中放一个看似安然的链接,骗取用户点击后,偷取cookie中的用户私密信息;或者进击者在论坛中加一个恶意表单,当用户提交表单的时刻,却把信息传送到进击者的办事器中,而不是用户蓝本以为的相信站点

XSS警备措施

首先代码里对用户输入的地方和变量都必要仔细反省长度和对””,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住跨越一半的XSS 进击

XSS与CSRF有什么差别吗?

XSS是获守信息,不必要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,必要知道其他用户页面的代码和数据包。要完成一次CSRF进击,受害者必须依次完成两个步骤

登录受相信网站A,并在本地天生Cookie

在不登出A的环境下,造访危险网站B

CSRF的防御

办事真个CSRF要领措施很多样,但总的思惟都是同等的,便是在客户端页面增添伪随机数

经由过程验证码的措施

18、用过哪些设计模式?

工厂模式:

工厂模式办理了重复实例化的问题,但还有一个问题,那便是识别问题,由于根本无法

主要好处便是可以打消工具间的耦合,经由过程应用工程措施而不是new关键字

构造函数模式

应用构造函数的措施,即办理了重复实例化的问题,又办理了工具识别的问题,该模式与工厂模式的不合之处在于

直接将属性和措施赋值给 this工具;

19、为什么要有同源限定?

同源策略指的是:协议,域名,端口相同,同源策略是一种安然协议

举例阐明:比如一个黑客法度榜样,他使用Iframe把真正的银行登录页面嵌到他的页面上,当你应用真实的用户名,密码登录时,他的页面就可以经由过程Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松得手了。

20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的差别

offsetWidth/offsetHeight返回值包孕content + padding + border,效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包孕content + padding,假如有滚动条,也不包孕滚动条

scrollWidth/scrollHeight返回值包孕content + padding + 溢出内容的尺寸

21、javascript有哪些措施定义工具

工具字面量: var obj = {};

构造函数: var obj = new Object();

Object.create(): var obj = Object.create(Object.prototype);

22、常见兼容性问题?

png24位的图片在iE6浏览器上呈现背景,办理规划是做成PNG8

浏览器默认的margin和padding不合。办理规划是加一个全局的*{margin:0;padding:0;}来统一,,然则全局效率很低,一样平常是如下这样办理:

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{

margin:0;

padding:0;

}

IE下,event工具有x,y属性,然则没有pageX,pageY属性

Firefox下,event工具有pageX,pageY属性,然则没有x,y属性.

22、说说你对promise的懂得

依照 Promise/A+ 的定义,Promise 有四种状态:

pending: 初始状态, 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 掉败的操作.

settled: Promise已被fulfilled或rejected,且不是pending

别的, fulfilled与 rejected一路合称 settled

Promise 工具用来进行延迟(deferred) 和异步(asynchronous) 谋略

Promise 的构造函数

构造一个 Promise,最基础的用法如下:

var promise = new Promise(function(resolve, reject) {

if (...) {// succeed

resolve(result);

} else {// fails

reject(Error(errMessage));

}

});

Promise 实例拥有 then 措施(具有 then 措施的工具,平日被称为thenable)。它的应用措施如下:

promise.then(onFulfilled, onRejected)

接管两个函数作为参数,一个在 fulfilled 的时刻被调用,一个在rejected的时刻被调用,接管参数便是 future,onFulfilled 对应resolve, onRejected对应 reject

23、你感觉jQuery源码有哪些写的好的地方

jquery源码封装在一个匿名函数的自履行情况中,有助于防止变量的全局污染,然后经由过程传入window工具参数,可以使window工具作为局部变量应用,好处是当jquery中造访window工具的时刻,就不用将感化域链退回到顶层感化域了,从而可以更快的造访window工具。同样,传入undefined参数,可以缩短查找undefined时的感化域链

jquery将一些原型属性和措施封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法

有一些数组或工具的措施常常能应用到,jQuery将其保存为局部变量以前进造访速率

jquery实现的链式调用可以节约代码,所返回的都是同一个工具,可以前进代码效率

24、vue、react、angular

Vue.js

一个用于创建 web 交互界面的库,是一个精简的 MVVM。它经由过程双向数据绑定把 View 层和 Model层连接了起来。实际的 DOM 封装和输出款式都被抽象为了Directives 和 Filters

AngularJS

是一个对照完善的前端MVVM框架,包孕模板,数据双向绑定,路由,模块化,办事,依附注入等所有功能,模板功能强大年夜富厚,自带了富厚的 Angular指令

react

React 仅仅是 VIEW 层是facebook公司。推出的一个用于构建UI的一个库,能够实现办事器真个衬着。用了virtual dom,以是机能很好。

25、Node的利用处景

特征:

1、它是一个Javascript运行情况

2、依附于Chrome V8引擎进行代码解释

3、事故驱动

4、非壅闭I/O

5、单进程,单线程

优点:

高并发(最紧张的优点)

毛病:

1、只支持单核CPU,不能充分使用CPU

2、靠得住性低,一旦代码某个环节崩溃,全部系统都崩溃

26、谈谈你对AMD、CMD的理解

CommonJS是办事器端模块的规范,Node.js采纳了这个规范。CommonJS规范加载模块是同步的,也便是说,只有加载完成,才能履行后面的操作。AMD规范则长短同步加载模块,容许指定回调函数

AMD保举的风格经由过程返回一个工具做为模块工具,CommonJS的风格经由过程对module.exports或exports的属性赋值来达到裸露模块工具的目的

27、那些操作会造成内存透露?

内存透露指任何工具在您不再拥有或必要它之后仍旧存在

setTimeout 的第一个参数应用字符串而非函数的话,会激发内存透露

闭包、节制台日志、轮回(在两个工具彼此引用且彼此保留时,就会孕育发生一个轮回)

28、web开拓中会话跟踪的措施有哪些

cookie

session

url重写

暗藏input

ip地址

29、先容js的基础数据类型

Undefined、Null、Boolean、Number、String

30、先容js有哪些内置工具?

Object 是 JavaScript 中所有工具的父工具

数据封装类工具:Object、Array、Boolean、Number 和 String

其他工具:Function、Arguments、Math、Date、RegExp、Error

31、说几条写JavaScript的基础规范?

不要在同一行声明多个变量

请应用===/!==来对照true/false或者数值

应用工具字面量替代new Array这种形式

不要应用全局函数

Switch语句必须带有default分支

If语句必须应用大年夜括号

for-in轮回中的变量 应该应用var关键字明确限制感化域,从而避免感化域污

32、JavaScript有几种类型的值?,你能画一下他们的内存图吗?

栈:原始数据类型(Undefined,Null,Boolean,Number、String)

堆:引用数据类型(工具、数组和函数)

两种类型的差别是:存储位置不合;

原始数据类型直接存储在栈(stack)中的简单数据段,盘踞空间小、大年夜小固定,属于被频繁应用数据,以是放入栈中存储;

引用数据类型存储在堆(heap)中的工具,盘踞空间大年夜、大年夜小不固定,假如存储在栈中,将会影响法度榜样运行的机能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的肇端地址。当说冥器探求引用值时,会首先检索其

在栈中的地址,取得地址后从堆中得到实体

image

33、javascript创建工具的几种要领?

javascript创建工具简单的说,无非便是应用内置工具或各类自定义工具,当然还可以用JSON;但写法有很多种,也能混杂应用

工具字面量的要领

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function来模拟无参的构造函数

function Person(){}

var person=new Person();//定义一个function,

//假如应用new"实例化",该function可以看作是一个Class

person.name="Mark";

person.age="25";

person.work=function(){

alert(person.name+" hello...");

}

person.work();

用function来模拟参构造函数来实现(用this关键字定义构造的高低文属性)

function Pet(name,age,hobby){

this.name=name;//this感化域:当前工具

this.age=age;

this.hobby=hobby;

this.eat=function(){

alert("我叫"+this.name+",我爱好"+this.hobby+",

是个法度榜样员");

}

}

var maidou =new Pet("麦兜",25,"coding");//实例化、创建工具

maidou.eat();//调用eat措施

用工厂要领来创建(内置工具)

var wcDog =new Object();

wcDog.name="旺财";

wcDog.age=3;

wcDog.work=function(){

alert("我是"+wcDog.name+",汪汪汪......");

}

wcDog.work();

用原型要领来创建

function Dog(){

}

Dog.prototype.name="旺财";

Dog.prototype.eat=function(){

alert(this.name+"是个吃货");

}

var wangcai =new Dog();

wangcai.eat();

用混杂要领来创建

function Car(name,price){

this.name=name;

this.price=price;

}

Car.prototype.sell=function(){

alert("我是"+this.name+",我现在卖"+this.price+"万元");

}

var camry =new Car("凯美瑞",27);

camry.sell();

34、eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行

应该避免应用eval,不安然,异常耗机能(2次,一次解析成js语句,一次履行)

由JSON字符串转换为JSON工具的时刻可以用eval,var obj =eval('('+ str +')')

35、null,undefined 的差别?

undefined 表示不存在这个值。

undefined :是一个表示"无"的原始值或者说表示"缺少值",便是此处应该有一个值,然则还没有定义。当考试测验读取时会返回 undefined

例如变量被声清楚明了,但没有赋值时,就即是undefined

null 表示一个工具被定义了,值为“空值”

null : 是一个工具(空工具, 没有任何属性和措施)

例如作为函数的参数,表示该函数的参数不是工具;

在验证null时,必然要应用 === ,由于 ==无法分手null 和 undefined

36、["1", "2", "3"].map(parseInt) 谜底是若干?

[1, NaN, NaN]由于 parseInt 必要两个参数 (val, radix),此中radix 表示解析时用的基数。

map传了 3个(element, index, array),对应的 radix 分歧法导致解析掉败。

37、javascript 代码中的"use strict";是什么意思 ? 应用它差别是什么?

use strict是一种ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的前提下运行,使JS编码加倍规范化的模式,打消Javascript语法的一些分歧理、不严谨之处,削减一些怪异行径

38、JSON 的懂得?

JSON(JavaScript Object Notation) 是一种轻量级的数据互换款式

它是基于JavaScript的一个子集。数据款式简单, 易于读写, 占用带宽小

JSON字符串转换为JSON工具:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON工具转换为JSON字符串:

var last=obj.toJSONString();

var last=JSON.stringify(obj);

39、js延迟加载的要领有哪些?

defer和async、动态创建DOM要领(用得最多)、按需异步载入js

40、同步和异步的差别?

同步:浏览器造访办事器哀求,用户看获得页面刷新,从新发哀求,等哀求完,页面刷新,新内容呈现,用户看到新内容,进行下一步操作

异步:浏览器造访办事器哀求,用户正常操作,浏览器后端进行哀求。等哀求完,页面不刷新,新内容也会呈现,用户看到新内容

41、渐进增强和优雅降级

渐进增强 :针对低版本浏览器进行构建页面,包管最基础的功能,然后再针对高档浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 :一开始就构建完备的功能,然后再针对低版本浏览器进行兼容

42、defer和async

defer并行加载js文件,会按照页面上script标签的顺序履行

async并行加载js文件,下载完成急速履行,不会按照页面上script标签的顺序履行

43、说说严格模式的限定

变量必须声明后再应用

函数的参数不能有同名属性,否则报错

不能应用with语句

禁止this指向全局工具

44、attribute和property的差别是什么?

attribute是dom元素在文档中作为html标签拥有的属性;

property便是dom元素在js中作为工具拥有的属性。

对付html的标准属性来说,attribute和property是同步的,是会自动更新的

然则对付自定义的属性来说,他们是不合步的

45、谈谈你对ES6的理解

新增模板字符串(为JavaScript供给了简单的字符串插值功能)

箭头函数

for-of(用来遍历数据—例如数组中的值。)

arguments工具可被不定参数和默认参数完美代替。

ES6将promise工具纳入规范,供给了原生的Promise工具。

增添了let和const敕令,用来声明变量。

增添了块级感化域。

let敕令实际上就增添了块级感化域。

还有便是引入module模块的观点

46、ECMAScript6 怎么写class么,为什么会呈现class这种器械?

这个语法糖可以让有OOP根基的人更快上手js,至少是一个官方的实现了

但对认识js的人来说,这个器械没啥大年夜影响;一个Object.creat()搞定承袭,比class简洁清晰的多

47、什么是面向工具编程及面向历程编程,它们的异同和优毛病

面向历程便是阐发出办理问题所必要的步骤,然后用函数把这些步骤一步一步实现,应用的时刻一个一个依次调用就可以了

面向工具是把构成问题事务分化成各个工具,建立工具的目的不是为了完成一个步骤,而是为了描叙某个事物在全部办理问题的步骤中的行径

面向工具因此功能来划分问题,而不是步骤

48、面向工具编程思惟

基础思惟是应用工具,类,承袭,封装等基础观点来进行法度榜样设计

优点

易掩护

采纳面向工具思惟设计的布局,可读性高,因为承袭的存在,纵然改变需求,那么掩护也只是在局部模块,以是掩护起来是异常方便和较低资源的

易扩展

开拓事情的重用性、承袭性高,低落重复事情量。

缩短了开拓周期

49、对web标准、可用性、可造访性的理解

可用性(Usability):产品是否轻易上手,用户能否完成义务,效率若何,以及这历程顶用户的主不雅感想熏染可好,是从用户的角度来看产品的质量。可用性美意味着产品德量高,是企业的核心竞争力

可造访性(Accessibility):Web内容对付残障用户的可涉猎和可理解性

可掩护性(Maintainability):一样平常包孕两个层次,一是当系统呈现问题时,快速定位并办理问题的资源,资源低则可掩护性好。二是代码是否轻易被人理解,是否轻易改动和增强功能。

50、若何经由过程JS判断一个数组?

instanceof措施

instanceof 运算符是用来测试一个工具是否在其原型链原型构造函数的属性

var arr = [];

arr instanceof Array; // true

constructor措施

constructor属性返回对创建此工具的数组函数的引用,便是返回工具相对应的构造函数

var arr = [];

arr.constructor == Array; //true

最简单的措施

这种写法,是 jQuery 正在应用的

Object.prototype.toString.call(value) == '[object Array]'

// 使用这个措施,可以写一个返回数据类型的措施

var isType = function (obj) {

return Object.prototype.toString.call(obj).slice(8,-1);

}

ES5新增措施isArray()

var a = new Array(123);

var b = new Date();

console.log(Array.isArray(a)); //true

console.log(Array.isArray(b)); //false

51、谈一谈let与var的差别?

let敕令不存在变量提升,假如在let前应用,会导致报错

假如块区中存在let和const敕令,就会形成封闭感化域

不容许重复声明,是以,不能在函数内部从新声明参数

52、map与forEach的差别?

forEach措施,是最基础的措施,便是遍历与轮回,默认有3个传参:分手是遍历的数组内容item、数组索引index、和当前遍历数组Array

map措施,基础用法与forEach同等,然则不合的,它会返回一个新的数组,以是在callback必要有return值,假如没有,会返回undefined

53、谈一谈你理解的函数式编程?

简单说,"函数式编程"是一种"编程范式"(programming paradigm),也便是若何编写法度榜样的措施论

它具有以下特点:闭包和高阶函数、惰性谋略、递归、函数是"第一等公夷易近"、只用"表达式"

54、谈一谈箭头函数与通俗函数的差别?

函数体内的this工具,便是定义时所在的工具,而不是应用时所在的工具

弗成以算作构造函数,也便是说,弗成以应用new敕令,否则会抛出一个差错

弗成以应用arguments工具,该工具在函数体内不存在。假如要用,可以用Rest参数代替

弗成以应用yield敕令,是以箭头函数不能用作Generator函数

55、谈一谈函数中this的指向吧?

this的指向在函数定义的时刻是确定不了的,只有函数履行的时刻才能确定this到底指向谁,实际上this的终极指向的是那个调用它的工具

《javascript说话精髓》中大年夜概概括了4种调用要领:

措施调用模式

函数调用模式

构造器调用模式

graph LR

A-->B

apply/call调用模式

56、异步编程的实现要领?

回调函数

优点:简单、轻易理解

毛病:晦气于掩护,代码耦合高

事故监听(采纳光阴驱动模式,取决于某个事故是否发生):

优点:轻易理解,可以绑定多个事故,每个事故可以指定多个回调函数

毛病:事故驱动型,流程不敷清晰

宣布/订阅(察看者模式)

类似于事故监听,然则可以经由过程‘消息中间’,懂得现在有若干宣布者,若干订阅者

Promise工具

优点:可以使用then措施,进行链式写法;可以书写差错时的回调函数;

毛病:编写和理解,比拟较较难

Generator函数

优点:函数体内外的数据互换、差错处置惩罚机制

毛病:流程治理未方便

async函数

优点:内置履行器、更好的语义、更广的适用性、返回的是Promise、布局清晰。

毛病:差错处置惩罚机制

57、对原生Javascript懂得程度

数据类型、运算、工具、Function、承袭、闭包、感化域、原型链、事故、RegExp、JSON、Ajax、DOM、BOM、内存透露、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript

58、Js动画与CSS动画差别及响应实现

CSS3的动画的优点

在机能上会轻细好一些,浏览器会对CSS3的动画做一些优化

代码相对简单

毛病

在动画节制上不敷机动

兼容性不好

JavaScript的动画恰恰增补了这两个毛病,节制能力很强,可以单帧的节制、变换,同时写得好完全可以兼容IE6,并且功能强大年夜。对付一些繁杂节制的动画,应用javascript会对照靠谱。而在实现一些小的交互动效的时刻,就多斟酌斟酌CSS吧

59、JS 数组和工具的遍历要领,以及几种要领的对照

平日我们会用轮回的要领来遍历数组。然则轮回是 导致js 机能问题的缘故原由之一。一样平常我们会采纳下几种要领来进行数组的遍历

for in轮回

for轮回

forEach

这里的 forEach回调中两个参数分手为 value,index

forEach 无法遍历工具

IE不支持该措施;Firefox 和 chrome 支持

forEach 无法应用 break,continue 跳出轮回,且应用 return 是跳过本次轮回

这两种措施应该非经常见且应用很频繁。但实际上,这两种措施都存在机能问题

在要领一中,for-in必要阐发出array的每个属性,这个操作机能开销很大年夜。用在 key 已知的数组上是异常不划算的。以是只管即便不要用for-in,除非你不清楚要处置惩罚哪些属性,例如 JSON工具这样的环境

在要领2中,轮回每进行一次,就要反省一下数组长度。读取属性(数组长度)要比读局部变量慢,尤其是当 array 里寄放的都是 DOM 元素,由于每次读取都邑扫描一遍页面上的选择器相关元素,速率会大年夜大年夜低落

60、gulp是什么?

gulp是前端开拓历程中一种基于流的代码构建对象,是自动化项目的构建利器;它不仅能对网站资本进行优化,而且在开拓历程中很多重复的义务能够应用精确的对象自动完成

Gulp的核心观点:流

流,简单来说便是建立在面向工具根基上的一种抽象的处置惩罚数据的对象。在流中,定义了一些处置惩罚数据的基础操作,如读取数据,写入数据等,法度榜样员是对流进行所有操作的,而不用关心流的另一头数据的真正流向

gulp恰是经由过程流和代码优于设置设置设备摆设摆设的策略来只管即便简化义务编写的事情

Gulp的特征:

易于应用:经由过程代码优于设置设置设备摆设摆设的策略,gulp 让简单的义务简单,繁杂的义务可治理

构建快速 使用 Node.js 流的威力,你可以快速构建项目并削减频繁的 IO 操作

易于进修 经由过程起码的 API,掌握 gulp 绝不辛勤,构建事情尽在掌握:犹如一系列流管道

61、说一下Vue的双向绑定命据的道理

vue.js 则是采纳数据挟制结合宣布者-订阅者模式的要领,经由过程Object.defineProperty()来挟制各个属性的setter,getter,在数据更改时宣布消息给订阅者,触发响应的监听回调

62、事故的各个阶段

1:捕获阶段 ---> 2:目标阶段 ---> 3:冒泡阶段

document ---> target目标 ----> document

由此,addEventListener的第三个参数设置为true和false的差别已经异常清晰了

true表示该元素在事故的“捕获阶段”(由外往内通报时)相应事故

false表示该元素在事故的“冒泡阶段”(由内向外通报时)相应事故

63、let var const

let

容许你声明一个感化域被限定在块级中的变量、语句或者表达式

let绑定不受变量提升的约束,这意味着let声明不会被提升到当前

该变量处于从块开始到初始化处置惩罚的“暂存逝世区”

var

声明变量的感化域限定在其声明位置的高低文中,而非声明变量老是全局的

因为变量声明(以及其他声明)老是在随意率性代码履行之前处置惩罚的,以是在代码中的随意率性位置声明变量老是等效于在代码开首声明

const

声明创建一个值的只读引用 (即指针)

基础数据当值发生改变时,那么其对应的指针也将发生改变,故造成 const申明基础数据类型时

再将其值改变时,将会造成报错, 例如 const a = 3 ; a = 5时 将会报错

然则假如是复合类型时,假如只改变复合类型的此中某个Value项时, 将照样正常应用

64、快速的让一个数组乱序

var arr = [1,2,3,4,5,6,7,8,9,10];

arr.sort(function(){

return Math.random() - 0.5;

})

console.log(arr);

$jQuery

1、你感觉jQuery或zepto源码有哪些写的好的地方

jquery源码封装在一个匿名函数的自履行情况中,有助于防止变量的全局污染,然后经由过程传入window工具参数,可以使window工具作为局部变量应用,好处是当jquery中造访window工具的时刻,就不用将感化域链退回到顶层感化域了,从而可以更快的造访window工具。同样,传入undefined参数,可以缩短查找undefined时的感化域链

(function( window, undefined ) {

//用一个函数域包起来,便是所谓的沙箱

//在这里边var定义的变量,

//属于这个函数域内的局部变量,避免污染全局

//把当前沙箱必要的外部变量经由过程函数参数引入进来

//只要包管参数对内供给的接口的同等性,

//你还可以随意调换传进来的这个参数

window.jQuery = window.$ = jQuery;

})( window );

jquery将一些原型属性和措施封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法

有一些数组或工具的措施常常能应用到,jQuery将其保存为局部变量以前进造访速率

jquery实现的链式调用可以节约代码,所返回的都是同一个工具,可以前进代码效率

2、jQuery 的实现道理?

(function(window, undefined) {})(window);

jQuery 使用 JS 函数感化域的特点,采纳急速调用表达式包裹了自身,办理命名空间和变量污染问题

window.jQuery = window.$ = jQuery;

在闭包傍边将 jQuery 和 $ 绑定到 window 上,从而将 jQuery 和 $ 裸露为全局变量

3、jQuery.fn 的 init 措施返回的 this 指的是什么工具? 为什么要返回 this?

jQuery.fn 的 init 措施 返回的 this 便是 jQuery 工具

用户应用 jQuery() 或 $() 即可初始化 jQuery 工具,不必要动态的去调用 init 措施

4、jQuery.extend 与 jQuery.fn.extend 的差别?

$.fn.extend() 和 $.extend() 是 jQuery 为扩展插件提拱了两个措施

$.extend(object); // 为jQuery添加“静态措施”(对象措施)

$.extend({

min: function(a, b) { return ab ? a : b; }

});

$.min(2,3); //2

$.max(4,5); //5

$.extend([true,] targetObject, object1[, object2]); // 对targt工具进行扩展

var settings = {validate:false, limit:5};

var options = {validate:true, name:"bar"};

$.extend(settings, options);// 留意:不支持第一个参数传 false

// settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // 为jQuery添加“成员函数”(实例措施)

$.fn.extend({

alertValue: function() {

$(this).click(function(){

alert($(this).val());

});

}

});

$("#email").alertValue();

5、jQuery 的属性拷贝(extend)的实现道理是什么,若何实现深拷贝?

浅拷贝(只复制一份原始工具的引用)

var newObject = $.extend({}, oldObject);

深拷贝(对原始工具属性所引用的工具进行进行递归拷贝)

var newObject = $.extend(true, {}, oldObject);

6、jQuery 的行列步队是若何实现的?行列步队可以用在哪些地方?

jQuery 核心中有一组行列步队节制措施,由 queue()/dequeue()/clearQueue() 三个措施组成。

主要利用于 animate(),ajax,其他要按光阴顺序履行的事故中

var func1 = function(){alert('事故1');}

var func2 = function(){alert('事故2');}

var func3 = function(){alert('事故3');}

var func4 = function(){alert('事故4');}

// 入栈行列步队事故

$('#box').queue("queue1", func1);// push func1 to queue1

$('#box').queue("queue1", func2);// push func2 to queue1

// 调换行列步队事故

$('#box').queue("queue1", []);// delete queue1 with empty array

$('#box').queue("queue1", [func3, func4]);// replace queue1

// 获取行列步队事故(返回一个函数数组)

$('#box').queue("queue1");// [func3(), func4()]

// 出栈行列步队事故并履行

$('#box').dequeue("queue1"); // return func3 and do func3

$('#box').dequeue("queue1"); // return func4 and do func4

// 清空全部行列步队

$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

7、jQuery 中的 bind(), live(), delegate(), on()的差别?

bind 直接绑定在目标元素上

live 经由过程冒泡传播事故,默认document上,支持动态数据

delegate 更正确的小范围应用事故代理,机能优于 live

on 是最新的1.9版本整合了之前的三种要领的新事故绑定机制

8、是否知道自定义事故? jQuery 里的 fire 函数是什么意思,什么时刻用?

事故即“宣布/订阅”模式,自定义事故即“消息宣布”,事故的监听即“订阅订阅”

JS 原生支持自定义事故,示例:

document.createEvent(type); // 创建事故

event.initEvent(eventType, canBubble, prevent); // 初始化事故

target.addEventListener('dataavailable',

handler, false); // 监听事故

target.dispatchEvent(e);// 触发事故

jQuery 里的 fire 函数用于调用 jQuery 自定义事故列表中的事故

9、jQuery 经由过程哪个措施和 Sizzle 选择器结合的?

Sizzle 选择器采取 Right To Left 的匹配模式,先征采所有匹配标签,再判断它的父节点

jQuery 经由过程 $(selecter).find(selecter); 和 Sizzle 选择器结合

10、jQuery 中若何将数组转化为 JSON 字符串,然后再转化回来?

// 经由过程原生 JSON.stringify/JSON.parse 扩展 jQuery 实现

$.array2json = function(array) {

return JSON.stringify(array);

}

$.json2array = function(array) {

// $.parseJSON(array); // 3.0 开始,已逾期

return JSON.parse(array);

}

// 调用

var json = $.array2json(['a', 'b', 'c']);

var array = $.json2array(json);

11、jQuery 一个工具可以同时绑定多个事故,这是若何实现的?

$("#btn").on("mouseover mouseout", func);

$("#btn").on({

mouseover: func1,

mouseout: func2,

click: func3

});

12、针对 jQuery 的优化措施?

缓存频繁操作DOM工具

只管即便应用id选择器代替class选择器

老是从#id选择器来承袭

只管即便应用链式操作

应用光阴委托 on绑定事故

采纳jQuery的内部函数data()来存储数据

应用最新版本的 jQuery

13、jQuery 的 slideUp 动画,当鼠标快速继续触发, 动画会滞后反复履行,该若何处置惩罚呢?

在触发元素上的事故设置为延迟处置惩罚:应用 JS 原生 setTimeout 措施

在触发元素的事故时预先竣事所有的动画,再履行响应的动画事故:$('.tab').stop().slideUp();

14、jQuery UI 若何自定义组件?

经由过程向 $.widget() 通报组件名称和一个原型工具来完成

$.widget("ns.widgetName", [baseWidget], widgetPrototype);

15、jQuery 与 jQuery UI、jQuery Mobile 差别?

jQuery 是 JS 库,兼容各类PC浏览器,主要用作更方便地处置惩罚 DOM、事故、动画、AJAX

jQuery UI 是建立在 jQuery 库上的一组用户界面交互、殊效、小部件及主题

jQuery Mobile 以 jQuery 为根基,用于创建“移动Web利用”的框架

16、jQuery 和 Zepto 的差别? 各自的应用处景?

jQuery 主要目标是PC的网页中,兼容整个主流浏览器。在移动设备方面,零丁推出 `jQuery Mobile

Zepto从一开始就定位移动设备,相对更轻量级。它的API 基础兼容jQuery`,但对PC浏览器兼容不抱负

17、jQuery工具的特征

只有 JQuery工具才能应用 JQuery 措施

JQuery 工具是一个数组工具

$编程题

1、写一个通用的事故侦听器函数

// event(事故)对象集,滥觞:github.com/markyun

markyun.Event = {

// 视能力分手应用dom0||dom2||IE要领 来绑定事故

// 参数: 操作的元素,事故名称 ,事故处置惩罚法度榜样

addEvent : function(element, type, handler) {

if (element.addEventListener) {

//事故类型、必要履行的函数、是否捕捉

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent('on' + type, function() {

handler.call(element);

});

} else {

element['on' + type] = handler;

}

},

// 移除事故

removeEvent : function(element, type, handler) {

if (element.removeEventListener) {

element.removeEventListener(type, handler, false);

} else if (element.datachEvent) {

element.detachEvent('on' + type, handler);

} else {

element['on' + type] = null;

}

},

// 阻拦事故 (主如果事故冒泡,由于IE不支持事故捕获)

stopPropagation : function(ev) {

if (ev.stopPropagation) {

ev.stopPropagation();

} else {

ev.cancelBubble = true;

}

},

// 取消事故的默认行径

preventDefault : function(event) {

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

},

// 获取事故目标

getTarget : function(event) {

return event.target || event.srcElement;

}

2、若何判断一个工具是否为数组

function isArray(arg) {

if (typeof arg === 'object') {

return Object.prototype.toString.call(arg)

=== '[object Array]';

}

return false;

}

3、冒泡排序

每次对拍照邻的两个数,假如后一个比前一个小,换位置

var arr = [3, 1, 4, 6, 5, 7, 2];

function bubbleSort(arr) {

for (var i = 0; i

4、快速排序

采纳二分法,掏出中心数,数组每次和中心数对照,小的放到左边,大年夜的放到右边

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {

if(arr.length == 0) {

return [];// 返回空数组

}

var cIndex = Math.floor(arr.length / 2);

var c = arr.splice(cIndex, 1);

var l = [];

var r = [];

for (var i = 0; i

5、编写一个措施 求一个字符串的字节长度

假设:一个英翰墨符占用一个字节,一其中翰墨符占用两个字节

function GetBytes(str){

var len = str.length;

var bytes = len;

for(var i=0; i 255) bytes++;

}

return bytes;

}

alert(GetBytes("你好,as"));

6、bind的用法,以及若何实现bind的函数和必要留意的点

bind的感化与call和apply相同,差别是call和apply是急速调用函数,而bind是返回了一个函数,必要调用的时刻再履行。

一个简单的bind函数实现如下

Function.prototype.bind = function(ctx) {

var fn = this;

return function() {

fn.apply(ctx, arguments);

};

};

$其他

1、谈谈你对重构的理解

网站重构:在不改变外部行径的条件下,简化布局、添加可读性,而在网站前端维持同等的行径。也便是说是在不改变UI的环境下,对网站进行优化, 在扩展的同时维持同等的UI

对付传统的网站来说重构平日是:

表格(table)结构改为DIV+CSS

使网站前端兼容于今世浏览器(针对付分歧规范的CSS、如对IE6有效的)

对付移动平台的优化

针对付SEO进行优化

2、什么样的前端代码是好的

高复用低耦合,这样文件小,好掩护,而且好扩展。

3、对前端工程师这个职位是怎么样理解的?它的前景会怎么样?

前端是最切近用户的法度榜样员,比后端、数据库、产品经理、运营、安然都近

实现界面交互

提升用户体验

有了Node.js,前端可以实现办事真个一些工作

前端是最切近用户的法度榜样员,前真个能力便是能让产品从 90分进化到 100 分,以致更好,

与团队成员,UI设计,产品经理的沟通;

做好的页面布局,页面重构和用户体验;

4、你感觉前端工程的代价体现在哪

为简化用户应用供给技巧支持(交互部分)

为多个浏览器兼容性供给支持

为前进用户浏览速率(浏览器机能)供给支持

为跨平台或者其他基于webkit或其他衬着引擎的利用供给支持

为展示数据供给支持(数据接口)

5、日常平凡若何治理你的项目?

先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;

编写习气必须同等(例如都是采纳承袭式的写法,单样式都写成一行);

标注样式编写人,各模块都及时标注(标注关键样式调用的地方);

页面进行标注(例如 页面 模块 开始和停止);

CSS跟HTML 分文件夹并行寄放,命名都得统一(例如style.css);

JS 分文件夹寄放 命名以该JS功能为准的英文翻译。

图片采纳整合的 images.png png8 款式文件应用 - 只管即便整合在一路应用方便将来的治理

人事面

口试完你还有什么问题要问的吗

你有什么喜欢?

你最大年夜的优点和毛病是什么?

你为什么会选择这个行业,职位?

你感觉你得当从事这个岗位吗?

你有什么职业筹划?

你对人为有什么要求?

若何看待前端开拓?

未来三到五年的筹划是如何的?

常问

自我先容

你的项目中技巧难点是什么?碰到了什么问题?你是怎么办理的?

你觉得哪个项目做得最好?

近来在看哪些前端方面的书?

日常平凡是若何进修前端开拓的?

你最有成绩感的一件事

你是怎么进修前真个

链接:口试问题谜底综合版

您可能还会对下面的文章感兴趣: