• 前端面试题汇总 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)
    
  • 相关阅读:
    Sunday算法
    砝码称重 洛谷 1441
    树秀于林风必摧之——线段树
    常用stl(c++)
    Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
    Win下JDK的安装和简单使用教程
    ubuntu服务器远程连接xshell,putty,xftp的简单使用教程
    ubuntu下安装pdo和pdo_mysql扩展
    服务器和域名的简单个人认知
    对大一一年的总结和对大二的规划
  • 原文地址:https://www.cnblogs.com/heson/p/10068235.html
Copyright © 2020-2023  润新知