zoukankan      html  css  js  c++  java
  • Web前端2019面试总结

    基础知识点
     
    1.水平垂直居中
    1. 子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50%;margin-left:-50%;
    2. 子绝父相,子盒子设置绝对定位,设置 left & top & right & bottom为0;margin: auto;
    3. 伸缩盒子,父元素设置flex;justify-content: center;align-items: center;
    4. 利用transform属性,需要设置子绝父相,设置top:50%;left:50%;transform:translate(-50%, -50%);
    2.圣杯布局
    1. 中间盒子设置宽度100%,左右margin,留出左右盒子的位置
    2. 左右盒子在通过定位至左右
    3.兼容性问题
    1. 标签样式在不同的浏览器各自的margin 和padding差异较大, 解决方案:css里 *{margin:0;padding:0;}
    2. 当在a标签中嵌套img标签时,在某些浏览器中img会有蓝色边框;解决方案:给img添加border:0;或者是border:none;
    3. 图片默认有间;隙解决方案:1)给img标签添加左浮动float:left;2)给img标签添加display:block。
     
    4.清除浮动的方法?(重点)
          1.父级div定义height
          2.结尾处家空div标签clear:both
          3.父级div定义 伪类:after和zoom
         4.父级div定义 overflow:hidden
     
    5.前端优化技巧
    1. 压缩css,js,图片
      2.减少http请求次数,合并css,js 合并图片(雪碧图)
      3.使用CDN
      4.减少dom元素数量
      5.图片懒加载
      6.静态资源另外用无cookie得域名
      7.减少dom的访问(缓存dom)
      8.巧用事件委托
      9.样式表置顶,脚本置低
    6.this指向问题
      一般来说,谁调用,this就指向谁,特殊情况除外
      普通函数调用,此时 this 指向 window
      定时器函数, 此时 this 指向 window

      更改this指向的三个方法

      1.call( )方法调用一个函数,其具有一个指定的this值

        fn.call(改变其this指向, [指定的参数] ) 如果指定了null或者undefired,则内部this指向window

        应用场景:①借用构造函数

            ②借用其他对象的方法

      2.apply( )方法调用一个函数,其具有一个指定的this值,作为一个数组提供的参数

        fn.apply(var1, var2) 应用:把数组展开

        应用场景:把数组展开,传递给调用的方法

      3.bind 不会调用函数,会返回一个新的函数

        应用场景:①改变定时器内部的this,②改变事件处理函数的this

     
    7、json字符串转化方法
    JSON.parse(str); //由JSON字符串转换为JSON对象
    JSON.stringify(obj); //将JSON对象转化为JSON字符
     
    进阶知识点
     
    1、设置千分符
     1 function farmat(mun) {
     2         if (mun === null) return;
     3         var m = parseInt(mun).toString();
     4         var len = m.length;
     5         if (len <= 3) return m;
     6         var n = len % 3;
     7         if (n > 0) {
     8             return m.slice(0,n)+","+m.slice(n,len).match(/d{3}/g).join(",")
     9         } else {
    10             return m.slice(n,len).match(/d{3}/g).join(",")
    11         }
    12     }
    13     var a =farmat(1000000)
    14     console.log(a);
     
    2、只能输入数字和小数点
    1 function clearNoNum(obj){ 
    2     obj.value = obj.value.replace(/[^d.]/g,"");  //清除“数字”和“.”以外的字符  
    3     obj.value = obj.value.replace(/.{2,}/g,"."); //只保留第一个. 清除多余的  
    4     obj.value = obj.value.replace(".","$#$").replace(/./g,"").replace("$#$","."); 
    5     obj.value = obj.value.replace(/^(-)*(d+).(dd).*$/,'$1$2.$3');//只能输入两个小数  
    6     if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额 
    7         obj.value= parseFloat(obj.value); 
    8     } 
    9 }
     
    3、统计每一个字符串出现的次数
     1 //字符串
     2 var strs = "asdasdadd";
     3         function getmaxstr(str){
     4             if(str.length == 1){return str;}
     5             var newarr = [];
     6             for(var i = 0 ; ss= str.length, i<ss; i++ ){
     7                 if(!newarr[str.charAt(i)]){
     8                     newarr[str.charAt(i)] = 1;
     9                 }else{
    10                     newarr[str.charAt(i)] +=1;
    11                 }
    12             }
    13             console.log(newarr);
    14             var maxkey='';
    15             var maxvalue=1;//设定一个值
    16             for(var k in newarr){
    17                 if(newarr[k]> maxvalue){//根据这个值做判读 将数组中的每个元素 与这个值做比较! 如果大于他,那么将住宿
    18                     maxvalue = newarr[k];//出现的次数
    19                     maxkey = k;//次数最多的 字母
    20                 }
    21             }
    22             console.log(maxkey);
    23             return maxkey;
    24         }
    25         getmaxstr(strs);
     1 //数组
     2 var arr =["a","b","c","c","c","d"];
     3     Array.prototype.diaohuan=function(arr){
     4         var newarr=[];
     5         for(var i = 0; i<this.length; i++){
     6             if(!newarr[this[i]] ){
     7                 newarr[this[i]] = 1;
     8             }else{
     9                 newarr[this[i]] +=1;
    10             }
    11         }
    12         console.log(newarr);
    13         var maxkey = 1;
    14         var maxvalue ="";
    15         for (var k in newarr){
    16             if(newarr[k] > 1){
    17                 maxvalue =newarr[k];
    18                 maxkey = k;
    19             }    
    20         }
    21         return maxkey;
    22         console.log(maxvalue);
    23     }
    24       alert(arr.diaohuan());

    高难度知识点

     1.怎样引入一个第三方的包?require与import的区别:

      遵循规范:
      require 是 AMD规范引入方式,
      import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法.

      调用时间:
      require是运行时调用,所以require理论上可以运用在代码的任何地方,
      import是编译时调用,所以必须放在文件开头.

      本质:
      require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量,
      import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require.
     2.在那调用第三方支付接口?为什么?前端调接口和后端调接口各有什么区别,优势与特点:
     
      一般支付接口都是由后端和支付单位联系调取的,前端调接口容易被劫持,不安全.
  • 相关阅读:
    linux 命令——48 watch (转)
    linux 命令——47 iostat (转)
    linux 命令——46 vmstat(转)
    linux 命令——45 free(转)
    linux 命令——44 top (转)
    linux 命令——43 killall(转)
    linux 命令——42 kill (转)
    linux 命令——41 ps(转)
    linux 命令——40 wc (转)
    Java for LeetCode 068 Text Justification
  • 原文地址:https://www.cnblogs.com/jun-qi/p/10543210.html
Copyright © 2011-2022 走看看