前端面试题（中高级）
面试题
1、 请详细说明在哪些情况下会出现跨域问题？解决跨域的方案有哪些？
解答：浏览器执行的一个脚本与其他资源如果不同源即为跨域。解决方式有
- Jsonp：利用script标签src外联引入文件不受同源策略限制，可以在页面动态添加script ，引入后端api接口地址，并以get的方式将前端回调处理函数名称告诉后端，后端响应请求时将回调返回，并将数据以参数形式传递回去
- document.domin: 两个域名必须属于同一基础域名，所有协议端口完全一致，才能以此实现跨域，如beijing.58.com tianjin.58.com
- iframe、hash： 父向子页面传输数据 将数据添加到子页面的url的hash值上，通过location.hash并添加定时器试时动态接收父页面传来的数据。子页面向父页面传输数据 利用window.name 的特性及页面重新加载当前页的name值不变， 需要三个页面配合使用，应用页面、数据页面和代理文件（空html文件，和应用页面在同一域下），此时将数据页面的窗口换成代理页面，代理页面通过window.name获取数据页面留下的数据，应用页面访问同源的代理页面就实现了跨域。
- H5新增的 window.postMessage 和 WebSocket
- 其他方式的服务器端实现跨域。
2、 定义一个react组件都有那些方式，他们之间的性能什么区别？
解答：三种方式
函数式无状态组件
Es5方式 React.createClass组件
Es6方式 extends React.Component
区别：无状态组件无法进行数据操作，es5方式是利用function模拟class写法做出来的 ， es6方式是通过新增的class的属性创建组件
3、 如果让你开发一个前端技术产品，你会怎么规划？会关注哪些注意事项？
解答：
4、 使用JavaScript实现异步操作的方式有哪些，请结合你的经验分别列举出。
解答：javascript实现异步的方法：callback（回调函数）、 发布订阅模式、Promise对象、es6的生成器函数、 async/await
5、 如何实现前端缓存，聊聊你知道的方案，并简单写出相应的使用方式。
解答：前端缓存
Localstorage 可以存储较大资源2M以上，并可以无视用户主动刷新行为，缺点是由于保存在本地很容易导致ssh注入攻击，所以要做好对应的安全措施。
const key=’scq000’
const value = ‘hello word’
//存
Localstorge.setItem(key,value);
//取
Localstorge.getItem(key)
App Cache 方案
6、 请描述你觉得在移动web 开发中可能会遇到的问题或者你所经历的坑，请写出相应的解决方案。
解答：
7、 Node.js所提供的核心模块都有哪些，深入聊一下你所熟悉的其中2-3个模块。
解答：
8、 如何实现跨页面间的数据通讯，请结合事件机制、路由、应用状态管理方案、PostMessage等方面聊聊你的想法。
解答：
一、同源页面间的通讯
BroadCast Channel Service Worker Shared Worker IndexedDB window.open + window.opener
Localstorge 利用localstorge变化时会触发storage事件，我们可以在发送消息时把消息写入到localstorge中，然后在各个页面内监听storage事件即可收到通知
Window.addEventListener(‘storage’, function (e) { if(e.key === ‘ctc-msg’){
Const data = Json.parse(e.newValue);
Const text = ‘[receive]’+ data.msg + ‘--tab’+ data.from;
Console.log(‘[storage I] receive message:’, text)
}})
二、非同源页面间通信可以使用iframe作为桥 iframe与父页面间可以通过制定origin来忽略同源限制，在每一个页面嵌入一个iframe 而这些 iframe 由于使用的是一个 url，因此属于同源页面。页面与 iframe 通信需要在页面中监听 iframe 发来的消息，做相应的业务处理
window.addEventListener('message', function (e) {
// …… do something
});
然后，当页面要与其他的同源或非同源页面通信时，会先给 iframe 发送消息：
window.frames[0].window.postMessage(mydata, '*')
其中为了简便此处将postMessage的第二个参数设为了'*'，你也可以设为 iframe 的 URL。iframe 收到消息后，会使用某种跨页面消息通信技术在所有 iframe 间同步消息，例如下面使用的 Broadcast Channel：
const bc = new BroadcastChannel('AlienZHOU');
// 收到来自页面的消息后，在 iframe 间进行广播
window.addEventListener('message',function(e){
bc.postMessage(e.data);
});
其他 iframe 收到通知后，则会将该消息同步给所属的页面：
// 对于收到的（iframe）广播消息，通知给所属的业务页面
bc.onmessage = function (e) {
window.parent.postMessage(e.data, '*');
};
9、 用户在输入框中任意输入数字，请将其转换成美元格式进行展示，例如，输入数字为8734231，对应显示结果为$8,734,231。
解答：
function AutoFormat(){
var strNum = this.document.getElementById("money").value;
var strTemp = 0;
var newStrNum="";
for(i=0;i
{
if(strNum.substr(i,1)!=",")
{
newStrNum = newStrNum + strNum.substr(i,1);
}
}
//alert(newStrNum);
strNum = newStrNum;
var tag = true;
if(//D/.test(strNum)) //if iput is not a num then clear the input box and reinput again
{
alert('Only integer is allowed');
this.document.getElementById("money").value='';
tag = false;
}
var length = strNum.length;
var mod = length%3;
var temp = "";
if(length>=4 && tag) //only the length > 4 then run this process
{
if(mod==1)
{
temp = strNum.substr(0,1)+",";
length = length -1;
newStrNum = strNum.substr(1,length); // get the other numbers
}
if(mod==2)
{
temp = strNum.substr(0,2)+",";
length = length -2;
newStrNum = strNum.substr(2,length); // get the other numbers
}
if(mod==0)
{
newStrNum = strNum;
}
for(i=0;i
{
temp += newStrNum.substr(i,3)+",";
}
temp = temp.substr(0,temp.length-1);
this.document.getElementById("money").value=temp;
//alert(temp);
}
}
10、JS继承的实现
基于一个父类
function Animal(name){
this.name = name || 'animal';
this.sleep = function(){
console.log(this.name + '正在睡觉 ！');
}
}
Animal.prototype.eat = function(food){
console.log(this.name + '正在吃' + food);
}
解答：
1.原型链继承：将父类的实例作为子类的原型
function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.name = 'catKitty';
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal);
console.log(cat instanceof Cat);
2.构造继承
function Cat(name){
Animal.call(this);
this.name = name || ‘animal’;
}
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep);
console.log(cat instanceof Animal);
console.log(cat instanceof Cat);
3.实例继承
11、实现交通信号灯（红绿灯）效果
ul{
list-style: none;
}
#traffic>li{
display: none;
}
#traffic span{
display: inline-block;
width: 50px;
height: 50px;
background: grey;
margin: 5px;
border-radius: 50%;
}
#traffic.wait li:nth-child(1) span{
background-color:#a00;
}
#traffic.wait li:nth-child(2) span{
background-color:#aa0;
}
#traffic.wait li:nth-child(3) span{
background-color:#0a0;
}
请补全javascript代码：
解答：
12.IE标准下有哪些兼容性写法
解答：var ev = ev || window.event;
var target = ev.target || ev.srcElement;
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
13、写一个函数获取非行间样式
解答：
var div = document.getElementsByTagName('div')[0];
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr]; //currentStyle 仅IE有效
}else{
return getComputedStyle(obj,null)[attr] //getComputedStyle 火狐谷歌有效
}
}
console.log(getStyle(div,"width"));
14、cookie 、session、localStorage和sessionStorage的异同
解答：
cookie 数据存放在客户端浏览器上，大小限制为4k左右，数量限制根据不同浏览器限制在20个到50个。需设置过期时间，如未设置会随浏览器关闭而消失。会在客户端和服务器端进行传递，每次都携带在HTTP头中，会有安全问题，使用cookie保存过多数据会存在性能问题。主要用于保存登录信息如用户名和密码。
session数据放在服务器上，保存一定时间，会比较占用服务器性能，为减轻服务器性能方面压力应当使用cookie，考虑到安全应当使用session，建议将登录信息等重要信息存放为session，其它需要保存的信息存放在cookie中。
localStorage和sessionStorage 仅保存在客户端本地，不与服务器进行交互通信，不担心被截获安全性比cookie高一些，但存在被伪造问题，只能存储字符串类型，对于复杂对象可以用json对象的stringfy和parse来处理，大小限制在5M左右，有setItem()、getItem、removeItem()、clear()、key()等方法。
localstorage会一直存在除非你主动删除它。可用于保存用户购物车信息，也通常用于H5游戏产生的本地数据。
sessionstorage仅在当前会话下有效，在同源的窗口中始终存在，会随浏览器关闭被删除。可用于分步骤填写的表单。
15、Cookie在客户机上是如何存储的
解答：
当你浏览网站的时候，cookie会记录下你输入的文字和一些选择操作，当你下一次再访问同一个网站，web服务器会先查找有没有上次它留下的cookie资料，如果有就会依据cookie里的内容来判断使用者，从而送出特定的网页内容供你浏览。
16、以下代码输出结果
function A(){
this.m = 1;
}
A.prototype.m = 2;
var a = new A();
console.log(a.m);
结果：1