前端笔试+面试

跨域解决方案

1. jsonp跨域

JSONP就是利用’script’标签的跨域能力实现跨域数据的访问。
JSONP由两部分组成，回调函数和数据。

其基本思路是: 动态插入script标签，向服务器请求json数据，返回的数据将在回调函数中获取

JSONP只支持 GET 请求
原理
Web页面上用‘script’ 引入 js文件时不受同源策略的影响，因为无法监控‘script’的’src’属性是否完成数据获取，需定义处理跨域获取数据的函数如 function onBack（data）{}，用src获取数据的时候添加一个参数cb=‘onBack’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值onBack为函数真实要传递的数据为函数的参数的一串字符 如 onBack（’数据’）

1. 原生实现

var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
	alert(JSON.stringify(res));
}
//服务端返回如下（返回时即执行全局函数）
onBack({"status": true, "user": "admin"})

2. jQuery ajax

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

3. vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

2. WebSocket协议跨域

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

function WebSocketTest() {
	if ("WebSocket" in window) {
		alert("您的浏览器支持 WebSocket!");
		// 打开一个 web socket
		var ws = new WebSocket("ws://localhost:9998/echo");
		ws.onopen = function () {
			ws.send("发送数据");
			alert("数据发送中...");
		};
		ws.onmessage = function (evt) {
			var received_msg = evt.data;
			alert("数据已接收...");
		};
		ws.onclose = function () {
			alert("连接已关闭...");
		};
	}
	else {
		alert("您的浏览器不支持 WebSocket!");
	}
}

3. document.domain + iframe跨域

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
此方案仅限主域相同，子域不同的跨域应用场景。

4. 服务器代理中转 (服务器不存在跨域问题)

缺点:
开发比较麻烦，对开发环境比较严格，需要在本机上配置代理服务器。
优点:
完美解决使用jsonp，第三方服务没有修改权限的问题。程序的代码侵入性小，代码级别不需要考虑跨域问题

5. postMessage跨域

6. 跨域资源共享（CORS）

同域安全策略CORS（Cross-Origin Resource Sharing）是W3C在05年提出的跨域资源请求机制，它要求当前域（常规为存放资源的服务器）在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。
不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

数组

常用方法

• 改变原数组：push,pop, unshift, shift, reverse, splice, sort
• 不改变原数组：concat, slice, join, split

兼容性问题

ECMA Script5中数组方法如indexOf()、forEach()、map()、filter()、some()并不兼容IE6～8.
forEach()

• array.forEach(callback[, thisArg])
  callback(ele, index, this){}
  thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；
• 兼容性：不兼容IE6～8

Array.prototype.forEach = Array.prototype.forEach || function(fn, context){
	var context = context || window;
	for(var i = 0, len = this.length; i < len; i++){
		typeof fn == "function" && fn.call(context, this[i], i, this);
	}
}

map()

• array.map(callback[, thisArg])
• 兼容性：不兼容IE6～8
• 与forEach()的区别是map()会返回一个新数组

Array.prototype.map = Array.prototype.map || function(fn, context){
	var context = context || window;
	var newArr = [];
	for(var i = 0, len = this.length; i < len; i++){
		typeof fn == "function" && newArr[i] = fn.call(context, this[i], i, this);
	}
	return newArr;
}

常见考点

数组去重

• hash结构，创建新对象，属性名
• forEach + indexOf
• filter + indexOf

删除数组中的奇/偶数

function deleteOdd(arr) {
	var newArray = [];
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] % 2 == 0) {
			newArray.push(arr[i]);
		}
	}
	return newArray;
}

轮播图

原理

• 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播，或通过手动点击事件切换图片

箭头函数

知识点

• 函数声明和函数表达式的区别
  在JS中，解析器在向执行环境加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用（可访问），而函数表达式要等到执行到所在代码行时才会被真正解析执行

• 主流浏览器及其内核

  • IE：Trident
  • Opera: presto --> webkit --> Blink
  • Safari: webkit
  • Firefox: Gecko
  • Chrome: webkit -> Blink（基于webkit, Google 与 Opera Software 共同开发）

• 什么是WebGL,它有什么优点?

  • WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

  • WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

    第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;

    第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

  通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

• 对WEB标准以及W3C的理解与认识?
  web标准：一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言（EMCAScript等）。这些标准大部分由万维网联盟起草和发布
  为什么使用web标准：为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题
  W3C：万维网联盟，是一个web开发的国际性联盟

  标签闭合、标签小写、不乱嵌套 --> HTML, XHTML
  提高搜索机器人搜索几率 --> DOM
  使用外链css和 js 脚本, 结构行为表现的分离
  文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

• Doctype作用? 严格模式与混杂模式如何区分？
  声明位于文档最前面，标签之前，告知浏览器解析器用什么文档类型规范解析该文档；DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现；

  • 标准模式：浏览器按W3C标准解析执行代码。
  • 怪异模式：兼容老页面。使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
  • 严格模式：浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。
    混杂模式：是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

• HTML5是下一代html标准，其设计目的是为了在移动设备上支持多媒体

  • 优点：
    1）网络标准统一，HTML5是W3C标准推荐而来；
    2）多媒体，跨平台。可移植性好。
    3）网页自适应。提高可用性和用户的友好体验。
    4）即时更新。被大量应用于移动应用程序和游戏。
    5）新特性和标签。可以给站点带来更多的多媒体元素（音频和视频）

  • 缺点：
    1）浏览器兼容性问题，IE9以下都不支持；
    2）安全，像web storage, web socket等功能可能被黑客利用来获取用户信息和资 料；
    3）完善性：许多特性各浏览器支持程度不一样。

• $(this) 和 this 关键字在 jQuery 中有何不同？
  $(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹

• ** 相比于原生js,使用jquery的好处？**
  1). 因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色 的DOM操作的封装，

  2). 有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善 的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和
  XMLHttpRequest对象的创建和使用的问题) 出色的浏览器的兼容性。

  3).而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插 件，jquery的文档也非常的丰富。

• 封装插件的好处？如果你现在要封装一个插件，比如翻页插件，你的要怎么做,需要注意哪些地方？（可以简略代码配合文字说明，需写出主要调用jquery中的方法）

  • 好处： 封装已有方法或函数，便于在其他地方重新利用，方便后期维护和提高 开发效率。
    需要注意的地方：
    1）插件文件名推荐命名为jQuery.[插件名].js, 以免和其他的JavaScript库插件混 淆；
    2）所有的对象方法应当附加在jQuery.fn对象上，所有的全局函数应当附加在jQuery对象本身上；
    3）返回值为jQuery对象以保证可链式操作（return this）；
    4）所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响；
    5）在插件中通过$.extent()封装全局函数,选择器插件，扩展已有的object对象通过$.fn.extend({})封装对象方法插件（实例方法和工具方法）

• window.onload和$(document).ready()方法和有什么区别？
  两个方法有相似的功能，但是在实行时机方面是有区别的。
  1）window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全 加载到浏览器后才执行的。
  2）$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用 执行绑定的函数。

• CSRF工具的防御手段

1. 尽量使用POST，限制GET
   GET接口太容易被拿来做CSRF攻击，看第一个示例就知道，只要构造一个img标签，而img标签又是不能过滤的数据。接口最好限制为POST使用，GET则无效，降低攻击风险。
   当然POST并不是万无一失，攻击者只要构造一个form就可以，但需要在第三方页面做，这样就增加暴露的可能性。

2. 浏览器Cookie策略
   IE6、7、8、Safari会默认拦截第三方本地Cookie（Third-party Cookie）的发送。但是Firefox2、3、Opera、Chrome、Android等不会拦截，所以通过浏览器Cookie策略来防御CSRF攻击不靠谱，只能说是降低了风险。
   PS：Cookie分为两种，Session Cookie（在浏览器关闭后，就会失效，保存到内存里），Third-party Cookie（即只有到了Exprie时间后才会失效的Cookie，这种Cookie会保存到本地）。
   PS：另外如果网站返回HTTP头包含P3P Header，那么将允许浏览器发送第三方Cookie。

3. 加验证码
   验证码，强制用户必须与应用进行交互，才能完成最终请求。在通常情况下，验证码能很好遏制CSRF攻击。但是出于用户体验考虑，网站不能给所有的操作都加上验证码。因此验证码只能作为一种辅助手段，不能作为主要解决方案。

4. Referer Check
   Referer Check在Web最常见的应用就是“防止图片盗链”。同理，Referer Check也可以被用于检查请求是否来自合法的“源”（Referer值是否是指定页面，或者网站的域），如果都不是，那么就极可能是CSRF攻击。
   但是因为服务器并不是什么时候都能取到Referer，所以也无法作为CSRF防御的主要手段。但是用Referer Check来监控CSRF攻击的发生，倒是一种可行的方法。

5. Anti CSRF Token
   现在业界对CSRF的防御，一致的做法是使用一个Token（Anti CSRF Token）