前端面试题汇总 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)
posted @ 2018-12-04 23:02  Heson  阅读(168)  评论(0编辑  收藏  举报
Live2D