javascript4试题

javascript周考试题

1.谈谈你对cookie的理解，跟localStorage/sessionStorage的区别。

(评分标准：cookie流程原理6分，localStorage/sessionStorage分别2分)

cookie是保存在浏览器端记录用户信息的一小段文本。大小不超过4k，条数约为120~150，不可跨域使用。cookie存在安全性隐患。

流程：客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该cookie一同提交给服务器。服务器检查该cookie，以此来辨认用户状态。服务器还可以根据需要修改cookie的内容

本地存储localStorage存储容量为5m，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

2.移动端开发中你遇过的坑，你是怎么解决的？

(评分标准：每点2分)

a.整体页面在移动端浏览显示内容小，需要设置viewport

b.click事件有300ms延迟，该用touchstart事件，使用touch事件出现点透现象，使用fastclick.js解决

c.fixed定位的弹窗中的表单输入是有可能被虚拟键盘遮挡，使用absolute定位动态计算弹窗位置。

d.浏览器可能会将数字当成电话号码，设置meta，禁止浏览器将数字识别为电话号码和android自动识别邮箱

e.禁止长按链接与图片弹出菜单

a, img {

-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/

}

f.链接a中触按出现阴影。可以设置a { -webkit-tap-highlight-color: rgba(0,0,0,0);}

*题外话：学会如何去解决问题

面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案，我们需要学会如何去解决这些问题。

解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？

（1）、定位问题

首先我们需要定位问题，我们可以使用下列方法：

A、DOM隔离定位法

不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素。

B、样式、JS剔除法

不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题。

C、多运行环境测试法

在多环境中测试，排查是否是由于特定环境引起

D、PC与手机联合调试法

联合PC与手机进行定位，如：通过Mac远程调试iPhone/iPad。

（2）、解决问题的方式

我们解决问题可以尝试如下的方式：

*尝试、转思维、绕解决

*优雅降权、区分处理、沟通

*搜索与提问……

和以下的思维：

*替代

*绕道

*分割……

（3）、学会解决问题

在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：

A、google、百度

B、行业博客及社区

C、同事、朋友、QQ群、论坛等。

搜索引擎和行业博客及社区让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。

（4）、学会如何总结问题

在发现、解决问题后，更重要的是要学会如何总结问题：

A、总结记录问题产生条件、解决方法和解决过程。

B、尽可能分析原理、产生的条件，避免重蹈覆辙。

C、分享给更多的人。

无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了。

3.分别说明hammer.js，swiper.js的功能用途。

(评分标准：分别5分,需交代清除用途)

hammerJS是一个优秀的、轻量级的触屏设备手势库，开源小巧，可以识别有touch、mouse和pointerEvent触发的系列手势，包括tap（点击）、doubletap（双击）、press（长按）、pan（平移）、swipe（快速滑动）、pinch（捏放）和rotate（旋转）

swiper.js是一款免费以及轻量级的javascript移动设备触控滑屏类库，同时在现代桌面浏览器也有着良好的用户体验。快速便捷开发滚屏动画效果。

4.解释jsonp，并说明原理。

(评分标准：jsonp定义2分，跨域3分，返回值是函数名包裹住JSON数据5分)

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。利用script标签的跨域请求，传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，客户端就可以随意定制自己的函数来自动处理返回数据。

5.写出本地存储localStorage的三个接口，并说明功能。

(评分标准：答对一个3分，两个6分，全对10分)

localStorage.getItem(name)获取本地存储数据

localStorage.setItem(name, value)设置本地存储数据

localStorage.removeItem(name)移除数据

6.jQuery中获取元素宽度的方法有哪些？并说明。

(评分标准：每个2.5分，没有解释说明得1分)

$(ele).width()内容宽width

$(ele).innerWidth()内容width + padding

$(ele).outerWidth()内容width + padding + border

$(ele).outerWidth(true)内容width + padding + border + margin

7.jQuery版的tab切换，写出结构及代码。

8.jQuery中的事件绑定方法有哪些。

(评分标准：每个2分)

$(ele).bind("click", cb)

$(ele).on("click", cb)推荐使用on这种方式，还能做事件委托

事件委托$(parent).on("click", "childSelector", cb)

$(ele).one("click", cb)只绑定一次事件

$(ele).trigger("click")事件模拟

$(ele).click(cb)

9.分别写出手机号码以及长度为6~20位的昵称正则表达式。

(评分标准：每个5分)

手机号码正则：/^1\d{10}$/

长度为6~20位的昵称正则：/^[0-9a-zA-Z_!@#$%^&*()]{6,20}$/

10.谈谈你对jQuery的见解。

(评分标准参考：答到兼容性2分，DOM操作2分，Ajax 2分，其他酌情给分)

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。