• 以面试为提纲的前端知识


    目录

    1.闭包是什么?有什么用途?使用的时候应该注意什么?

    2.n的阶乘怎么实现?

    3.get 和post 有什么区别?

    4.如何实现自动刷新和自动跳转?

    5.append和append to的区别?

    6.css中隐藏不删除的方法?

    7.ajax跨域如何解决?

    8.继承的五种方式是什么?

    9.请简述浏览器渲染过程。

    10.清除浮动的方式。

    11.自适应和响应式的区别是什么?


    1.闭包是什么?有什么用途?使用的时候应该注意什么?(此问题总结自阮一峰老师的学习JavaScript闭包

      答:闭包就是能够读取其他函数内部变量的函数。

             在需要将一个变量存储起来的时候就需要用到闭包。

             使用时应注意两点:第一,耗内存;第二,不可轻易改变父函数内部变量的值。

             举例:

     1 function f1(){
     2     var a = 666;
     3     aAdd = function (){a+=1}
     4     function f2(){
     5         console.log(a);
     6     }
     7     return f2;
     8 }
     9 var result = f1();
    10 result(); //666
    11 aAdd();aAdd();aAdd();
    12 result(); //667

    2.n的阶乘怎么实现?

    1 //n!
    2 function fun(n){
    3     if(n < 2){
    4         return 1;
    5     }else{
    6         return n * fun(n - 1);
    7     }
    8 }
    9 console.log(fun(3)); //6

    3.get 和post 有什么区别?

      答:来自w3c的直接对比

         

    4.如何实现自动刷新和自动跳转?

       答:

    <meta http-equiv="refresh" content="2"> <!--2s后自动刷新-->
    <meta http-equiv="refresh" content="2; url=http://www.cnblogs.com/qingruozhu/"> <!--2s后自动跳转到我的博客主页-->

    5.append和append to的区别?

      答:参考百度经验

             append(content)方法

             方法作用:向每个匹配的元素内部追加内容。

             参数介绍:content (<Content>): 要追加到目标中的内容。

             用法示例:HTML代码为  <p> I come from </p><p>I love </p> 

             向所有p标签中追加一个单词china,则写法为  $("p").append("china"); 

             结果为:   <p> I come from china</p><p>I love china</p> 

              appendTo(expr)方法

             方法作用:把所有匹配的元素追加到指定的元素集合中。

             参数介绍:expr (String): 用于匹配元素的jQuery表达式。

             用法示例:HTML代码为 <b>I love china </b><p></p> 

             把标签b追加到p元素中,写法为 $("b").appendTo("p"); 

             结果为: <p><b>I love china </b></p> 

             使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

    6.css中隐藏不删除的方法?

      答:visibility: hidden;

    7.ajax跨域如何解决?

      答:参考悟寰轩-叶秋的博客

             一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

             比较一下json与jsonp格式的区别:

    json格式:
    {
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    }
    jsonp格式:
    callback({
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    })

             了解了jsonp之后,使用jsonp插件也就比较简单了,server端代码无需任何改动。

             来看一下如何使用jquery-jsonp插件解决跨域问题吧。

     1 var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"+"?id=1&callback=?";
     2 $.jsonp({
     3   "url": url,
     4   "success": function(data) {
     5     $("#current-group").text("当前工作组:"+data.result.name);
     6   },
     7   "error": function(d,msg) {
     8     alert("Could not find user "+msg);
     9   }
    10 });

    8.继承的五种方式是什么?

    答:参考阮一峰老师的Javascript面向对象编程(二):构造函数的继承

    9.请简述浏览器渲染过程。

    答:1.解析HTML文件,创建DOM树。2.解析CSS。3.将CSS与DOM合并,构建渲染树(renderingtree)。4.布局和绘制,重绘(repaint)和重排(reflow)。(参见浅析浏览器渲染页面过程

    10.清除浮动的方式。

    答:1.父级元素添加overflow:hidden属性。 2.浮动元素下方添加标签并添加clear:both属性。3.伪元素:after。4.双伪元素。(详见关于清除浮动的四种方法

    11.自适应和响应式的区别是什么?

    答:自适应的体验http://m.ctrip.com/html5/  

    响应式的体验 http://segmentfault.com/

    (详见响应式和自适应的区别

    12.给个字符串 str = abcbaa,得出{a:3,b:2,c:1}。如何实现?

    答:

     1 let stri = "abcbaa";
     2 let obj = {};
     3 let arri = stri.split("");
     4 for(let i = 0; i < arri.length;i++){
     5     if(!obj[arri[i]]){
     6         obj[arri[i]] = 1;
     7     }else {
     8         obj[arri[i]]++;
     9     }
    10 }
    11 console.log(obj);
  • 相关阅读:
    leetcode562- Longest Line of Consecutive One in Matrix- medium
    leetcode118- Pascal's Triangle I & II- easy
    leetcode524- Longest Word in Dictionary through Deleting- medium
    leetcode128- Longest Consecutive Sequence- hard
    leetcode22- Generate Parentheses- medium
    leetcode17- Letter Combinations of a Phone Number- medium
    leetcode678- Valid Parenthesis String- medium
    php截取字符串的实例代码(支持utf-8)
    php中封装的curl函数(抓取数据)
    linux计划任务运行php文件的方法分享
  • 原文地址:https://www.cnblogs.com/qingruozhu/p/7341766.html
Copyright © 2020-2023  润新知