政务处理

老段带你深入解析中小型外包公司web前端必备技能

公司名称：西安祥云时代网络科技有限公司

公司地址：西安市高新区唐延路35号旺座现代城E座2102室

公司规模：十来号人（办公室大开间，一百多平的样子）

主要业务：典型的小型外包公司，主要业务从域名注册到网站建设

官网地址：http://www.xaxysd.com/

公司照片

由于户型限制，很多公司外面都没有公司门头。公司办公室同样是大开间，内部环境还可以，毕竟是比较新的写字楼。没有笔试部分，直接是技术面试。

以下主要对技术面试部分做了一些总结（人事部分问题比较中规中矩，故没有整理）：

Q：闭包是什么，有什么特性，对页面有什么影响

A：闭包是一个封闭的隔离的空间，在js中表现为函数所构成的外部无法访问的区域，当函数被外部引用时，就创建了该函数的闭包 闭包的实质是一个函数，是一个用于返回局部变量值的函数，因为在全局中，受Java链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。 闭包的特性： ①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口； ②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在 系统中，闭包中的数据依然存在，从而实现对数据的持久使用。 优点： ① 减少全局变量。 ② 减少传递函数的参数量 ③ 封装； 缺点： 使用闭包会占有内存资源，过多的使用闭包会导致内存泄露等.

Q：解决跨域的问题解决方案有哪些?

A： jsonp

web服务器反向代理

服务端代码加入特定http响应头

Q：简述一下jsonp跨域的原理

A：具体是通过动态创建标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数。

Q：HTTP协议中，除了get和post提交方式，还有其他提交方式吗？

A：HTTP/1.1协议中共定义了八种方法（有时也叫“动作”）来表明Request-URI指定的资源的不同：

1.OPTIONS

返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送\’*\’的请求来测试服务器的功能性,如获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持

的方法，如“GET,POST”。

2.HEAD

向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回,可用于欲判断某个资源是否存在。

3.GET

向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中。

4.POST

向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。可能会导致新的资源的建立和/或已有资源 的修改。

5.PUT

向指定资源位置上传其最新内容。

6.DELETE

请求服务器删除Request-URI所标识的资源。

7.TRACE

回显服务器收到的请求，主要用于测试或诊断。

8.CONNECT

HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

Q：谈谈This对象的理解

A：this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。 但是有一个总原则，那就是this指的是调用函数的那个对象。 this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象。

Q：Java的BOM和DOM有什么区别?

A：BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。 BOM的内容不多，主要还是DOM。 由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。

window对象: 弹框类的方法。前面省略window alert(\’提示信息\’) confirm(\”确认信息\”) prompt(\”弹出输入框\”) open(\”url地址\”，“black或self”，“新窗口的大小”） close() 关闭当前的网页 定时器，清除定时器: setTimeout(函数，时间) 只执行一次 setInterval(函数，时间) 无限执行 clearTimeout(定时器名称) 清除定时器

location对象： location.herf = \’url地址\’ hash 返回#号后面的字符串，不包含散列，则返回空字符串。 host 返回服务器名称和端口号 pathname 返回目录和文件名。 /project/test.html search 返回？号后面的所有值。 port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串 portocol 返回页面使用的协议。 http:或https:

Navigator对象： 查看浏览器的版本所有信息的对象。

screen对象： height: 获取整个屏幕的高。 width : 获取整个屏幕的宽。 availHeight: 整个屏幕的高减去系统部件的高 availWidth : 整个屏幕的宽减去系统部件的宽

Q：CSS3有哪些新特性？

A：CSS3实现圆角（border-radius），

阴影（box-shadow），

对文字加特效（text-shadow），

线性渐变（gradient），旋转（transform）

动画(animation)

过渡效果(transition)

rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); -webkit-transform: >rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); -moz-transform: >rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); -o-transform: >rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是:(:selection,:before,:after)

媒体查询，多列布局、border-image

Q：谈谈angular最核心的东西

A：最为核心的是：

MVC

模块化

自动化双向数据绑定

语义化标签、依赖注入等等

Q：你认为在Angular中使用jQuery好么？

A：（这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。）

我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。

angular自带了很多api可以完全替代掉jQuery中常用的api，我们可以使用angular.element，$http,$timeout,ng-init等。

我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，

或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，

当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，

在重构时会逐渐摒弃掉当初引入jquery时的一些代码。

所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去遵循angular的设计。

Q：angular 的数据绑定采用什么机制？详述原理。

A：angular采用的是脏检查机制事项数据绑定。

1、每个双向绑定的元素都有一个watcher

2、在某些事件发生的时候，调用digest脏数据检测。

这些事件有：表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。

3、脏数据检测会检测rootscope下所有被watcher的元素。

$digest函数就是脏数据监测

Q：vue/angular单页应用有哪些优缺点？

A：

优点：

速度：更好的用户体验，让用户在web app感受native app的速度和流畅， MVC：经典MVC开发模式，前后端各负其责。 ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起； 减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

缺点：

SEO问题，现在可以通过Prerender等技术解决一部分； 前进、后退、地址栏等，需要程序进行管理； 书签，需要程序来提供支持。

Q：请详细说下你对vue生命周期的理解？

A：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后：

在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

Q：请说出vue.cli项目中src目录每个文件夹和文件的用法？

A：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

面试总结：本以为小型外包公司不会用类似vue或angular这种前后端分离的单页面应用构建框架，但事实并非如此。所以目前看来vue、angular已经是我们每一个web前端工程师所需要的必备技能，最少也得熟悉其中之一。当然还有的微信小程序，目前来说很多小公司还是需要基于微信这个大平台来生存，所以目前很公司也在做微信小程序相关的一些开发。

∨阅读原文1月04日前端与移动开发基础班最后抢报中…返回搜狐，查看更多

政务账号添加来源标示处理
政务账号添加来源标示处理

责任编辑：

点击http://www.caiwu.tv/快来看看吧