深圳法本信息科技有限公司(套题)
选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
---|---|---|---|---|
0 | 0 | 16 | 0 | 一般 |
问答题
1、你们项目中请求后台数据是用什么做的?
这道题的目的是考验ajax的理解
可以从原始讲解ajax,也可以从jQuery封装的方法里面讲解,主要是你对数据的获取以及对ajax的理解
2、ajax请求后台数据的步骤?
利用JS原生对象XmlHttpRequest,在不刷新页面的情况下,可以向服务器发送请求,请求回来的数据可以是XML或文本,将请求回来的数据通过DOM操作显示在页面上。具体的步骤是这样的
1.创建XHR(XmlHttpRequest的缩写)对象,这里存在兼容性的问题,IE通过ActiveXObject对象创建,其它的通过XmlHttpRequest对象创建
2.使用open()方法建立连接,有三个参数,第一个参数是请求类型,通过是get或post请求,第二个是请求的地址,第三个是否为异步请求,true表示异步,false表示同步。
3.使用send()发送请求,接一个参数,需要发送的的信息,以URL参数的形式拼接,如果没有为null
4.数据响应,这个阶段涉及到的API主要有responseText,responseXML,status(状态码),对于异步请求还会涉及到readyState和状态改变事件onreadystatechange。但读取状态改变时会触发这个事件。读取状态有五个阶段
0:未初始化,还没有调用open方法
1:启动,调用了open方法,但还没有调用send方法
2:发送,调用了send方法,但还没有响应
3:接收,收到了部分响应的数据
4:完成,收到全部响应的数据
status表示http的状态码,表示读取的信息是否正确,200表示成功,500表示服务器错误,304表示资源没有改变,使用缓存的数据。
3、pc端兼容性问题你们项目是怎样处理的?
普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。
1.Normalize.css
不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异。
2.html5shiv.js
解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
3.respond.js
解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。
4.picturefill.js
解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题
6、用过promise吗?它的基本用法?
讲解它的概念,再讲用法
Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。
Promise是一个类,可以创建一个实例, Promise,也是一个对象,用来传递异步操作的消息。
Promise有三个状态:
penging(对象的初始状态,等到任务的完成或者被拒绝)
fulfilled (任务执行完成并且成功的状态)
rejuce(任务执行完成并且失败的状态)
Promise的用法
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
7、h5有做过吗?它在移动开发中适配各个手机屏幕?
首先肯定要回答做过
然后讲解一下h5写移动端的一些设置
1.请求头<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
2.关键要找到一种长度单位,使得一样的取值,在不同尺寸的屏幕上的大小按比例缩放。以及px和rem之间的换算是多少
8、在开发移动端中具体的缩放比例?
比如同一个页面下,372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放
比例始终显示协调,不用重复调试,其中一个重要的元素是将所有定义宽高的元素设置为rem
rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。 然后其他的字体就是将你要的值除以14得到的值; 比如iphone5主题大小是320px;换算成rem就是320/14=22.85714rem; padding的24px也就是24/14=1.714285714285714rem,以此类推。 上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如右图: 用这个rem单位的好处有啥我不知道,不过如果你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了,这比em简单多了,到现在我都没搞清楚em和px之间是如何换算的。 另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,可以设置个px再设置个rem就可以了。
9、从头构建h5项目你会怎么做?
主要考虑一下几点
自适应
这是H5移动端页面的主要特质,实现它通过了很多方式。
1.meta
2.rem布局、百分比布局
meta标签
meta标签我只是简单的复制过来,指导viewport是应对移动端而已。
rem和百分比布局
这是移动端中的重点,实现自适应主要靠这俩。在一开始,我选择单独使用rem来进行布局,发现并不理想。最后选择了rem与百分比混用的方式,在大的结构和居中上使用百分比配合rem,在小的距离调整和字体上使用rem。同时,由于rem方案是根据宽度进行手机适配的,所以对于高度的变化无能威力,而百分比布局则有时会使图片拉伸,影响视觉效果。通过对各大厂商网页的浏览,发现他们的解决办法是不将高度设死,并且主动给予高度上一个可以压缩的空间,保证在压缩后也不影响视觉上的效果。
10、数组的一些操作方法,splice和slice的区别?splice的具体参数代表什么?
1.slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。
注意:该方法不会改变原数组,而是返回一个子数组,如果想删除数组中的一段元素,应该使用Array.splice()方法。
start参数:必须,规定从何处开始选取,如果为负数,规定从数组尾部算起的位置,-1是指最后一个元素。
end参数:可选(如果该参数没有指定,那么切分的数组包含从start倒数组结束的所有元素,如果这个参数为负数,那么规定是从数组尾部开始算起的元素)。
2.splice():该方法向或者从数组中添加或者删除项目,返回被删除的项目。(该方法会改变原数组)
splice(index,howmany,item1,...itemX)
index参数:必须,整数,规定添加或者删除的位置,使用负数,从数组尾部规定位置。
howmany参数:必须,要删除的数量,如果为0,则不删除项目。
tem1,...itemX参数:可选,向数组添加的新项目。
14、组件传值?
组件之间的传值方式是这样的,我先说父组件向子组件的方式吧,就是父传子,在子组件定义props对象,可以是数组或是数组对象,在父组件使用v-bind传递,这是一种方式;另一种方式就是使用插槽,在子组件定义插槽,在父组件通过slot属性指定插槽的名称来传递;
子传父可以使用自定义事件,在子组件中使用$emit自定义事件,第一个参数是事件名称(自定义),第二个参数就是事件传递的值,在父组件使用v-bind绑定自定义事件获取数据。
组件之间的传值,简单的数据可以使用路由参数传递数据,如果数据比较多的话,那就使用状态管理的插件vuex来实现。
15、在vuex中我不想用action这个异步模块我直接通过回调函数去在Mutation里面进行异步操作?
在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你能调用了两个包含异步回调的 mutation
来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务: