前端面试题汇总 2018/12/04
盒模型
标准盒模型：由里向外content,padding,border,margin
IE怪异和模型：宽高是内容(content)+填充(padding)+边框(border)的总宽高
通过JS获取盒模型对应的宽和高，有以下几种方法：
为了方便书写，以下用dom来表示获取的HTML的节点。
1. dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
4. dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的
5.dom.offsetWidth/offsetHeight
这个就没什么好说的了，最常用的，也是兼容最好的。
弹性布局的使用
① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；
② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
③ display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。
行快标签
一、块级标签
1.独占一行，不和其他元素待在同一行
2.能设置宽高
常见的块级标签：div, p, h1-h6, ul, li, dl, dt, dd
二、行级标签
1.能和其他元素待在同一行
2.不能设置宽高
常见的行级标签：a， span, strong, u, em-->
三、行内块标签
1.能和其他元素待在一行
2.能设置宽高
常见的行内块标签：img, input, textarea
空标签
没有闭合标签的标签被称作为空标签。
常见的有
<input /> <img /> <area /> <col /> <link /> <bgsound /> <base />
JQuery版本区别
1.3一般功能够
1.4.2一般功能够而且稳定
1.7+比较新特性
2不支持老IE
兼容的话最好选 1.x。稳定性就用1.7或者1.4，其中1.4的体积相对小
另外更加情况选用1系列还是2系列，2系列不支持ie6，7，8
常用1.4和1.7 详细信息自己看 https://www.cnblogs.com/vivijiang/p/6121003.html
Js基本类型，怎么检测类型
应用数据类型 Array Object function
基本数据类型 number String null undefined Boolean
检测方法：
1.typeof 返回类型
console.log(typeof "");
console.log(typeof 1);
2.instanceof 返回1或0 不考虑null undefined
console.log("1" instanceof String);
console.log(1 instanceof Number);
3.constructor 返回1 或0
console.log(("1").constructor === String);
console.log((1).constructor === Number);
4.Object.prototype.toString.call() 返回 [object +具体类型]
var a = Object.prototype.toString;
console.log(a.call("aaa"));
console.log(a.call(1));
巧用 localStorage 实现跨浏览器tab页互动
跨浏览器tab页的互动，比如说一个网站有一个模块是通过超链接_blank在一个新tab页打开，但是这是点击新tab页的内容需要网站也有反应，这时就可以运用localStorage。只要是同一个域名下就都能访问到。
新tab页里的表格有个点击事件，点击完后网站页弹出这行的信息。可以这样操作：
//表格点击事件回调
function clkTb(row) {
localStorage.setItem('curRowId', row.id);//前面是键，后面是值
}
//网站页接收
$(function() {
window.addEventListener('storage', function(ev) {
console.log(ev);//在这里可以找到你刚刚设置的值。
})
})
Commonjs require.js 区别
https://blog.csdn.net/crystal6918/article/details/74906757/
冒泡捕获
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。
Vue相关问题？
http://www.cnblogs.com/Renyi-Fan/p/9419742.html
h5如何做浏览器适配
1、viewport 简单粗暴的方式
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/ }
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/ }
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
4、百分比布局--面临图片自适应
刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。
那么可以用padding-top设置百分比值来实现自适应。
公式如下：
padding-top = (Image Height / Image Width) * 100%
原理：padding-top值为百分比时，取值是是相对于宽度的。
5、移动端适配解决方案-rem
Vuex怎么用?
https://www.cnblogs.com/liningstyle/p/8335129.html
闭包？应用场景
https://blog.csdn.net/qq_21132509/article/details/80694517
setTimeout callback 封装变量 为节点循环绑定click事件
原型 原型链
https://www.cnblogs.com/shuiyi/p/5305435.html
Webpack打包流程
https://www.jianshu.com/p/b47616a75f82
面向对象
https://www.cnblogs.com/chiangchou/p/js-oop1.html
跨域
https://www.cnblogs.com/heson/p/10015794.html
未知宽高元素水平垂直居中方法
https://www.cnblogs.com/heson/p/10019794.html
window.onload和$.ready区别
$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。
所以，$(document).ready的执行时间要早于window.onload。并且可以写多个
AJAX get() 和 post() 方法
https://www.cnblogs.com/heson/p/10014471.html
session,cookie,sessionStorage,localStorage的区别及应用场景
https://www.cnblogs.com/heson/p/10029857.html
深拷贝和浅拷贝
https://www.cnblogs.com/echolun/p/7889848.html
H5的新标签有哪些 链接里有兼容情况
https://blog.csdn.net/a772116804/article/details/80625385
ES的新特性
去博客看 https://www.cnblogs.com/heson/default.html?page=2
数组去重的方法
1.最基本的去重方法
思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
function unique(arr){
var res = [arr[0]];
for(var i=1;i<arr.length;i++){
var repeat = false;
for(var j=0;j<res.length;j++){
if(arr[i] == res[j]){
repeat = true;
break;
}
}
if(!repeat){
res.push(arr[i]);
}
}
return res;
}
2.先排序在去重
思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组
function unique(arr){
var arr2 = arr.sort();
var res = [arr2[0]];
for(var i=1;i<arr2.length;i++){
if(arr2[i] !== res[res.length-1]){
res.push(arr2[i]);
}
}
return res;
}
3.利用对象的属性去重（推荐）
思路：每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复
function unique(arr){
var res =[];
var json = {};
for(var i=0;i<arr.length;i++){
if(!json[arr[i]]){
res.push(arr[i]);
json[arr[i]] = 1;
}
}
return res;
}
4.利用下标查询
function unique(arr){
var newArr = [arr[0]];
for(var i=1;i<arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}
排序算法
https://www.cnblogs.com/onepixel/articles/7674659.html
REST ful
REST ful
Representational State Transfer，翻译是”表现层状态转化”。
面向资源是REST最明显的特征，对于同一个资源的一组不同的操作。资源是服务器上一个可命名的抽象概念，资源是以名词为核心来组织的，首先关注的是名词。REST要求，必须通过统一的接口来对资源执行各种操作。对于每个资源只能执行一组有限的操作。（7个HTTP方法：GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS）
