以面試爲提綱的前端知識

目錄

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);