面试题(包括一些ie的兼容)

ajax、axios、fetch 的异同点？(这种问题一般直接分别说三者的特点)

ajax

$.ajax({
   type: 'POST',
   url: 'xxxx',
   data: 'xxxxx',
   dataType: 'xxxxx',
   success: function () {},
   error: function () {}
});

特点：

• ajax 是基于 MVC模式的，没有适应 MVVM 的大军
• ajax 是基于 XMLHttpRequest（XHR）进行的封装，api 操作不够简洁
• 基于Jquery , 不能够被单独使用（必须引入jquery，有点坑爹）
• 异步请求不是特别友好，操作繁琐
• 有新生的fetch即将取代

axios

axios({
    method: 'post',
    url: 'xxxxx',
    data: {
        firstName: 'xxxx',
        lastName: 'xxxxx'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

特点：

• 支持 Promise API
• 是从 node.js 创建 http 请求
• 提供丰富的 api
• 支持请求、响应拦截
• 客户端支持防止CSRF
• 自动进行数据的装换（默认返回JSON数据）

fetch

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

特点:

• 脱离的 XHR，直接挂载在window对象上
• API丰富，更加底层
• 使用上更加简洁
• 不支持超时控制
• 无法检测进度
• 浏览器的支持不够友好

仁者见仁，智者见智，不管白猫黑猫，能抓老鼠就是好猫，喜欢那个用哪个，没有绝对的好坏

vue中在哪个阶段进行异步请求比较合适(阿里，百度)，为什么？

一般在 created 里面就可以，如果涉及到需要页面加载完成之后对页面有操作的的话就用 mounted。

vue中vuex的mapSetter是怎么实现的

vue中vuex的mapSetter实现原理

export function mapGetters (getters) {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    res[key] = function mappedGetter () {
      if (!(val in this.$store.getters)) {
        console.error(`[vuex] unknown getter: ${val}`)
      }
      return this.$store.getters[val]
    }
  })
  return res
}

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

ES6 模块与 CommonJS 模块的差异

阮一峰教程

什么是尾递归？

参见阮一峰的es6

application cache是怎么设置的（网易）

该特性已经从 Web 标准中删除，只做简单了解
参见MDN文档

vue项目中使用到的优化手段

根据项目实际情况，怎么用就这么说，千万别给自己挖坑

解决浏览器的兼容问题

html5shiv.js

解决 ie9 以下浏览器对 html5 新增标签不识别的问题。

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

respond.js

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

picturefill.js

解决 IE 9 10 11 等浏览器不支持 标签的问题

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>

浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

完美解决 Placeholder

<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *';}">

清除浮动 最佳实践

.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }

BFC 解决边距重叠问题

当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;

<div class="box" id="box">
  <p>Lorem ipsum dolor sit.</p>

  <div style="overflow: hidden;">
    <p>Lorem ipsum dolor sit.</p>
  </div>

  <p>Lorem ipsum dolor sit.</p>
</div>

解决 IE9 以下浏览器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

键盘事件 keyCode 兼容性写法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}

求窗口大小的兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

跨浏览器事件对象

var EventUtil = {
  // 事件监听（添加事件）
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  // 事件监听（移除事件）
  removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  // 获取事件对象
  getEvent: function(event) {
    return event ? event : window.event;
  },
  // 获取目标对象
  getTarget: function(event) {
    return event.target || event.srcElement;
  },
  // 组织默认事件
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  // 阻止冒泡
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },
  //  获取键码
  getCharCode: function(event) {
    if (typeof event.charCode == "number") {
      return event.charCode;
    } else {
      return event.keyCode; // IE8及之前版本
    }
    0;
  },
  // mousewheel 事件  非常流行，而且所有浏览器都支持它，所以 HTML 5 也加入了该事件 )
  getWheelDelta: function(event) {
    if (event.wheelDelta) {
      return client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta;
    } else {
      return -event.detail * 40;
    }
  },
  // 跨浏览器取得相关元素（鼠标当前进入的元素）
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) {
      return event.toElement; // IE9+
    } else if (event.fromElement) {
      return event.fromElement; // IE8
    } else {
      return null;
    }
  },
  // 获取剪切版的内容
  getClipboardText: function(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    return clipboardData.getData("text");
  },
  // 发送剪切版的内容
  setClipboardText: function(event, value) {
    if (event.clipboardData) {
      return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData) {
      return window.clipboardData.setData("text", value);
    }
  }
};
// 跨浏览器的写法：获取鼠标页面坐标位置
EventUtil.addHandler(div, "click", function(event) {
  event = EventUtil.getEvent(event);
  let obj = {};
  (obj.pageX = event.pageX), (obj.pageY = event.pageY);
  if (pageX === undefined) {
    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  }
  if (pageY === undefined) {
    pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  }
  return obj;
});
// 某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。
EventUtil.addHandler(div, "click", function(event) {
  event = EventUtil.getEvent(event);
  var keys = new Array();
  (event.shiftKey) && (keys.push("shift"));
  (event.ctrlKey) && (keys.push("ctrl"));
  (event.altKey) && (keys.push("alt"));
  (event.metaKey) && (keys.push("meta"));
  window.console.log("Keys: " + keys.join(","));
});

更多的干货请点击这里
react-native 实战项目学习
欢迎各位看官的批评和指正，共同学习和成长
希望该文章对您有帮助，也希望得到您的鼓励和支持