【面试1弹】前端

面试记录

问题点

• 问题1：原生js中，父页面与子页面通讯
• 问题2：jquery有哪些选择器
• 问题3：对promise的理解
• 问题4：ajax跨域的原理
• 问题5：vue router的原理
• 问题6：vue项目中用到了哪些技术栈
• 问题7：工作中最难忘的问题，如何处理
• 问题8：上一份工作最满意的点

归纳解答

原生js中，父页面与子页面通讯

子页面调用父页面的方法或者变量：

window.parent.方法()或者变量名

例：想在子页面中得到id= text文本框的值
window.parent.$("#text").val();

父页面调取子页面：

主要是通过contentWindow定位到子页面
例：document.getElementById(“childframe”).contentWindow.childMeth();
调取子页面中的childMeth方法

jquery有哪些选择器

第一列	第二列	第三列
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
element	$(“p”)	所有 p 元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素
:first	$(“p:first”)	第一个 p 元素
:last	$(“p:last”)	最后一个 p 元素
:even	$(“tr:even”)	所有偶数 tr 元素
:odd	$(“tr:odd”)	所有奇数 tr 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素
:header	$(":header")	所有标题元素 h1 - h6
:animated	所有动画元素
:contains(text)	$(":contains(‘W3School’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 p 元素
:visible	$(“table:visible”)	所有可见的表格
s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$("[href$=’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素
:input	$(":input")	所有 input 元素
:text	$(":text")	所有 type=“text” 的 input 元素
:password	$(":password")	所有 type=“password” 的 input 元素
:radio	$(":radio")	所有 type=“radio” 的 input 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 input 元素
:submit	$(":submit")	所有 type=“submit” 的 input 元素
:reset	$(":reset")	所有 type=“reset” 的 input 元素
:button	$(":button")	所有 type=“button” 的 input 元素
:image	$(":image")	所有 type=“image” 的 input 元素
:file	$(":file")	所有 type=“file” 的 input 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

对promise的理解

Promise是异步编程的一种解决方案
1、Promise是一个构造函数，可以通过 new Promise()得到一个 Promise 的实例；

2、在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数） ；

3、在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到这个 .then() 方法 ；

4、Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；

5.、既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：

状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；

ajax跨域的原理

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

vue router的原理

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式：

（1）利用URL中的hash("#");

（2）利用History interface在HTML5中新增的方法;

1、Hash模式：

  hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；

2、History模式：

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；