前端面试题与答案

一、HTML+CSS部分（）

1、怎么让一个不定宽高的DIV，垂直水平居中？

答：1）使用CSS方法：

父盒子设置：display：table-cell；text-align：center；vertical-align：middle；

Div设置：display：inline-block；vertical-align：middle；

2）使用CSS3 transform：

父盒子设置：display：relative

Div设置：transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

2、position几个属性的作用？

答：position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、"top"、"right"以及"bottom"属性使用。

1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。

2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了relative值，那么，它偏移的top，right，bottom，left的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意relative移动后的元素在原来的位置仍占据空间。

3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position属性，并且position的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如果其父容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。

4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。

3、px，em，rem的区别？

答： 1）px像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3）rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

4）区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

4、 什么是BFC？

答： 1）定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

布局规则：

A.内部的Box会在垂直方向，一个接一个地放置。

B.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

C.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

D.BFC的区域不会与float box重叠。

E.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

F.计算BFC的高度时，浮动元素也参与计算。

3）哪些元素会生成BFC：

A.根元素

B.float属性不为none

C.position为absolute或fixed

D.display为inline-block， table-cell， table-caption， flex， inline-flex

F.overflow不为visible

5、表格自动换行怎么实现？

答：word-break：normal使用浏览器默认的换行规则；

break-all允许单词内换行；

keep-all只能在半角空格或连字符处换行

       word-wrap：normal是用浏览器默认的换行规则；break-word在长单词或URL地址内部进行换行。

6、box-sizing、transition、translate分别是什么？

答：Box-sizing：用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。

       transition：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过transtion-propety设置过渡属性；transtion-duration设置过渡时间；trantion-timing-function设置过渡速度；trantion-delay设置过渡延时

       translate：通过移动改变元素的位置；有x、y、z三个属性

7、选择器优先级是怎样的？

答：！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

       权重算法：

       （0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

       比较：

       先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推

8、CSS3选择器有哪些？

答：属性选择器、伪类选择器、伪元素选择器。

9、Iframe的作用？

答：用法：

Iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。

优点：便于修改，模块分离，像一些信息管理系统会用到。

但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。

缺点：

    （1）iframe的创建比一般的DOM元素慢了1-2个数量级

（2）iframe标签会阻塞页面的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞.

（3）iframe对于SEO不友好，替代方案一般就是动态语言的Incude机制和ajax动态填充内容等.

10、有一个导航栏在chrome里面样式完好？在IE里文字都聚到一起了，是哪个兼容性问题？

答：用了display：flex属性，在ie10以下都是无效的。

11、CSS3新特性有哪些？

答：1.颜色：新增RGBA，HSLA模式

2. 文字阴影（text-shadow、）

3.边框： 圆角（border-radius）边框阴影： box-shadow

4. 盒子模型：box-sizing

5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点

background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

6.渐变：linear-gradient、radial-gradient

7. 过渡：transition，可实现动画

8. 自定义动画

9. 在CSS3中唯一引入的伪元素是 ：：selection.

10. 媒体查询，多栏布局

11. border-image

12.2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13. 3D转换

12、xhtml和html有什么区别？

答：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

       最主要的不同：

       XHTML 元素必须被正确地嵌套。

       XHTML 元素必须被关闭。

       标签名必须用小写字母。

       XHTML 文档必须拥有根元素。

13、CSS引入的方式有哪些? link和@import的区别是?

答：内联 内嵌 外链 导入

       区别 ：同时加载

       前者无兼容性，后者CSS2.1以下浏览器不支持

       Link 支持使用javascript改变样式，后者不可

14、标签上title与alt属性的区别是什么?

答：Alt 当图片不显示时，用文字代表。

       Title 为该属性提供信息。

15、描述css reset的作用和用途？

答：Reset重置浏览器的css默认属性 ，览器的品种不同，样式不同，然后重置，让他们统一。

16、解释css sprites，如何使用？

答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

17、清除浮动的几种方式？

答：1，父级div定义 height 

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但只适合高度固定的布局.
 2，结尾处加空div标签 clear：both 
原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear：both清除浮动，让父级div能自动获取到高度 ，如果页面浮动布局多，就要增加很多空div，让人感觉很不好 .
3，父级div定义 伪类：after 和 zoom 

/*清除浮动代码*/ 
.clearfix：after{

content：""；

display：block；

visibility：hidden；

height：0；

line-height：0；

clear：both；

} 
.clearfix{zoom：1} 


原理：IE8以上和非IE浏览器才支持：after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6，ie7浮动问题 ，推荐使用，建议定义公共类，以减少CSS代码。 
4，父级div定义 overflow：hidden 

超出盒子部分会被隐藏，不推荐使用.
5. 双伪元素法：

.clearfix：before，.clearfix：after {

           content：""；

           display： block；

           clear： both；

       }

       .clearfix {

           zoom： 1；

       }

 

18、z-index说说z-index的工作原理及适用范围?

答：原理：

 

z-index 这个属性控制着元素在z轴上的表现形式。

该属性仅适用于定位元素。即拥有 relative ， absolute ， fixed 属性的position 元素。

堆叠顺序（Stacking Level）

堆叠顺序是当前元素位于 z 轴上的值。数值越大表明元素的堆叠顺序越高，越靠近屏幕。

未定义时，后来居上。如果未指定 z-index 的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，文档中后来声明的元素具有更高的堆叠顺序。当父元素的堆叠顺序被设置的时候，这也意味着，它的子元素的堆叠顺序不能高于或低于这一顺序 (相对于父元素的堆叠上下文)。

适用范围：

1.网页两侧浮动窗口(播放器，置顶按钮，浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)

19、能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？

答：流式布局：

    使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

    这样的布局方式，就是移动web开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。

    响应式开发：

    那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。越来越多的设计师也采用了这种设计。

       CSS3中的Media Query（媒介查询），通过查询screen的宽度来指定某个宽度区间的网页布局。

²  超小屏幕（移动设备）    768px以下

²  小屏设备    768px-992px

²  中等屏幕    992px-1200px

²  宽屏设备    1200px以上

    由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作，当然也可以自己写响应式。

    阐述下移动web和响应式的区别：

 

20、你能描述一下渐进增强和优雅降级之间的不同吗？

答：优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

    举个例子：                              

a{
    display： block；
    width： 200px；
    height： 100px；
    background：aquamarine；
/*我就是要用这个新css属性*/
transition： all 1s ease 0s；
   /*可是发现了一些低版本浏览器不支持怎么吧*/
    /*往下兼容*/
    -webkit-transition：all 1s ease 0s；
    -moz-transition：all 1s ease 0s；
    -o-transition： all 1s ease 0s；
/*那么通常这样考虑的和这样的侧重点出发的css就是优雅降级*/
}
a：hover{
    height： 200px；
}

/*那如果我们的产品要求我们要重低版本的浏览器兼容开始*/
a{
/*优先考虑低版本的*/
-webkit-transition：all 1s ease 0s；
    -moz-transition：all 1s ease 0s；
    -o-transition： all 1s ease 0s；
/*高版本的就肯定是渐进渐强*/
transition： all 1s ease 0s；
}  

 

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。

“渐进增强”观点则认为应关注于内容本身。

21、改变元素的外边距用什么属性？改变元素的内填充用什么属性？

答：改变元素的外边距用margin，改变元素的内填充用padding。

22、在新窗口打开链接的方法是？

答：target：_blank。

23、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

答：结构是html，表现是css。

24、简述对Web语义化的理解？

答：就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web操作和网站SEO，方便团队协作的一种标准，以图实现一种“无障碍”的Web开发。

25、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

答：DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对javascript脚本都会有所影响。

26、CSS都有哪些选择器？CSS选择器的优先级是怎么样定义的？

答：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

！important >行内样式> ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

27、display： none；与visibility： hidden的区别是什么？

答：display：none； 使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；

    visibility：hidden； 使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

28、请用CSS定义p标签，要求实现以下效果：字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)

答：p{

    color：green；

    *color：blue；

    _color：black；

}

二、JS部分

1、AJAX请求数据步骤是什么？传输的数据是用的暗文还是明文？

答：

var xhr；
xhr = new XMLHttpRequest()； //创建一个异步对象
xhr.open("Get"，"test.ashx"， true)；//Get方式括号中的三个参数分别为：1.发送请求的方式 2.样请求的页面 3.是否异步
//xhr.open("post"，"test.ashx"，true)；
//xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")； Post方式发送数据


//这个回调函数主要用来检测服务器是否把数据返回给异步对象
xhr.setRequestHeader("If-Modified-Since"，"0")；//设置浏览器不使用缓存
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
//readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
//0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
//1：已打开。对象已经创建并初始化，但还未调用send方法；
//2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
//3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
//4：已加载。所有数据接收完毕
if(xhr.status==200){ //检测服务器返回的响应报文的状态码是否为200
   alert(xhr.responseText)；//服务器返回的Response数据
   //解析服务器返回的jason格式的数据
   var s=xhr.responseText；
   var json=eval("("+s+")")；
   alert(jason.data)；
   }

}；
}；
xhr.send(null)；//异步对象发送请求
//xhr.send("txtName=roger&txtPwd=123")； 以post方式发送数据

 

ajax中get和post方式请求数据都是明文的。

2、怎么实现跨域问题？

答：

 

对于端口和协议的不同，只能通过后台来解决。我们要解决的是域名不同的问题。

1.下面是用php进行的设置，“*”号表示允许任何域向我们的服务端提交请求：header{"Access-Control-Allow-Origin： *"}

2.JSONP(JSON with Padding 填充式JSON 或参数式JSON)

在js中，我们虽然不能直接用XMLHttpRequest请求不同域上的数据时，但是在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

 

首先第一个script便签定义了一个处理数据的函数；

然后第二个script标签载入一个js文件，http：//example.com/data.php 是数据所在地址，但是因为是当做js来引入的，所以http：//example.com/data.php 返回的必须是一个能执行的js文件；

最后js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以php应该是这样的：

 

 

JSONP的优缺点
优点：

它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；

能够直接访问响应文本，支持在浏览器与服务器之间双向通信

缺点：

JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的Web 服务时，一定得保证它安全可靠。

它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

3、谈谈js作用域和闭包？

答：简单的说，作用域是针对变量的，比如我们创建一个函数a1，函数里面又包了一个子函数a2。此时就存在三个作用域：

全局作用域－a1作用域－a2作用域；即全局作用域包含了a1的作用域，a2的作用域包含了a1的作用域。

当a1在查找变量的时候会先从自身的作用域区查找，找不到再到上一级a2的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。

理解闭包首先要理解，js垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。

如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。

闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。

4、什么是原型链？

答：Javascript是面向对象的，每个实例对象都有一个__proto_属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性prototype，与实例的__proto__属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据__proto__ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype._proto_为nul，这样也就形成了原型链。

5、实现继承的方法有什么？

答：

（1）借用构造函数。也叫伪造对象或经典继承。

思路：在子类构造函数的内部调用超类型构造函数。可以通过使用apply（）和call()方法在新创建的对象上执行构造函数。

缺点：方法都在构造函数中定义，函数的复用就无从谈起。在超类型的原型中定义的方法，对子类而言也是不可见的，结果所有的类型都只能使用构造函数模式。

 

（2）组合继承。也叫伪经典继承。指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长。

思路：使用原型链实现对原型属性属性和方法的继承，通过借用构造函数来实现实例属性的继承。

优点：既通过在原型上定义方法实现了函数复用，又能保证每一个实例都有它自己的数组。

组合继承避免了原型链和借用构造函数的缺陷，融合了他们的优点，成为JavaScript中常用的继承模式。

 

（3）原型链继承。

思路：借助原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型。

在object()函数内部，先创建一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。

 

Function object(o){

Function  F(){}；

F.prototype=o；

Return new F()；

}

 

（4）寄生式继承。

思路：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有的工作一样返回对象。

 

Function createAonter(original){

Var clone=object(original)；//通过调用函数创建一个新对象

Clone.sayHi=function(){   //以某种方式来增强这个对象

Alert(“hi”)；

}

Return clone； //返回这个对象

}

缺点：使用寄生式继承来为对象添加函数，会由于不能做到函数复用二降低效率，这一点和构造函数模式类似。

（5）寄生组合式继承。是JavaScript最常用的继承模式。

思路：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

开发人员普遍认为寄生组合式继承时引用类型最理想的继承范式。

Extend（）方法才用了这样的方式。

6、什么是事件冒泡/捕获？

答：

事件冒泡：子元素事件的触发会影响父元素事件；

     开关事件冒泡：

     A，开启事件冒泡：element.addEventListener(eventName，handler，false)；

     B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过e.stopPropagation()来关闭事件冒泡；

事件捕获：父元素的事件会影响子元素的事件；

     开启事件捕获：element.addEventListener(eventName，handler，true)

7、请说说事件委托机制？这样做有什么好处？

答：事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

好处：

A，提高性能：列如，当有很多li同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个li注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。

B，新添加的元素还会有之前的事件；

8、请列举字符串操作的方法？

charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码；

charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串；

slice方法返回字符串的片段；

substring方法返回位于String对象中指定位置的子字符串。

substr方法返回一个从指定位置开始的指定长度的子字符串。

indexOf方法返回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1；

lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1；

search方法返回与正则表达式查找内容匹配的第一个字符串的位置。

concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接；

split将一个字符串分割为子字符串，然后将结果作为字符串数组返回；

9、请说出==和===的区别？

答：==   判断内容是否相等 不比较类型

console.log(1 == "1")； true

===  判断内容相等 且类型也相等

console.log(1 ==="1")； false

10、如何判断一个数组是数组？

1.[] instanceof Array   true/false

2. arr.constructor == Array   true/false

3. ES5：Array.isArray()   true/false

4. Object.prototype.toString.call([])==="[object Array]"true/false

5.目前完美方法
function isArray(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value)；
    }else{
return Object.prototype.toString.call(value) === "[object Array]"；
    }
}

11、怎么理解jQuery？

答：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+， FF1.5+， Safari 2.0+， Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less，do more(写得更少，做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

12、Jquery .on这个方法怎么看？

答：

jQuery.on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event，childSelector，data，function，map)

多个事件绑定同一个函数

$(document).ready(function(){

  $("p").on("mouseover mouseout"，function(){

    $("p").toggleClass("intro")；

  })；

})；

多个事件绑定不同函数

$(document).ready(function(){

  $("p").on({

    mouseover：function(){$("body").css("background-color"，"lightgray")；}，

    mouseout：function(){$("body").css("background-color"，"lightblue")；}，

    click：function(){$("body").css("background-color"，"yellow")；} 

  })；

})；

绑定自定义事件

$(document).ready(function(){

  $("p").on("myOwnEvent"， function(event， showName){

    $(this).text(showName + "! What a beautiful name!").show()；

  })；

  $("button").click(function(){

    $("p").trigger("myOwnEvent"，["Anja"])；

  })；

})；

传递数据到函数

function handlerName(event)

{

  alert(event.data.msg)；

}

 

$(document).ready(function(){

  $("p").on("click"， {msg："You just clicked me!"}， handlerName)

})；

适用于未创建的元素

$(document).ready(function(){

  $("div").on("click"，"p"，function(){

    $(this).slideToggle()；

  })；

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button")；

  })；

})

 

13、表单验证传输的什么数据？明文还是暗文==加密？如何加密？是每一次传输数据，都是加密之后才传输吗？

答：概述：

GET是从服务器上请求数据，POST是发送数据到服务器。事实上，GET方法是把数据参数队列（query string）加到一个URL上，值和表单是一一对应的。比如说，name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特 殊的符号转换成十六进制的代码。因为这一队列在URL里边，这样队列的参数就能看得到，可以被记录下来，或更改。通常GET方法还限制字符的大小（大概是 256字节 ）。

事实上POST方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到这一过程的，所以POST方法比较适合用于发送一个保密的（比如信用 卡号）或者比较大量的数据到服务器。

区别：

Post是允许传输大量数据的方法，而Get方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比Post方法好。

总结：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

所以：

表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)， 如果只是单单想要从服务器获得数据或者传输的数据并不重要， 可以直接使用明文方式传输( get )

14、面向对象和类的区别？

答：简单的说类是对象的模版。

在 js 中没有类， 所以在js 中所谓的 类 就是构造函数， 对象就是由构造函数创建出来的实例对象。面向对象就是使用面向对象的方式处理问题， 面向对象是对面向过程进行封装。

面向对象有三大特性

抽象性， 需要通过核心数据和特定环境才能描述对象的具体意义

封装性， 封装就是将数据和功能组合到一起， 在js中对象就是键值对的集合， 对象将属性和方法封装起来， 方法将过程封装起来

继承性， 将别人的属性和方法成为自己的， 传统继承基于模板(类)， js中继承基于 构造函数

 

对象的概念，面向对象编程的程序实际就是多个对象的集合，我们可以把所有的事物都抽象成对象，在程序设计中可以看作：对象=属性+方法。属性就是对象的数据，而方法就是对象的行为。

 

类的概念，类是对象的模版，而对象是类的实例化。举个例子，汽车设计图可以看作是类，而具体的汽车就是对象。再比如有一个类是表示人，然后可以通过人这个模版来实例化出张三、李四。。。

15、在JS的计时器运行原理是怎样的，为什么可以触发计时效果? 计时器是多线程吗?

答：

1.javascript引擎只有一个线程，强迫异步事件排队等待被执行。

2.setTimeout和setInterval本质上不同的地方是他们如何执行异步代码的。

3.如果一个定时器正在执行的时候被阻塞了，那么它将会被推迟到下一个可能的执行点，这既是使得延迟时间有可能会超过声明定时器时设置的值。

4.Interval如果有足够的时间来执行（大于制定的延迟），那么它将会无延迟的一个紧接着一个执行。

原理：

计时器通过设定一定的时间段（毫秒）来异步的执行一段代码。因为 Javascript 是一个单线程语言，计时器提供了一种绕过这种语言限制来执行代码的能力。

总结：

计时器是单线程的， 需要等待上一个执行完， 如果上一个没有执行完， 下一个需要延迟执行， 知道上一个执行完

16、如何查找构造函数和原型中的属性？

答：构造函数.prototype  查看构造函数的原型属性

实例对象.__proto__ 查看实例对象的构造函数的原型

实例对象.__proto__.constructor 查看实例对象的构造函数

17、js中一共有几种数据类型？

答：Undefined、Null、Boolean、Number和String。

还有一种复杂的数据类型Object，Object本质是一组无序的名值对组成的。

18、call和apply的区别

答： 它们的共同之处：

    都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”

    它们的不同之处：

    apply：最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

    call：则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致，或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

更简单地说，apply和call功能一样，只是传入的参数列表形式不同：如 func.call(func1，var1，var2，var3)对应的apply写法为：func.apply(func1，[var1，var2，var3])。

19、说说你对this的理解？

答：this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

1.作为纯粹的函数调用 this指向全局对象

2.作为对象的方法调用 this指向调用对象

3.作为构造函数被调用 this指向新的对象（new会改变this的指向）

4.apply调用 this指向apply方法的第一个参数

20、谈谈你对递归的认识？

答：递归：程序调用自身的编程技巧称为递归，自己调用自己。

function factorial(num) {
    return ( num <= 1 ) ? 1 ： num * factorial(num - 1)；
    }

    console.log(factorial(8))；

21、js的异步加载有哪几种方法？

答：方案一：<script>标签的async="async"属性。HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。

   方案二：<script>标签的defer="defer"属性。兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

   方案三：AJAX  eval（使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本）。兼容所有浏览器。

   方案四：iframe方式（这里可以参照：iframe异步加载技术及性能中关于Meboo的部分）。兼容所有浏览器。

22、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个？

答：  对象：Window  document  location  screen  history  navigator

方法：Alert()  confirm()  prompt()  open()  close()

23、简述列举文档对象模型DOM里document的常用的查找访问节点的方法做简单说明？

答：  document.getElementById 根据元素id查找元素

document.getElementByName 根据元素name查找元素

document.getElementTagName 根据指定的元素名查找元素

24、原生JS的window.onload与Jquery的$(document).ready(function () {})，$(function () {})有什么不同？

答： 

1.执行时间 
              window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
              $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
       2.编写个数不同 
              window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
              $(document).ready()可以同时编写多个，并且都可以得到执行  
       3.简化写法 
              window.onload没有简化写法 
              $(document).ready(function(){})可以简写成$(function(){})；

25、简述在jQuery中.eq()和.get()的异同？

答：相同：

get() ：取得其中一个匹配的元素。数字序号表示取得第几个匹配的元素

eq()：获取第N个元素，下标都是从0开始， 用法基本相同。

不同：

eq返回的是一个jquery对象； 返回的是jQuery对象，就可以继续调用其他方法。

get返回的是一个html 对象数组；不能调用jQuery的其他方法；

26、简述for in 循环的特点及使用场景？

答：for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for (变量 in 对象){

    在此执行代码

}

“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。

注意：for in循环不会按照属性的下标来排列输出。

27、Javascript内置的常用对象有哪些？并列举该对象常用的方法？

答：

Arguments 函数参数集合

arguments[ ] 函数参数的数组

Arguments 一个函数的参数和其他属性

Arguments.callee 当前正在运行的函数

Arguments.length 传递给函数的参数的个数

Array 数组

length属性：动态获取数组长度

join()：将一个数组转成字符串。返回一个字符串。

reverse()：将数组中各元素颠倒顺序

delete运算符：只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。

shift()：删除数组中第一个元素，返回删除的那个值，并将长度减1。

pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减1。

unshift()：往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a” ， “b，“c”)

push()：往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a” ， “b” ， “c”)

concat( ) 连接数组 

slice( ) 返回数组的一部分

sort( ) 对数组元素进行排序

splice( ) 插入、删除或替换数组的元素

toLocaleString( ) 把数组转换成局部字符串

toString( ) 将数组转换成一个字符串

 

Boolean 布尔对象

Boolean.toString( ) 将布尔值转换成字符串

Boolean.valueOf( ) Boolean对象的布尔值

Date 日期时间

创建Date对象的方法

（1）创建当前(现在)日期对象的实例，不带任何参数

    var today = new Date()；

（2）创建指定时间戳的日期对象实例，参数是时间戳。

时间戳：是指某一个时间距离1970年1月1日0时0分0秒，过去了多少毫秒值(1秒=1000毫秒)。

    var timer = new Date(10000)； //时间是 1970年1月1日0时0分10秒

（3）指定一个字符串的日期时间信息，参数是一个日期时间字符串

    var timer = new Date(“2015/5/25 10：00：00”)；

（4）指定多个数值参数

    var timer = new Date(2015+100，4，25，10，20，0)； //顺序为：年、月、日、时、分、秒，年、月、日是必须的。

    方法：

Date.getDate( ) 返回一个月中的某一天

Date.getDay( ) 返回一周中的某一天

Date.getFullYear( ) 返回Date对象的年份字段

Date.getHours( ) 返回Date对象的小时字段

Date.getMilliseconds( ) 返回Date对象的毫秒字段

Date.getMinutes( ) 返回Date对象的分钟字段

Date.getMonth( ) 返回Date对象的月份字段

Date.getSeconds( ) 返回Date对象的秒字段

Date.getTime( ) 返回Date对象的毫秒表示

Date.getTimezoneOffset( ) 判断与GMT的时间差

Date.getUTCDate( ) 返回该天是一个月的哪一天(世界时)

Date.getUTCDay( ) 返回该天是星期几(世界时)

Date.getUTCFullYear( ) 返回年份(世界时)

Date.getUTCHours( ) 返回Date对象的小时字段(世界时)

Date.getUTCMilliseconds( ) 返回Date对象的毫秒字段(世界时)

Date.getUTCMinutes( ) 返回Date对象的分钟字段(世界时)

Date.getUTCMonth( ) 返回Date对象的月份(世界时)

Date.getUTCSeconds( ) 返回Date对象的秒字段(世界时)

Date.getYear( ) 返回Date对象的年份字段(世界时)

Date.parse( ) 解析日期/时间字符串

Date.setDate( ) 设置一个月的某一天

Date.setFullYear( ) 设置年份，也可以设置月份和天

Date.setHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段

Date.setMilliseconds( ) 设置Date对象的毫秒字段

Date.setMinutes( ) 设置Date对象的分钟字段和秒字段

Date.setMonth( ) 设置Date对象的月份字段和天字段

Date.setSeconds( ) 设置Date对象的秒字段和毫秒字段

Date.setTime( ) 以毫秒设置Date对象

Date.setUTCDate( ) 设置一个月中的某一天(世界时)

Date.setUTCFullYear( ) 设置年份、月份和天(世界时)

Date.setUTCHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)

Date.setUTCMilliseconds( ) 设置Date对象的毫秒字段(世界时)

Date.setUTCMinutes( ) 设置Date对象的分钟字段和秒字段(世界时)

Date.setUTCMonth( ) 设置Date对象的月份字段和天数字段(世界时)

Date.setUTCSeconds( ) 设置Date对象的秒字段和毫秒字段(世界时)

Date.setYear( ) 设置Date对象的年份字段

Date.toDateString( ) 返回Date对象日期部分作为字符串

Date.toGMTString( ) 将Date转换为世界时字符串

Date.toLocaleDateString( ) 回Date对象的日期部分作为本地已格式化的字符串

Date.toLocaleString( ) 将Date转换为本地已格式化的字符串

Date.toLocaleTimeString( ) 返回Date对象的时间部分作为本地已格式化的字符串

Date.toString( ) 将Date转换为字符串

Date.toTimeString( ) 返回Date对象日期部分作为字符串

Date.toUTCString( ) 将Date转换为字符串(世界时)

Date.UTC( ) 将Date规范转换成毫秒数

Date.valueOf( ) 将Date转换成毫秒表示

Error 异常对象

Error.message 可以读取的错误消息

Error.name 错误的类型

Error.toString( ) 把Error对象转换成字符串

EvalError 在不正确使用eval()时抛出

SyntaxError 抛出该错误用来通知语法错误

RangeError 在数字超出合法范围时抛出

ReferenceError 在读取不存在的变量时抛出

TypeError 当一个值的类型错误时，抛出该异常

URIError 由URl的编码和解码方法抛出

Function 函数构造器

Function.apply( ) 将函数作为一个对象的方法调用

Function.arguments[] 传递给函数的参数

Function.call( ) 将函数作为对象的方法调用

Function.caller 调用当前函数的函数

Function.length 已声明的参数的个数

Function.prototype 对象类的原型

Function.toString( ) 把函数转换成字符串

Math 数学对象

Math对象是一个静态对象

Math.PI：圆周率。

Math.abs()：绝对值。

Math.ceil()：向上取整(整数加1，小数去掉)。

Math.floor()：向下取整(直接去掉小数)。

Math.round()：四舍五入。

Math.pow(x，y)：求x的y次方。

Math.sqrt()：求平方根。

Number 数值对象

Number.MAX_VALUE 最大数值

Number.MIN_VALUE 最小数值

Number.NaN 特殊的非数字值

Number.NEGATIVE_INFINITY 负无穷大

Number.POSITIVE_INFINITY 正无穷大

Number.toExponential( ) 用指数计数法格式化数字

Number.toFixed( ) 采用定点计数法格式化数字

Number.toLocaleString( ) 把数字转换成本地格式的字符串

Number.toPrecision( ) 格式化数字的有效位

Number.toString( ) 将—个数字转换成字符串

Number.valueOf( ) 返回原始数值

Object 基础对象

Object 含有所有JavaScript对象的特性的超类

Object.constructor 对象的构造函数

Object.hasOwnProperty( ) 检查属性是否被继承

Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型

Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性

Object.toLocaleString( ) 返回对象的本地字符串表示

Object.toString( ) 定义一个对象的字符串表示

Object.valueOf( ) 指定对象的原始值

RegExp 正则表达式对象

RegExp.exec( ) 通用的匹配模式

RegExp.global 正则表达式是否全局匹配

RegExp.ignoreCase 正则表达式是否区分大小写

RegExp.lastIndex 下次匹配的起始位置

RegExp.source 正则表达式的文本

RegExp.test( ) 检测一个字符串是否匹配某个模式

RegExp.toString( ) 把正则表达式转换成字符串

 

String 字符串对象

length：获取字符串的长度。如：var len = strObj.length

toLowerCase()：将字符串中的字母转成全小写。如：strObj.toLowerCase()

toUpperCase()：将字符串中的字母转成全大写。如：strObj.toUpperCase()

charAt(index)：返回指定下标位置的一个字符。如果没有找到，则返回空字符串。

substr()：在原始字符串，返回一个子字符串

substring()：在原始字符串，返回一个子字符串。

区别：'''

“abcdefgh”.substring(2，3) = “c” 

“abcdefgh”.substr(2，3) = “cde”

'''

split()：将一个字符串转成数组。

charCodeAt( ) 返回字符串中的第n个字符的代码

concat( ) 连接字符串

fromCharCode( ) 从字符编码创建—个字符串

indexOf( ) 返回一个子字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1。

lastIndexOf( ) 从后向前检索一个字符串

localeCompare( ) 用本地特定的顺序来比较两个字符串

match( ) 找到一个或多个正则表达式的匹配

replace( ) 替换一个与正则表达式匹配的子串

search( ) 检索与正则表达式相匹配的子串

slice( ) 抽取一个子串

toLocaleLowerCase( ) 把字符串转换小写

toLocaleUpperCase( ) 将字符串转换成大写

toLowerCase( ) 将字符串转换成小写

toString( ) 返回字符串

toUpperCase( ) 将字符串转换成大写

valueOf( ) 返回字符串

28、split() join()的区别？

答：split() 方法通过把字符串分割成子字符串来把一个 String 对象分割成一个字符串数组。

语法

str.split([separator][， limit])

参数separator指定用来分割字符串的字符（串）。separator 可以是一个字符串或正则表达式。 如果忽略 separator，则返回整个字符串的数组形式。如果 separator 是一个空字符串，则 str 将会把原字符串中每个字符的数组形式返回。

参数limit是一个整数，限定返回的分割片段数量。split 方法仍然分割每一个匹配的 separator，但是返回的数组只会截取最多 limit 个元素。

例子：

"2：3：4：5".split("：") //将返回["2"，"3"，"4"，"5"]

"|a|b|c".split("|") //将返回[""，"a"，"b"，"c"]

"hello".split("")   //可返回 ["h"，"e"，"l"，"l"，"o"]

"hello".split(""， 3)   //可返回 ["h"，"e"，"l"]

join() 方法将数组中的所有元素连接成一个字符串。

语法

str = arr.join([separator = '，'])

参数separator 可选，用于指定连接每个数组元素的分隔符。分隔符会被转成字符串类型；如果省略的话，默认为一个逗号。如果 seprator 是一个空字符串，那么数组中的所有元素将被直接连接。

例子：

var a = ['Wind'， 'Rain'， 'Fire']；

var myVar1 = a.join()；      // myVar1的值变为"Wind，Rain，Fire"

var myVar2 = a.join('， ')；  // myVar2的值变为"Wind， Rain， Fire"

var myVar3 = a.join(' + ')； // myVar3的值变为"Wind + Rain + Fire"

var myVar4 = a.join('')；    // myVar4的值变为"WindRainFire"

29、例举3中强制类型转换和2中隐式类型转换？

答：强制

转化成字符串 toString() String()

转换成数字 Number()、 parseInt()、 parseFloat()

转换成布尔类型 Boolean()

隐式

拼接字符串   例子 var str = "" + 18

- / % ===

30、Html5重要的新的表单元素有哪些(至少举例5个)？

答：1输入类型

email 输入email格式

tel 手机号码

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围

color 拾色器

time 时间

date 日期 不是绝对的

datetime 时间日期

month 月份

week 星期

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

 

2表单元素（标签）

<datalist> 下拉选项，使用中文时要注意

<keygen> 生成加密字符串

<output> 不可当做数据提交？

<meter> 表示度量器，不建议用作进度条

3表单属性

placeholder 占位符

autofocus 获取焦点

multiple 文件上传多选或多个邮箱地址

autocomplete 自动完成，用于form元素，也可用于部分input，默认值on

form 指定表单项属于哪个form，处理复杂表单时会需要

novalidate 关闭验证，可用于<form>标签，（只适应用form）

required 验证条件，必填项

pattern 正则表达式 自定义验证规则

表单重写没有提及，自行验证，共包含

formaction、formenctype、formtarget、formmethod、formnovalidate

应用于提交按钮上，如：<input type="submit" formaction="xxx.php">

 

4表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计

oninvalid 验证不通过时触发

31、HTML5中的本地存储概念是什么？生命周期有多长？

答：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。

1特性

1、设置、读取方便

2、容量较大，sessionStorage约5M、localStorage约20M

3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

2window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

3window.localStorage

1、永久生效，除非手动删除

2、可以多窗口共享

4相关的一些方法详解

setItem(key， value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

32、Post与get的区别，什么时候用post，什么时候用get？

答：区别：

get存储内容小，不能超过2kb，有限；文件上传只能用post。

get不安全，显示在地址栏。

get效率高，因为post请求需要加密和解密的过程，get不需要。
在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；在提交一些不紧要信息时，使用get，效率高。

33、Javascript面向对象中继承实现？

答：继承：就是自己没有， 别人有. 拿过来为自己所用， 并成为自己的东西

传统继承基于模板，js 继承基于对象

1.原型链

2.借用构造函数

3.组合继承

4.原型式继承

5.寄生式继承

6.寄生组合式继承

34、’data-’属性的作用是什么？如何获取’data-’属性的值？

答：data-属性是H5中的，用来自定义属性，通过dataset属性获取。

不是所有的浏览器都支持，不支持用getAttribute获取。

35、JavaScript的事件流模型都有什么，以及怎么阻止他们？

答：1、原始事件模型

普通的事件绑定，比如事件赋值，按钮上绑定事件等

2、DOM2事件模型

addEventListener("eventType"，"handler"，"true!false")；

removeEventListner("eventType"，"handler"，"true!false")；

气泡模型（与ie有点区别），冒泡和捕获

3、IE模型

气泡模型

attachEvent( "eventType"，"handler")

detachEvent("eventType"，"handler" )

与dom2不同的是eventType有on前缀

36、选其中一个正则问题作答(写出正则即可)

a)         写一个控制在30天到180天的正则表达式

 /^([3-9]|1[1-8])\d$/

b)        写一个能够验证 座机号码 的正则表达式。如：010-12345678

/^\d{3}_\d{8}$/

 

三、其他问题（相关的问题）

1、请谈谈你对性能优化的认识？

答：网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

2、如何避免XSS？

答：禁止危险脚本

IE8是第一款内置了XSS脚本拦截保护的浏览器。谷歌的Chrome也会紧随其后推出类似功能。这两款浏览器都会首先查看来自某个Web服务器的脚本是否是恶意的——如果是，就拦截它。在今年4月的黑帽欧洲2010大会上，研究专家David Lindsay和Eduardo Vela Nava却演示了一种可以破除这种拦截的办法，不过谷歌已经修复了Chrome中的这个漏洞。微软则在今年1月（补丁MS10-002）和3月（MS10-018）也已解决了大部分问题，并计划在6月修复第3个漏洞，所以在你读到这篇文章的时候，破除XSS脚本拦截的问题可能已经完全解决了。

Firefox的用户则可以利用免费的NoScrpit附加组件有选择地拦截脚本。比如说，你可以放行一段Flash视频，而同时拦截该网站上的其他脚本组件。IE和Chrome在拦截可疑脚本方面没有这么细的粒度——它们是要么全拦截，要么全不拦截。

NoScrpit也有一个问题，那就是大多数用户并不喜欢放行个别脚本的做法，因为这样会带来不便。不过拦截和放行今后可能会成为你的第二天性。你还可以对某个特定网站上的所有脚本进行认证，无论是为了一次性访问还是今后的所有访问，这样的认证如今在IE 8和chrome中也可以做了，使得防范XSS攻击实现更加可能。

3、平时如何管理项目？

答：所谓项目，简单地说，就是在既定的资源和要求的约束下，为实现某种目的而相互联系的一次性工作任务。一般来说，项目具有如下的基本特征：

1）明确的目标其结果只可能是一种期望的产品，也可能是一种所希望得到的服务。

2）独特的性质每一个项目都是唯一的。

3）资源成本的约束性每一项目都需要运用各种资源来实施，而资源是有限的。

4）项目实施的一次性项目不能重复。

5）项目的不确定性在项目的具体实施中，外部和内部因素总是会发生一些变化，因此项目也会出现不确定性。

4、请谈谈项目的迭代周期？

答：软件项目开发，一般都会采用增量、迭代、（或者叫进化、演化、演进）的软件开发模型，众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形，改进原则是：增加客户在整个项目周期中的参与度，降低软件开发过程中的风险，增强软件项目的后期可维护性。

不同的软件开发模型，迭代周期长短也不相同，有的是一个月，有的是两周，我们一般都是根据实际情况确定，一个周期完成，将项目成果（可运行的软件）提交给用户（或进行内部评审），通过后就进入下一个迭代开发周期。

5、工作中用过什么构建工具？

答：用过gulp。

第一步：安装node和npm，搭建node环境。

第二步：安装gulp

第三步：新建Gulpfile文件，运行gulp

安装依赖，提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。

Gruntfile维护起来那么困难，有几个原因：

配置和运行分离

程序员都知道，变量的声明和使用挨在一起，最方便理解和修改。但Gruntfile里，配置Task和调用它们的地方离得很远，极大地增加了心智负担

每个插件做的事太多

每个Task的结果必须写到磁盘文件，另一个Task再读，损害性能倒是小事，更麻烦的是让整个过程变复杂了。就像一个个小作坊，来料加工又返回给客户，这中间的沟通成本、出错机会都大大增加。配置项过多做事多了，配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件，都得去学习一番。

6、谈谈你对模块化的理解？

答：

•     模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

•     让开发者便于维护，同时也让逻辑相同的部分可复用

•     模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程，那么模块化的过程通俗点讲就是：

模块化的过程就是：

•     1、拆分

将整个系统按功能，格式，加载顺序，继承关系分割为一个一个单独的部分.

注意：拆分的粒度问题，可复用问题，效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起，组成一个资源块.

将每个资源块按找需求，功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：

1.    namespace

2.    sass，less

3.    AMD&CMD

4.    html模版

5.    grunt，gulp，webpack

6.    FIS，YUI，KISSY

7、平时都用什么第三方插件？

答：pullpage，zepto，underscore，JqueryUI，JqueryMobile，Echart，ueditor，animate.js等。

8、请描述一下cookie，sessionStorage和localStorage的区别？

答：cookies兼容所有的浏览器，Html5提供的storage存储方式。

①　Document.cookie

②　Window.localstorage

③　Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

9、如何使用缓存？

答：可以基于http的头信息控制缓存

ajax请求对早期的IE浏览器默认就是缓存的，可以通过时间戳防止缓存。

10、谈谈你对预加载的理解？

答：Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

11、缓存和预加载的区别是什么？

答：缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）。

12、图片如何压缩？

答：可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小 可缓存

使用 CSS Sprites

13、压缩文件有哪些方法？

答：使用Grunt、Sass、ant压缩

14、如何区分静态页面和动态页面？

答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。

15、字符串拼接和模板引擎，项目中会如何操作？模板引擎减少http请求，字符串不可变?模板引擎会不会利于SEO优化？

答：简单的数据渲染，拼接字符串即可，稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式；模板引擎会影响SEO优化，为了解决这个问题，需要关注SEO的页面最好采用后台渲染的方式。

16、前台兼容性问题有哪些？

答：主要是常用浏览的（前端）API差异，渲染差异，等等。

17、你如何对网站的文件和资源进行优化?期待的解决方案包括？

答：文件合并

    文件最小化/文件压缩

    使用CDN托管

    缓存的使用

18、内存泄漏怎么理解？

答：IE6时代有bug，闭包会造成内存泄漏，这个现在已经无须考虑了。
其次，闭包本身不会造成内存泄漏，但闭包过多很容易导致内存泄漏。
这句话很矛盾，技术上讲，闭包是不会造成内存泄漏的，浏览器的bug除外。但是，闭包会造成对象引用的生命周期脱离当前函数的上下文，因此，如果不仔细考虑闭包函数的生命周期，的确有可能出现意料之外的内存泄漏，当然，从严格意义上讲，这是程序员自己的bug，而不是闭包的错。

19、微格式到底是做啥用？

答：是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API（一般基于XML-PRC、REST，相对复杂）。RSS具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL等），不能更好地描述语义，不太容易与已存在的工具结合等。用微格式可以来聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的内容。

微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。

20、懒加载是用滚轮判断高度好还是用插件？

答：使用插件比较好，插件考虑的问题比较全面，仅仅通过滚轮高度判断很容易导致一些副作用（比如一次性请求多次）。

21、如何缓存整个页面，在没有网络的时候可以来回的跳转？

答：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性。

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

实例 - 完整的 Manifest 文件

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

 

NETWORK：

login.asp

 

FALLBACK：

/html5/ /404.html

 

22、CDN是啥？

答：CDN的全称：是Content Delivery Network，即内容分发网络，加速的意思，那么网站CND服务就是网站加速服务。

CDN加速原理：CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。

CDN的特点：

1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性

2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。

3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度

4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。

5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量。

23、浏览器一次可以从一个域名下做多少资源？

答：浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，不同浏览器这个限制的数目不一样，超过限制数目的请求会被阻塞；

目前的话，所有浏览器的并发数目一般限制在10以内。

24、什么是垃圾回收机制（GC）？

答：早期的计算机语言，比如C和C++，需要开发者手动的来跟踪内存，这种机制的优点是内存分配和释放的效率很高。但是它也有着它的缺点，程序员很容易不小心忘记释放内存，从而造成内存的泄露。

新的编程语言，比如JAVA， C#， javascript， 都提供了所谓“垃圾回收的机制”，运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存，而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。GC的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险。

25、image和canvas在处理图片的时候有什么区别？

答：image是通过对象的形式描述图片的；

canvas通过专门的API将图片绘制在画布上。

26、简述移动开发的注意点，如何做好不同手机的适配，你以前的项目是怎么做的?

答：1、单独做移动端项目，采用百分比布局

2、采用响应式的方式做适配

27、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

答：最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

28、http和tcp有什么区别？

答：TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，是一种“经过三次握手”的可靠的传输方式；

HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是应用层协议，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。

29、向git中添加一个文件并commit，然后push到remote server，请写出相关命令？

答：

$ git add README.md

$ git commit -m "add README.md"

$ git push origin master

30、请把以下HTML文档翻译成MarkDown格式？

    <h3>Header</h3>

    <p>Hello world!<a href="https：//www.google.com">Google</a></p>

    <ol>

       <li>Number One</li>

       <li>Number Two</li>

    </ol>

答：### Header

Hello world![Google](https：//www.google.com)

1.  Number One

2.  Number Two

 

31、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

答：Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

32、写出几种IE6 BUG的解决方法？

答：1.双边距BUG float引起的 使用display：inline；

       2.3像素问题 使用float引起的 使用dislpay：inline -3px

       3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

       4.Ie z-index问题 给父级添加position：relative

       5.Png 透明 使用js代码 改

       6.Min-height 最小高度 ！Important 解决’

       7.select 在ie6下遮盖 使用iframe嵌套

       8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over：hidden，zoom：0.08 line-height：1px）

33、图片优化

项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？

答：1、首先了解在web开发中常见的图片有那些格式。

JPG  通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。

PNG  这种格式的又分为两种  一种PNG-8，一种 PNG-24。

PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。

PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE可以试用js插件pngfix）一般是背景图标中使用的多。

GIF 这种格式显而易见的是在需要gif动画的时候使用了。

 

2．优化方案

l  样式代替图片

例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。

l  精灵图

CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。

l  字体图标

Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

l  Base64

将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

    Base64格式

    data：[][；charset=][；base64]，

    Base64 在CSS中的使用

    .demoImg{ background-image： url("data：image/jpg；base64，/9j/4QMZRXhpZgAA

SUkqAAgAAAA   L....")； }

    Base64 在HTML中的使用

    <img width="40" height="30"   src="data：image/jpg；base64，/9j/4QMZRXhpZg

AASUkqAAgAAAAL...." />

l  图片响应式

通常图片加载都是可以通过lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的目的来达到优化。

34、你知道有哪些方法可以提高网站的性能？

答：我们从两个方面来讲：

（1）资源加载

CSS顶部， JS底部

CSS JS文件压缩

尽量使用图片使用精灵图，字体图标

图片加载可通过懒加载的方式。

总之就是减少资源体积减少资源请求次数。

（2）代码性能

Css：

使用CSS缩写，减少代码量；

减少查询层级：如.header .logo要好过.header .top .logo；

减少查询范围：如.header>li要好过.header li；

避免TAG标签与CLASS或ID并存：如a.top、button#submit；

删除重复的CSS；

….

Html：

减少DOM节点：加速页面渲染；

正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

减少页面重绘。比如 给图片加上正确的宽高值：这可以减少页面重绘，

……

Js：

尽量少用全局变量；

使用事件代理绑定事件，如将事件绑定在body上进行代理；

避免频繁操作DOM节点；

减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

35、设计模式有哪些？列举你在前端开发工作中自己应用到或者了解到其他框架所用到的设计模式？

答：单例、工厂、观察者、适配器、代理模式。

36、请描述你熟悉的语言的垃圾回收(GC)机制，他们对循环引用是如何处理的？如何查找内存泄漏(MemoryLeak)?

答：JavaScript的垃圾回收机制主要是根据数据是否还存在引用，没有引用的数据空间可能在某个时间被回收；在java中垃圾回收机制采用对象遍历来解决循环引用；windows的任务管理器就可以查看到内存泄露。

 

四、Angular、主流框架和服务器相关问题

1、ng-app是什么？

答：ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。

所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

2、说说MVC和MVVM分别是什么？

答：MVC全名是Controller模型(model)－视图(view)－控制器(controller)的缩写，

MVVM是Model-View-ViewModel的简写。

3、−g是什么？

答：-g是-global的简称，全局的意思。

4、自定义指令的类型（E，A，C，M）？

答：元素（E）、属性（A）、类（C）、注释（M）。

5、$scope和自定义指令里的scope有啥区别？

答：$scope 对象在 AngularJS 中充当数据模型的作用，也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样，因为 $scope 并不处理和操作数据，它只是建立了视图和 HTML 之间的桥梁，让视图和Controller 之间可以友好的通讯.

自定义指令里的scope表示指令的作用域，它有三个可选值：true、false、对象{}

6、Ionic中的路由？

答：Ionic也是基于Angular的，使用的是ui-router，

ui-router的核心理念是将子视图集合抽象为一个状态机，导航意味着 状态的切换，Ionic之所以没有使用Angular官方的ngRoute，是回ngRoute缺少一些高级的特性，比如视图命名，视图嵌套。

7、filter？

答：过滤器。

8、ng-bind？

答：ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。

9、说一说link？

答：link中可以拿到scope和controller，可以与scope进行数据绑定，与其他指令进行通信。

10、为什么angular不推荐使用dom操作？

答：Angular倡导以测试驱动开发，在的service或者controller中出现了DOM操作，那么也就意味着的测试是无法通过的

使用Angular的其中一个好处是啥，那就是双向数据绑定，这样就能专注于处理业务逻辑，无需关系一堆堆的DOM操作。如果在Angular的代码中还到处充斥着各种DOM操作，那为什么不直接使用jquery去开发呢。

11、看过Angular的源码吗，它是怎么实现双向数据绑定的？

答：angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。
在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。

12、ui-router 和 ng-router区别？

答：AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL

ui-router的核心理念是将子视图集合抽象为一个状态机，导航意味着 状态的切换。

13、什么是指令？

答：指令是指示计算机执行某种操作的命令，它由一串二进制数码组成。一条指令通常由两个部分组成：操作码+地址码。

14、service服务三种方式是什么？

答：angularjs 中可通过三种（$provider，$factory，$service）方式自定义服务。

15、gulp任务都是怎么定义，怎么执行的？

答：通过 gulp.task方法定义任务，在项目中新建gulpfile.js文件，书写代码，如：

var gulp = require(‘gulp’)

gulp.tasks(

‘script’ // 任务名

，function(){

  // 在这里写任务需要执行的代码

})；

在命令输入`gulp 任务`，可以执行所在目录gulpfile.js文件中的任务。

16、Bootstrap中最多可以分多少列？lg、md、sm、xs这几个屏幕宽度的界限是多少？

答：12列

.col-xs- 超小屏幕手机 (<768px)
       .col-sm- 小屏幕平板 (≥768px)
       .col-md- 中等屏幕桌面显示器 (≥992px)
       .col-lg- 大屏幕大桌面显示器 (≥1200px)

17、angular中方法apply和digest区别？

答：当数据出现没有经过angular但是发生改变的情况下，需要调用apply。Apply的范围比较广，只执行一次，但是digest针对某一元素执行多次。

18、前端路，什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

答：路由 Router 

       前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。

       Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，但是 JavaScript 是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。

       优点可以控制  业务逻辑  做无页面刷新  体验更好

       缺点页面不刷的话无法释放内存，如果过多的操作会造成页面体验不好。

 

19、ng-show/hide和ng-if的区别是什么？

答：Show/hide是显示隐藏，if是是否存在某一部分。

20、react虚拟DOM运行机制是什么？

答：在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。虚拟dom。

21、react中prop和state的区别？

答：需要理解的是，props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。

22、redux的原理？

答：Redux 把一个应用程序中，所有应用模块之间需要共享访问的数据，都应该放在 State 对象中。这个应用模块可能是指 React Components，也可能是你自己访问 AJAX API 的代理模块，具体是什么并没有一定的限制。State 以 “树形” 的方式保存应用程序的不同部分的数据。这些数据可能来自于网络调用、本地数据库查询、甚至包括当前某个 UI 组件的临时执行状态（只要是需要被不同模块访问）。

23、node常用模块？

答：http fs path url Buffer process

24、了解npm，spm，nodejs吗，请简要描述？

答：NPM便于JavaScript开发者共享和重用代码，它可以很容易地更新你的代码；再分享。是全球最大的开源库生态系统。

SPM是淘宝社区电商业务（xTao）为外部合作伙伴（外站）提供的一套跟踪引导成交效果数据的解决方案。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。它使我们能够在本地运行javascript。

25、请列举在内网的两台服务器中拷贝文件的方法？用Shell脚本解答数据库？

答：scp -P 1234 -r test_folder user@192.168.1.20：~

主要就是scp命令的使用

26、请描述你所熟悉的Web服务器框架(如Django)作为一个成熟的Web框架，需要提供哪些重要的功能模块？

答：提供了网站开发的常用模块：处理用户请求、操作数据库、模板渲染、配置文件管理等。

27、服务器Node.js和浏览器js的区别是什么？Node.js把js从客户端迁移了到服务端、主要做了哪些工作？为什么说Node.js适合做高并发的互联网应用？

答：Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。Node.js 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

五、网络相关问题

1、请解释下列术语：UrlEncode，Utf8，JSON，UTC，MD5？

答：Urlencode：将字符串以url形式编码（在编程语言中通常都有实现该功能的内置函数或者API）。

Utf8：是一种针对Unicode的可变长度字符编码，主要用于在网页上显示各国语言字符。

2、请解释GET/POST的区别，以及请求参数放到url里和放到body里面的区别？

答：Post与Get区别：

GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。

POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。

传输数据的大小

在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。

对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。

安全性

Get是Form的默认方法，安全性相对比较低。

请求参数放到url里和放到body里面的区别

首先，参数的存放位置我们无法直接指定，而是不同的请求方法参数传递的方式不同。

常用的HTTP请求主要为GET请求和POST请求两种，GET请求的参数会通过以跟随在URL后边以键值对的方式进行传递（例：key1=a&key2=b&key3...)；而POST请求的参数会通过HEADER进行传递。考虑到安全性的问题，可以确定两者都不安全，原因是HTTP请求可以被轻易抓包和截获，其中的请求参数值自然会很容易被获取。

3、请列举出常用的Http Header，Cookie是怎么实现的？

答：Content-Length，请求、响应体的数据字节大小
Accept-Encoding，请求头，可接受的文本压缩算法，如： gzip， deflate
Accept-Language，请求头，支持语言，客户端浏览器的设置，如：zh-cn，zh；q=0.8，en-us；q=0.5，en；q=0.3
User-Agent，请求头，浏览器信息，

Cookie，请求头，服务器或客户端在上次设置的COOKIE，包括作用域名(.360buy.com)，过期时间，键与值。

Referer，从一个连接打开一个新页面，新页面的请求一般会加此信息，标名是从哪里跳过来的，所有的页面的打开历史链就可被挖掘出来，有利于分析用户行为与CPS分成

Cookie在浏览器本地会有一个文件存储数据，通信的时候通过请求头和响应头传递数据

4、请解释下列返回码的含义：200，302，400，403，500，502

答：200：请求成功

302：请求的资源临时从不同的 URI响应请求。(资源临时重定向)

400：错误请求（请求的参数错误或者服务器不理解请求的语法）

402：10.4.3 402 Payment Required   This code is reserved for future use.

该状态码是为了将来可能的需求而预留的

500：服务器端错误

502：网关或代理无效/无响应，网络错误

5、长连接和短连接的区别

HTTP协议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？

到现在http出现了  1.0和 1.1版本

Keep-Alive是从1.1默认就支持了。

1、什么是Keep-Alive模式？

我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

 

http 1.0中默认是关闭的，需要在http头加入"Connection： Keep-Alive"，才能启用Keep-Alive；http 1.1中默认启用Keep-Alive，如果加入"Connection： close "，才关闭。目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep-Alive连接就看服务器设置情况。

2、启用Keep-Alive的优点

从上面的分析来看，启用Keep-Alive模式肯定更高效，性能更高。因为避免了建立/释放连接的开销。

6、从服务器考虑提高网站性能？

答：业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css，js，服务器等方面介绍）？

       对于服务器方面前端能做的工作：

       使用CDN加速，使用户从离自己最近的服务器下载文件；

       减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

       为文件头指定Expires，使内容具有缓存性；

       前端优化：DNS预解析提升页面速度

       <link rel="dns-prefetch" href="http：//hm.baidu.com" />

       <link rel="dns-prefetch" href="http：//eiv.baidu.com" />

       服务器端能做的工作：

       负载均衡，分布式存储，提升服务器性能等等。

7、什么是Daemon进程？

答：Daemon()程序是一直运行的服务端程序，又称为守护进程。通常在系统后台运行，没有控制终端，不与前台交互，Daemon程序一般作为系统服务使用。Daemon是长时间运行的进程，通常在系统启动后就运行，在系统关闭时才结束。一般说Daemon程序在后台运行，是因为它没有控制终端，无法和前台的用户交互。Daemon程序一般都作为服务程序使用，等待客户端程序与它通信。我们也把运行的Daemon程序称作守护进程。

 

8、优化一个以I/O为瓶颈的程序，以下哪些方法效果比较显著，Why?

a)         增加CPU数目

b)        提高CPU主频

c)         增大内存的容量

d)        采用多线程

e)         采用异步I/O和多路(Multlplex)I/O

f)         对每次I/O进行Bath访问(多次I/O合并一次完成)

答：c、e、d、f提升的效果会比较显著

c通过将数据预读取到内存中（建立内存池）的方式，提高访问时候的效率，有效减少磁盘IO读写次数。

 

 

9、什么是内存对象的序列化(Serialiization)？为什么要序列化？请描述你熟悉的网络传输序列化(Serialiization)框架或格式(Server)？

答：把对象转换为字节序列的过程称为对象的序列化

序列化主要用于网络传输数据及将数据保存在硬盘上

常见的序列化以后的格式有：XML  Jason  ，但它们都是字符串

六、项目相关问题

1、请谈下团购倒计时如何实现？

答：团购倒计时页面端的效果比较好实现，主要是样式和时间的操作，重要的考虑时间要和服务器端同步，其实这个效果也可以基于服务器端推送技术来实现。

2、轮播图有哪几种？如何实现？

答：纯CSS可以实现轮播图；JS实现轮播图。

3、如何实现数组去重？

答：

A.最简单的可以直接利用ES5的indexOf方法。

function dupRemove(arr) {

        var tmp = []； //一个新的临时数组

for (var i = 0； i < arr.length； i++) {

            // 判断tmp数组中是否存在arr中第i元素，如果不存在则添加到tmp数据组。

if (tmp.indexOf(arr[i]) == -1) {

tmp.push(arr[i])；

            }

        }

return tmp；

    }

B.还有一种比较有意思的写法
    function dupRemove (arr) {

var tmp = []；

for (var i = 0， l = arr.length； i < l； i++) {

for (var j = i + 1； j < l； j++) {

if (arr[i] === arr[j]) {

                    j = ++i；

                }

            }

tmp.push(arr[i])；

        }

return r；

    }

4、写一个方法获取url中？号后面的参数，并将参数对象化？

答：function getSearch (url) {

var reg_url = /^[^\?]+\?([\w\W]+)$/，

    reg_params = /([^&=]+)=([\w\W]*?)(&|$|#)/g，

    arr_url = reg_url.exec(url)，

    ret = {}；

if (arr_url && arr_url[1]) {

var str_ params = arr_url[1]， result；

while ((result = reg_ params.exec(str_ params)) != null) {

ret[result[1]] = result[2]；

  }

 }

return ret；

}

 

七、程序题

1、var a=[]； a[0]=0；a[1]=1；a[4]=4；请问a.length的值是多少？a[3]的输出结果是什么？

 5  undefined

2、var a=[5，6]； var b=a；  b[0]="hello"；  alert(a[0])；  请问值是多少？

"hello"

3、typeof(null)，typeof(undefined)，typeof(NaN)，typeof(NaN==NaN)，说出上面代码执行结果？

object

undefined

number

boolean

4、function doSomething(){

for(var i = 0； 4 > i； i++) {

var k = 100；

aMrg +=’，’ + (k + i)；

}

    }

var k = 1，aMrg = k；

doSomething()；

aMrg +=k；

log(aMrg)；

 

1，100，101，102，1031

5、请写出下面输出的值

Console.log(undefined || 1)；//值___1__

Console.log(null || NaN)；//值__NaN___

Console.log(0 && 1)；//值__0___

Console.log(0 && 1 || 0)；//值__0___

6、看下列代码，<p>标签内的文字是什么颜色的？  红色

<style>

.classA{color： blue}；

.classB{color： red}；

</style>

<body>

<p class=”classB classA”>123</p>

</body>

7、var a = [5，6]；   var b = a；  b[0] = “hello”；  alert(a[0])；  值是多少？

"hello"

8、你面前有一座高塔，这座高塔有N(N > 100)个台阶，你每次只能往前迈1个或者2个台阶，请写出程序计算总共有多少种走法？

这个案例满足斐波那契定律  1，1，2，3，5，8，13，21， 34， 55， 89， 144

var n1 = 1；
    var n2 = 1；
    var n3 = n1 + n2；

for (var i = 3； i <= n； i++) {
    n3 = n1 + n2；
    n1 = n2；//往后推一项
    n2 = n3；//往后推一项
    }
    console.log(n3)；

9、请阅读下面的CSS代码

#left {

color： white !important；

}

#container #left {

color： red；

}

#left {

color： green !important；

}

.container #left {

color： blue；

}

则在如下html中

<div class=”container” id=”container”>

<span id=”left”>left</span>

</div>

#left最终color属性值为？  绿色

10、下面这段代码想要循环延时输出结果0 1 2 3 4，请问输出结果是否正确，如果不正确说明为什么，并修改循环内的代码使其输出正确的结果。

for (var i = 0； i < 5； ++i) {

setTimeout (function () {

console.log(i + ‘’)；

}，100*i)；

}

不正确，先执行FOR循环。for循环完成后，在去执行setTimeout。但是这个时候I已经是5了，所以输入了5次5

for (var i = 0； i <5； ++i) {
var a = 0；
setTimeout (function () {
console.log(a++)；
    }，100*i)；
}

11、完成函数showlmg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

<body>

<script type=”text/javascript”>

Function showImg (oSel) {

 

}；

</script>

<img id=”pic” src=”img1.jpg” width=”200” height=”200”>

<br />

<select id=”sel” onchange=”showImg(this)”>

<option value=”img1”>城市生活</option>

<option value=”img2”>都市早报</option>

<option value=”img3”>青山绿水</option>

</select>

</body>

 

var pic=document.getElementById('pic')
    function showImg (oSel) {
    pic.src=oSel.options[oSel.selectedIndex].value
    console.log(pic.src)；
}；

 

答案说明：当select发生改变的时候调用showImg函数，实参为this（select对象本身），可以通过select对象的属性来为pic的src赋值实现图片切换

12、完成foo()函数的内容，要求能弹出对话框提示当前选中的是第几个单选框

<html>

<head>

<meat http-equiv=”Content-Type” content=”text/html； charset=utf-8”>

</head>

<body>

<script type=”text/javascript”>

function foo() {

 

}；

</script>

<form name=”form1” onsubmit=”retuen foo()”>

<input type=”radio” name = “radioGroup”>

<input type=”radio” name = “radioGroup”>

<input type=”radio” name = “radioGroup”>

<input type=”radio” name = “radioGroup”>

</form>

</body>

</html>

 

var a=document.getElementsByTagName('input')
    function foo() {
    for(var i=0；i<a.length；i++){
    if(a[i].checked){
    alert(i+1)
        }
    }
}

题出的有问题，onsubmit只有在提交的时候才会触发这里面没有submit按钮，在提交事件触发的时候遍历哪个input表单是选中状态然后alert粗来

13、计算下面程序运行结果

var msg = ‘hello’；

function great(name， attr) {

name = ‘david’；

var greating = msg + name + ‘!’；

var msg = ‘您好’；

For (var i = 0 ； i < 10；i++) {

var next = msg + ‘您的id是’ + i*2 + i；

}

console.log(arguments[0])；

console.log(arguments[1])；

console.log(greating)；

console.log(next)；

}

geat(‘Tom’)；

 

答案：david  //参数1

hellow world 01.html：20 undefined    //参数2 未传入为未定义

hellow world 01.html：21 undefineddavid!  //name虽然是参数但是参数重新赋值为david了msg因为变量声明提升所以值为undefined

您好您的id是189//因为number+string=string所以for循环最后一次声明next=****18+9

 

14、下面这段JS输出什么，并简述为什么？

function Foo() {

var i = 0；

return function () {

console.log(i++)；

}

}

var f1 = Foo()，

f2 = Foo()；

f1()；

f1()；

f2()；

console.log(i)；

0   //f1=Foo() 相当于f1赋值为函数Foo()的返回值f1=function（）{

console.log(i++)

}

1   //因为f1=了一个function所以有了作用域，f2和f1不同，不在一个内存中

0

报错  //i为Foo内部的变量全局不可访问，全局中没有i变量所以会报错

15、请写出下面输出的值

 (1)var num = 1；

var fun = function () {

console.log(num)；//值___undefined___

var num = 2；

console.log(num)；//值___2___

}

fun()；

(2) var num = 1；

function fun () {

console.log(num)；//值___1____

num = 2；

console.log(num)；//值___2____

}

fun()；

16、写出以下程序执行的结果

 1)   var a = 10；

  a.pro = 10；

  console.log(a.pro + a)；

NAN number对象不可以定义私有属性 namber+非数字和字符的值就等于NaN

2)var s = ‘hello’；

  s.pro = ‘world’；

  console.log(s.pro + s)； 

//undefinedhello s位字符串，字符串不可以自定义属性，所以s.pro为undefined 字符串做加运算会强制拼接位字符串

3)    console.log(typeof fn)；

  function fn() {}；

  var fn；

//function 函数提升优先于变量提升

(4)   var f = true；

  If(f === true) {

var a = 10；

      }

  function fn() {

var b = 20；

c = 30；

  }

  fn()；

  console.log(a)；

//10

17、请看如下的代码，写出结果

var a = 5，b = 3；

function test() {

alert(b++)；

var a = 4；

alert(--a)；

alert(this.a)；

}

1)tese()，三次alert()的值依次是什么？335  435  535

2)new test()，三次alert()的值依次是什么？ 33undefined 43undefined 53undefined //this更改了指向原来是指向window 用了new关键字后指向test test木有a属性所以为undefined

 

18、p最后显示什么颜色。怎么让p的颜色变成黑色，并简要说明css选择器优先级关系

<style>

#classA{color：yellow}；

p.classB(color：red)；

</style>

<body>
    <p id=”classA” class=”classB”>123</p>

</body>

//p#classA{color：black}

19、关于正则表达式声明6位数字的邮编，一下代码正确的是(C)

A.var reg = /\d6/；

B.var reg = \d{6}\；

C.var reg = /\d{6}/； 

D.var reg = new RegExp (“\d{6}”)；

20、关于JavaScript里xml处理，一下说明正确的(A)

A.xml是种可扩展标记语言，格式更规范，是作为未来html的替代  //貌似XML是被替代的

B.Xml一般用于传输和存储数据，是对html的补充，两者的目的不同

C.在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同

D.在IE浏览器里处理xml，首先需要创建ActiveXObject对象

21、请选择对javascript理解有误的(B)

A.javascript是网景公司开发的一种基于事件和驱动网页脚本语言

B.JScript是javascript的简称  //微软自己的浏览器才支持

C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同

D.AJAX技术一定要使用javascript技术

22、在Jquery中下面哪一个是用来追加到指定元素的末尾(B)

A.inserAfter()

B.Append()

C.appendTo()

D.After()

23、在javascript中定义变量var a=”35”，var b = “7”运算a % b 的结果为(C)

A.357

B.57

C.0

D.5

24、下面哪个属于javascript的字符型C

A.False

B.你好

C.“123”

D.Null

25、下面哪个属于javascript的布尔值(C)

A.1.2

B.”true”

C.false

D.null

26、请选择结果为真的表达式(C)

A.null instanceof Object

B.Null === undefined；

C.null == undefined

D.NaN == NaN

 

27、下列运算方式不属于逻辑运算的是(D)

A.!a

B.a&&b

C.a||b

D.a>b

 

28、声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是(D)

A.var obj = [name ： “zhangsan” ，show ： function(){alert(name)；}]；

B.Var obj = {name ： “zhangsan”，show ： “alert(this.name)”}；

C.Var obj = {name ： “zhangsan”，show ： function () {alert(name)；}}；

D.Var obj = {name ： “zhangsan”，show ： function () {alert(this.name)；}}

 

29、以下过于Array数组对象的说法不正确的是(C)

A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数

B.reverse用于对数组数据的倒序排列

C.向数组的最后位置加一个新元素，可以用pop方法  //push吧

D.unshift方法用于向数组删除一个元素

 

30、要将页面的状态显示”已经选中该文本”，下列JavaScript语句正确的是(A)

A.window.status = “已经选中该文本”

B.Document.status = “已经选中该文本”

C.Window.screen = “已经选中该文本”

D.Document.screen = “已经选中该文本”

 

31、点击页面的按钮，使之打开一个新窗口，加载一个页面，以下JavaScript代码中可执行的是(D)

A.<input type=”button” value=”new” onclick=”open(‘new.html’，’_blank’)”>

B.<input type=”button” value=”new” onclick=”window.location=’new.html’；”>

C.<input type=”button” value=”new” onclick=”location.assign(‘new.html’)；”>

D.<form target=”_blank” action=”new.html”>

<input type=”submit” value=”new”>

</form>

 

32、下面的JavaScript语句中，实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空(B)

A.for(var i = 0； i < form1.elements.length； i++) {

if(form1.elements[i].type ==”text”)

form1.elements[i].value = “”；

  }

B.for (var i = 0； i < document.forms.length；i++) {

if(forms[0].elements[i].type == “text”)

form[0].elements[i].value = “”；

}

C.if(document.form.elements.type == “text”)

form.elements[i].value = “”；

D.for(var i = 0； i < document.forms.length；i++) {

for(var j = 0；j < document.forms[i].elements.length；j++) {

if(document.forms[i].elements[j].type == “text”)

document.forms[i].elements[j].value = “”；

}

}

 

33、在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：010-82668155，要求前3位是010，紧接一个”-”，后面是8位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中(A)能正确实现以上功能

A.var str = form1.fname.value；If(str.substr(0，4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4))))

Alert(“无效的电话号码！”)；

B.var str = form1.fname.value；If(str.substr(0，4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

Alert(“无效的电话号码！”)；

C.var str = form1.fname.value；If(str.substr(0，3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3))))

alert(“无效的电话号码！”)；

D.var str = form1.fname.value；If(str.substr(0，4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))

alert(“无效的电话号码！”)；

34、关于正则表达式声明6位数字的邮编，一下代码正确的是(C)

A.var reg = /\d6/；

B.var reg = \d{6}\；

C.var reg = /\d{6}/；

D.var reg = new RegExp (“\d{6}”)；

35、下面关于cookie的说明正确的是(D)

A.Cookie设置的过期时间为3600s是指60分钟过期

B.Cookie设置的过期时间为3600s是指只要在间隔60分钟内有动作时就不过期

C.Cookie保存在服务器端

D.Cookie保存在用户本地

36、使用js代码实现，将下面段落中含有的链接替换成可直接点击打开的链接

<p id=”text”>这个段落里有链接

比如：：//www.abc.comm/和https：//www.github.com/都是链接。

可是他们显示在网页中是，链接不可点，还得复制粘贴到地址栏打开，好麻烦

</p>

 

37、写一个方法获取url？后面的参数，并将参数对象化。

答：function parseQueryString(url){

       var params = {}；

       var arr = url.split("?")；

       if (arr.length <= 1)

          return params；

       arr = arr[1].split("&")；

       for(var i=0， l=arr.length； i<l； i++){

          var a = arr[i].split("=")；

          params[a[0]] = a[1]；

       }

       return params；

    }

    var url = "http：//witmax.cn/index.php?key0=0&key1=1&key2=2"；

    var ps = parseQueryString(url)；

    console.log(ps["key1"])；

 

38、Node.js中，一段访问redis的代码如下

var redis = require(‘redis’)；

var client = redis.createClient()；

client.set(‘key’，‘value’， function (err， data) {

if(err) {

console.error(err.message)；

process.exit(1；)

}

cilent.get(‘key’，function (err，data) {

if(err) {

console.error(err.message)；

return；

}

console.log(data)；

process.exit(0)；

})

})；

请用Promise的异步调用方式重写

请用ES6 yield的异步调用方式重写

在经历了多个异步回调之后，如果拿到完整的堆信息(stack trace)?

 

39、用你认为合适的数据库产品，请设计数据结构，并完成一下方法(Server)；

1.当出现一次网页浏览的时候，请实现函数click(url， ip)

2.请实现查询函数pv(url)以及uv(url)

 

40、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口

<html>

<head>

<script type=”text/javasccript”>

Function closeWin() {

 

}

</script>

</head>

<body>

<input type=”button” value=”关闭窗口” onclick=”closeWin()” />

</body>

</html>

 

41、请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本全部字体标红，要求写出完整的文本框HTML代码和JavaScript逻辑代码？

答：<!DOCTYPE html>

<htmllang="en">

<head>

<meta charset="utf-8">

<title>只能输入正整数</title>

</head>

<body>

<input id="txt" type="text">

<script>

var txt= document.getElementById('txt')；

var color = window.getComputedStyle(txt，'').color

txt.addEventListener('keyup'，function () {

var reg = new RegExp("^[0-9]*$")；；

console.log(reg.test(this.value))；

if(reg.test(this.value)){

this.style.color=color；

}else{

this.style.color='red'；

        }

      })；

</script>

</body>

</html>

 

42、请对以下代码进行优化

var wrap = document.getElementById(“wrap”)；

for(var i = 0； i < 10； i++) {

var li = document.createElement(“li”)；

var text = document.createTextNode(“hello” + i)；

li.appendCChild(text)；

wrap.appendChild(li)；

}

 

43、请看下面的HTML，写出您的CSS使左边元素宽度为200px保持不变，右边元素随浏览器大小自适应

左侧盒子左浮动，给固定宽度，右侧盒子宽度100%；

         <div class="body">

       <div class="left"></div>

       <div class="right"></div>

    </div>

    .left{

       float： left；

       width：200px；

       height：300px；

    }

    .right{

       height：300px；

    }

posted on 2023-01-11 14:08  Nymph_Zhu  阅读(31)  评论(0)  编辑  收藏  举报