前端面试题
1.JavaScript(或 jQuery)如何选择一个 id 为 main 的容器
#main
2.JavaScript(或 jQuery)如何选择一个 class 为 menu 的容器
.menu
3.简述什么是浏览器事件流
DOM2级事件规定的事件流包括三个阶段：
1、事件捕获阶段
2、处于目标阶段
3、事件冒泡阶段
事件捕获阶段（Event Capturing）：
按照事件捕获的思想，在此过程（click页面某元素）中，document对象会首先接收到click事件，然后事件沿着dom树依次向下，一直传播到实际目标，即div元素。但在事件流中的捕获阶段，实际目标div元素是不会接收到事件的，这就意味着没在捕获阶段，事件从document到再到后就停止了。（但IE9、Safari、Chrome、Firefox 和 Opera9.5 以及更高版本都会在捕获阶段触发事件对象上的事件）；下一个阶段是"处于目标"阶段，于是事件在发生，并在事件处理中被堪称冒泡阶段的一部分，最后，冒泡事件发生，事件又传播回文档。
冒泡阶段（Event Bubbling）：
事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点，即document对象。
DOM2 与 DOM0区别
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：
①.addEventListener()
②.removeEventListener()
所有的DOM节点都包含这两个方法，而且接受三个参数：
①.要处理的事件名；
②.作为事件处理程序的函数；
③.一个 boolean 的值，如果值为true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用此事件处理程序。
4.用 css 如何隐藏一个元素
1.opacity
opacity:0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互
.hide {
opacity:0
}
2 .visibility
visibility:hidden将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互.如果想让子元素显示，则设置子元素的visibility：visible;
.hide {
visibility:hidden
}
3.display
display:none使用这个属性，被隐藏的元素对网页的布局不起作用。不仅如此，一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
.hide {
display:none
}
4.position
position:absolute 将top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。
.hide {
position:absolute;
top:-9999px;
left:-9999px;
}
总结一下：opacity,visibility影响布局，前者不影响交互，后者影响交互；
display不影响布局，影响交互；
position 不影响布局，不影响交互；
5.一行 css 实现 padding 上下左右分别为 1px, 2px,3px, 4px
.padding-test {
padding:1px 4px 2px 3px;
}
6.前后端分离的基本原理。
前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。
1. 客户端和服务端采用RESTFul API的交互方式进行交互
2. 前后端代码库分离
在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。
前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低集成风险。
3. 并行开发
分离后，开发模式是这样的
7.前后端分离的优点
1.为优质产品打造精益团队
通过将开发团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队。
2.提升开发效率
前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
3.完美应对复杂多变的前端需求
如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。
4.增强代码可维护性
前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。
8.给 ul 设置样式为:背景色黑色,给 ul 下的 ui 设置样式为: 宽度 30px, 背景红 色
ul {
background-color:black;
}
ul>ui {
width:30px;
background-color:red;
}
9.写一个正则表达式获取HTML源码中的编码,如下的编码是;utf-8怎么通过 Python 的re模块获得?
<!DOCTYPE html>
<html lang="en">
<head>
<title>404</title>
</head>
10.如何创建响应式布局?
创建响应式布局，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
1、设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
2、通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
这里的样式就会覆盖上面已经定义好的样式。
3、设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
注意问题：
1、宽度需要使用百分比
#head { width: 100% }
#content { width: 50%; }
2、处理图片缩放的方法
简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
- 用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/356.html
来源:http://caibaojian.com
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
CSS 控制：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
3. 其他属性
例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：
table th, table td { padding: 0 0; text-align: center; }
11.你曾经使用过哪些前端框架?
html框架：
Bootstarp
js框架：
jQuery
Vue
12.什么是ajax请求?并使用jQuery和XMLHttpRequest对象实现一个ajax 请求。
"""
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
"""
########## jQuery. ###########
$ajax({
url:"/test/",
type:'post',
data:{'n1':$("#num1").val(),
'n2':$("#num2").val()
},
success:function (data){
$("#num3").val(data)
}
})
######### XMLHttpRequest ########
function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
}
var xhr = getXhr();
var stringData = {
uname: '123',
password: '123',
code: ''
}
stringData = JSON.stringify(stringData);
//POST请求
xhr.open('POST', '/user/login');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(stringData)
xhr.onreadystatechange = function(res) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(JSON.parse(xhr.responseText))
}
}
}
13.如何在前端实现轮训?
轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。
var xhr = new XMLHttpRequest();
setInterval(function(){
xhr.open('GET','/user');
xhr.onreadystatechange = function(){
};
xhr.send();
},1000)
14.如何在前端实现长轮训?
ajax实现:在发送ajax后,服务器端会阻塞请求直到有数据传递或超时才返回。 客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
function ajax(){
var xhr = new XMLHttpRequest();
xhr.open('GET','/user');
xhr.onreadystatechange = function(){
ajax();
};
xhr.send();
}
15.vuex 的作用?
Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。
16.vue 中的路由的拦截器的作用?
判断是否有token值或是否to登录页，是则next()，否则跳转到登录页
17.axios 的作用?
axios是基于promise的用于浏览器和nodejs的HTTP客户端，本身有以下特征：
从浏览器中创建XMLHttpRequest；
从nodejs发出http请求
支持promiseAPI
拦截 请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF攻击
18.列举vue的常见指令。
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once
19.简述jsonp及其原理?
为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
JSONP就是用来解决跨域请求问题的
JSONP原理：
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
20.简述cors及其原理?
CORS：全称"跨域资源共享"（Cross-origin resource sharing）
CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。
21.看javascript代码写结果:
var name = '张三';
function func(){
var name = '李四';
function inner(){
console.log(name)
}
return inner;
}
var ret = func();
ret()
执行结果：李四
22.看javascript代码写结果:
function main(){
if(1==1){
var name = "张三";
}
console.log(name);
}
执行结果：undefind
23.看javascript代码写结果:
var name = "张三";
function func(){
var name = "李四";
function inner(){
var name = "王五";
console.log(name);
}
return inner();
}
func();
执行结果：王五
24.看javascript代码写结果:
function func(){
console.log(name);
var name = "DSB";
}
执行结果：undefined
25.看javascript代码写结果:
var name = "张三";
function Foo(){
this.name = "李四";
this.func = function(){
console.log(this.name);
}
}
var obj = new Foo();
obj.func();
执行结果：李四
