前端面試筆記

常見項目難點:

1.定時器的清除 
        ``部分動畫效果須要js自動生成，時間的控制使用了timeout和innertal，其中timerout包含了innertal，點擊事件和定時器不在同一個js文件中，快速來回點擊的時候，定時器清除不起做用。 
   ``解決方案：將該li對應頁的全部定時器綁定在該li身上，每次點擊的時候清除timeout和innertal。
2.帶陰影折線運動處理 
        ``對於傾斜的p經過js改變其高度，而且按照數學邏輯改變top和left值的狀況下，p在運動時候會出現偏移，和抖動。 
   ``解決方案：給p一個運動基準點，這樣p在運動的時候就無需改變top和left值，只須要改變寬度或高度便可。
3.拋物線的運動 
         ``css中兩個點運動都是直線運動。 
   ``解決方案：給初始點一個旋轉角度，這樣看起來就有拋物線的感受。
4.遮罩層處理 
     ``在多層級的html渲染中，中間圖層的遮罩效果沒法實現。 
   ``解決方案：遮罩層能夠在最底層使用，可是中間層級的遮罩效果須要對圖片進行處理，改爲png圖片，再進行css操做。
5.卡頓的處理 
      ``在Firefox和ie中，小圖標的緩慢移動效果會出現卡頓。 
   ``解決方案：給運動時間的時候，判斷若是不是chrome瀏覽器，減少運動時間。
6.性能的優化 
      ``圖片的使用讓動畫加載的速度變慢，影響用戶體驗。 
   ``解決方案：對部分能使用p代替的圖片採用p生成，對代碼，圖片進行深度壓縮上傳等。

未複習目錄：

• vue 路由科學配置，vuex
• 延遲加載,
• 正則

複習知識點：

閉包：

JavaScript的閉包

閉包簡單的說就是一個函數能訪問外部函數的變量，這就是閉包

（閉包的三大特色爲：

一、函數嵌套函數

二、內部函數能夠訪問外部函數的變量

三、參數和變量不會被回收。

手寫個簡單的閉包：

function bibao(){
            var a = '閉包一';
            return function(){
                console.log(a)
                
            }
        }
        bibao()

ajax:

實現原理：網頁DOM對象能夠精確地對網頁中的部份內容進行操做、XML做爲單純的數據存儲載體使得客戶端與服務器交換的只是網頁內容的數據而沒有網頁樣式等等的附屬信息、XMLHttpRequest是與瀏覽器自己內置的request相互獨立的與服務器交互的請求對象。

面試題（附加知識點）：

• xml和html的區別：

  XML 被設計用來傳輸和存儲數據。

  HTML 被設計用來顯示數據。

• js倒計時。

• 活動頁面的特效。

• js es6, js es5

• 兼容性：加一些瀏覽器內核頭。

• vue 組件傳值。（props父傳子，$.emit子傳父）

• 微信小程序接口。

面試複習：

9-17：

js dom節點操做：

//速記：
queryselectorAll('.div1')
getElementById("div1")  //找
createElement("p")  //建
b.appendChild(a)    //加 把a添加到b中
b.removeChild(a)  //刪 從b中刪除a
replaceChild(newnode,oldnode) //換
.cloneNode(true)  //克隆 true包括後代
.innerHTML=  //改內容
.style.屬性=  //改樣式
.onclick=function() //事件

var para=document.createElement("p"); //建立節點
var node=document.createTextNode("這是新段落。"); //建立文本節點
para.appendChild(node);    //添加節點
var element=document.getElementById("div1");  //獲取節點
element.appendChild(para);  


var parent=document.getElementById("div1"); //獲取父節點
var child=document.getElementById("p1"); //獲取子節點
parent.removeChild(child); //刪除
// 快捷刪除(child.parentNode找到父節點)
var child=document.getElementById("p1");
child.parentNode.removeChild(child); //找到父節點並刪除其子child節點

document.getElementById(id).innerHTML=new HTML //改變內容
document.getElementById(id).style.property=new style//改樣式
document.getElementById("myBtn").onclick=function(){displayDate()}; //添加事件

//替換節點：
var newnode = document.createElement("li"); //建立新節點
var oldnode = document.getElementById("oldnode"); //獲取老節點
parentNode // 父節點
newnode.innerHTML = oldnode.innerHTML;  //複製內容
oldnode.parentNode.replaceChild(newnode,oldnode); //替換

//克隆節點
    var main=document.getElementById("main"); 
    var box=document.getElementById("box"); 
    var newNode=box.cloneNode(true); //true時包含子節點，false時不克隆子節點。
    main.appendChild(newNode);

css 清除浮動的方法：

• 最完美方法,加帶clear的僞元素：

  .news {
    background-color: gray;
    border: solid 1px black;
    }
  
  .news img {
    float: left;
    }
  
  .news p {
    float: right;
    }
  
  .clearfix:after{
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
    }
  
  .clearfix {
    /* 觸發 hasLayout */ 
    zoom: 1; 
    }

<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

經過CSS僞元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，而且賦予clear屬性來清除浮動。須要注意的是爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。

• 使用帶clear屬性的空元素：

  在浮動元素後使用一個空元素如

  ，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。亦可以使用
  或

  ---

  來進行清理。

• 使用CSS的overflow屬性

  給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠清除浮動，另外在 IE6 中還須要觸發 hasLayout ，例如爲父元素設置容器寬高或設置 zoom:1。

元素居中方法：

• 非塊級元素水平居中（例如圖片、文字） 父元素：text-align: center;

• 塊級元素水平居中， margin:0 auto;

• 單行文本的垂直居中，讓 line-height 和 height 相等。

• 肯定高度的塊級元素垂直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值爲自身高度的值的一半的負值);

• 絕對定位實現水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

• 不肯定元素大小，浮動加平移實現水平垂直居中法，添加： position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); 添加廠商前綴 -webkit- 兼容 Safari 和 Chrome

• 肯定大小的塊級元素水平垂直居中，假設元素大小爲100*100，則：

  position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px

• css3伸縮佈局實現元素水平垂直居中，父元素設置display:flex; align-items: center; justify-content: center;

• 讓瀏覽器計算子元素的寬高並讓其水平垂直居中：經過使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四個方向上的值缺一不可。

  <div class="parent-box">
      <div class="child-box">讓瀏覽器計算子元素的寬高並讓其水平垂直居中</div>
  </div> 
  
  .parent-box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #f00;
  }
  .child-box {
      position: absolute;
      top: 20%;
      right: 20%;
      bottom: 20%;
      left: 20%;
      background-color: #f54;
  }

• get,post 請求的區別，請求到的數據分別放在哪http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

• canvas

9-18：

• Ajax解析json：(從後臺獲取的是json字符串，因此用第一種方法解析)

  var obj =JSON.parse( str)或 var obj = str.parseJSON() json字符串轉成json對象

  var str=JSON.stringify(obj) 或 var str=obj.toJSONString()json對象轉成json字符串

9月19：

一、js數據的存儲方式和區別：

http://www.javashuo.com/article/p-kglskvmn-bs.html

sessionStorage

localStorage

cookie

二、js中new()到底作了些什麼？

http://www.javashuo.com/article/p-tvahjrik-ba.html

要建立 Person 的新實例，必須使用 new 操做符。以這種方式調用構造函數實際上會經歷如下 4 個步驟：

(1) 建立一個新對象；

(2) 將舊對象構造函數的做用域賦給新對象（所以 this 就指向了這個新對象） ；

(3) 執行構造函數中的代碼（爲這個新對象添加屬性） ；

(4) 返回新對象。

三、js合併對象:

var hua = {a:'aa',b:'bb'}
var hua2 = {c:'cc',d:'dd',b:'bbb'}
var hua3 = {dd:'66'}
// var hua4 = Object.assign(hua,hua2,hua3)
console.log(hua4,hua,hua2,hua3)   //注意觀察,會污染第一個被合併的對象
// 解決方法:讓第一個被合併的對象是空對象
var hua4 = Object.assign({},hua,hua2,hua3)
console.log(hua4,hua,hua2,hua3)

大塊知識點：

繼承：

// 父類:
function funpar(){
    this.a = 'aa'
    this.fun1 =function(){
        console.log('fun1')
    }
}
//父類原型鏈:
funpar.prototype.hello ='hello'
funpar.prototype.sayhello=function(){
    console.log(this.hello)
}
par = new funpar()   //父類的某個對象
console.log('par:',par)

//繼承要在建立子對象時進行
// 方法一:對象冒充
var funchi = function(){
    this.c = 'cc'
    this.cfun = function(){
        console.log('cfun')
    }
      this.mm=funpar;  //繼承是 建立函數 的繼承
    this.mm();
    delete this.mm;
}
chi = new funchi()
console.log('chi:',chi)


// 方法二:call(),apply()
var funchi2 = function(){
    this.c2 = 'c2'
    this.c2fun = function(){
        console.log(this.c2)
    }
    funpar.call(this,'aa')
    // funpar.apply(this,['aa'])
}
var chi2 = new funchi2()
console.log('chi2',chi2)

//方法三:原型鏈繼承:
var funchi3 = function(){
    funchi3.prototype = new funpar()
    // funchi3.prototype = funpar.prototype  ？有何區別？
}
var chi3 = new funchi3()
console.log('chi3',chi3)

// 方法四:混合繼承
            //繼承實例
var funchi4 =function(){
    funpar.call(this)
} 
        //繼承原型鏈
funchi4.prototype = new funpar()
var chi4 = new funchi4()
console.log('chi4',chi4)

// 方法五:寄生組合繼承（要會手寫）
    //同樣先繼承實例
function funchi5(){
    funpar.call(this)
    this.cc5 = 'cc5'
}
    //寄生的方法繼承原型鏈 
(function(){
    var ls = function(){} //建立一個空類
    ls.prototype = funpar.prototype; //將父原型寄生給空類
    funchi5.prototype = new ls() //經過繼承空類達到繼承父類的目的
})()
var chi5 = new funchi5()
console.log('chi5:',chi5)

推薦使用寄生組合繼承，由於它解決了前面幾種繼承方式的：只能繼承實例，只能繼承原型，不能多繼承，要建立出兩份實例 等缺點。

數組：

---

http://www.runoob.com/jsref/jsref-obj-array.html

數組屬性

屬性	描述
constructor	返回建立數組對象的原型函數。
length	設置或返回數組元素的個數。
prototype	容許你向數組對象添加屬性或方法。

---

Array 對象屬性

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。var arr3 =arr.concat(arr2)
copyWithin()	從數組的指定位置拷貝元素到數組的另外一個指定位置中。
entries()	返回數組的可迭代對象。
every()	檢測數值元素的每一個元素是否都符合條件。
fill()	使用一個固定值來填充數組。
filter()	檢測數值元素，並返回符合條件全部元素的數組。
find()	返回符合傳入測試（函數）條件的數組元素。
findIndex()	返回符合傳入測試（函數）條件的數組元素索引。
forEach()	數組每一個元素都執行一次回調函數。
from()	經過給定的對象中建立一個數組。
includes()	判斷一個數組是否包含一個指定的值。
indexOf()	搜索數組中的元素，並返回它第一次出現的位置。
isArray()	判斷對象是否爲數組。
join()	把數組的全部元素放入一個字符串。
keys()	返回數組的可迭代對象，包含原始數組的鍵(key)。
lastIndexOf()	返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。
map()	經過指定函數處理數組的每一個元素，並返回處理後的數組。
pop()	刪除數組的最後一個元素並返回刪除的元素。
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reduce()	將數組元素計算爲一個值（從左到右）。
reduceRight()	將數組元素計算爲一個值（從右到左）。
reverse()	反轉數組的元素順序。
shift()	刪除並返回數組的第一個元素。
slice()	選取數組的的一部分，並返回一個新數組。
some()	檢測數組元素中是否有元素符合指定條件。
sort()	對數組的元素進行排序。
splice()	從數組中添加或刪除元素。
toString()	把數組轉換爲字符串，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值。

一、arrayobj.sort([fun(a,b)])

此方法將 Array 對象進行適當的排序；在執行過程當中並不會建立新的 Array 對象。

fun(可選參數)：fun是用來肯定元素順序的函數的名稱 , 若是這個參數被省略，那麼元素將按照 ASCII 字符順序進行升序排列。fun(a,b) 兩個參數,分別表明每次排序比較時的兩個數組項。sort()排序時每次比較兩個數組項都回執行這個參數，並把兩個比較的數組項做爲參數傳遞給這個函數。當函數返回值爲大於1的時候就交換兩個數組項的順序，不然就不交換。

• 擴展：

  // JS隨機打亂數組
  function randomsort(a, b) {
      return Math.random()>.5 ? -1 : 1;
      //用Math.random()函數生成0~1之間的隨機數與0.5比較，返回-1或1
  }
  var arr = [1, 2, -3, -4, 5,8,7,5];
  arr.sort(randomsort);
  console.log(arr)  //[1, 2, -4, -3, 7, 8, 5, 5]隨機

  // sort實現降序排序
  //方法一:
  var arr = [1, 2, -3, -4, 5,8,7,5];
  function jian(a,b){
    return a>b ? -1 : 1;
      // 或 return a-b 升序 
        //return b-a 降序
  }
  arr.sort(jian)
  console.log(arr)  //[8, 7, 5, 5, 2, 1, -3, -4]
  
  //方法二：（有待確認）
  var arr = [1, 2, -3, -4, 5,8,7,5];
  arr.sort()    //先排序
  console.log(arr) //[-3, -4, 1, 2, 5, 5, 7, 8]
  function dao(a,b){
    return 1
  }
  arr.sort(dao) //再反轉，至關於reverse()
  console.log(arr)  //[8, 7, 5, 5, 2, 1, -4, -3]
  arr.reverse()
  console.log(arr)  //[-3, -4, 1, 2, 5, 5, 7, 8]

二、數組和對象的遍歷：forEach ,map , for in , for of

http://www.javashuo.com/article/p-xdifvkqc-gn.html

三、reduce 方法：https://blog.csdn.net/yihanzhi/article/details/78595325

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

四、過濾filter()

filter()方法使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組。
    filter()基本語法：
       arr.filter(callback[, thisArg])

/*
filter()實例：篩選排除掉全部的小值
下例使用 filter 建立了一個新數組，該數組的元素由原數組中值大於 10 的元素組成。
*/
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

console.log(filtered);//[ 12, 130, 44 ]

五、計算數組中某個元素的個數（以5爲例）

// 方法一：遍歷
var arr = [1, 2, -3, -4, 5,8,7,5,5,5];
var count = 0
arr.forEach(function(value,index){
　　if(value==5){
    count=count+1
}
})
console.log(count)  //4
//  方法二：過濾
function count2(element){
    return element==5
}
var arr2 = arr.filter(count2)
console.log(arr2.length); //4

六、數組去重

//方法一
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function removeDuplicatedItem(arr) {
   for(var i = 0; i < arr.length-1; i++){
       for(var j = i+1; j < arr.length; j++){
           if(arr[i]==arr[j]){
 8              arr.splice(j,1);//console.log(arr[j]);
              j--;
           }
       }
   }
   return arr;
}

arr2 = removeDuplicatedItem(arr);
console.log(arr);
console.log(arr2);

//方法二
//藉助indexOf()方法判斷此元素在該數組中首次出現的位置下標與循環的下標是否相等
var ar = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function rep2(arr) {
    for (var i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) != i) {
            arr.splice(i,1);//刪除數組元素後數組長度減1後面的元素前移
            i--;//數組下標回退
        }
    }
    return arr;
}
var a1 = rep2(ar);
console.log(ar);
console.log(a1);

//方法三  利用數組中的filter方法
 var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry'];
var r = arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
 });
 console.log(r);

// 利用es6的set去重:
var arr=[2,2,2,3,3,4,55,5,55]
const set = new Set(arr)
console.log(set)
arr = Array.from(set)  //Array.from() 方法從一個相似數組或可迭代對象中建立一個新的數組實例。
console.log(arr)

兼容性問題：

一、不一樣瀏覽器的標籤默認的外補丁( margin )和內補丁(padding)不一樣

解決方案： css 裏增長通配符 * { margin: 0; padding: 0; }

二、IE6雙邊距問題；在 IE6中設置了float , 同時又設置margin , 就會出現邊距問題

解決方案：設置display:inline;

三、當標籤的高度設置小於10px，在IE六、IE7中會超出本身設置的高度

解決方案：超出高度的標籤設置overflow:hidden,或者設置line-height的值小於你的設置高度

四、圖片默認有間距

解決方案：使用float 爲img 佈局

五、IE9如下瀏覽器不能使用opacity

解決方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

六、邊距重疊問題；當相鄰兩個元素都設置了margin 邊距時，margin 將取最大值，捨棄最小值；

解決方案：爲了避免讓邊重疊，能夠給子元素增長一個父級元素，並設置父級元素爲overflow:hidden；

七、cursor:hand 顯示手型在safari 上不支持

解決方案：統一使用 cursor:pointer

八、兩個塊級元素，父元素設置了overflow:auto；子元素設置了position:relative ;且高度大於父元素，在IE六、IE7會被隱藏而不是溢出；

解決方案：父級元素設置position:relative

vue:

vue的特性：

Vue.js的特色：MVVM框架、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好

vue的mixin:（混合組件）

普通組件在引用以後至關於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操做，單本質上二者仍是涇渭分明，相對獨立。

而mixins則是在引入組件以後，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合併。至關於在引入後，父組件的各類屬性方法都被擴充了。

單純組件引用：

      父組件 + 子組件 >>> 父組件 + 子組件

 mixins：

      父組件 + 子組件 >>> new父組件

• vue提升性能
• vue異步加載路由
• vue虛擬dom的優劣
• Vue和其餘框架對比
• 原生和jQuery對象的轉換
• 靜態demo實現響應式

vue-loader：

Vue-Resource

主要用於發送ajax請求，官網已經不在維護（推薦axios）

html基礎：

行內元素，塊級元素與空元素

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote

空元素:br 換行、meta 頭部元信息、hr 水平線、link 連接外部樣式、input、img

css:

CSS選擇器：

基本能夠分爲通配選擇器，標籤選擇器，類選擇器，ID選擇器，屬性選擇器。從結構上來分還有後代選擇器，子元素選擇器，相鄰兄弟選擇器以及僞類。

CSS3新增僞類彙總：https://blog.csdn.net/qq_28506819/article/details/72846680

css畫三角形：

.sanjiao{
            width:0;
            height:0;
            border-width:0px 0px 30px 30px;
            border-style:solid;
            border-color: transparent transparent transparent #333;
            }

ajax/axios:

手寫 $ajax:

$.ajax({url:"demo_test.txt",success(result){
            $("#div1").html(result+status);
        },error(xhr,status,error){
            $("#div1").html(error);
        }});

性能/兼容性：

提升頁面加載速度（性能）：

https://blog.csdn.net/wsymcxy/article/details/82377355

• 減小請求，使ajax可緩存（能用get就不要用post)
• 壓縮資源（包括圖片，js,css，組件等文件）
• 減小整頁刷新和重定向
• 使用外部的JavaScript和CSS（外聯文件，瀏覽器可能緩存它們）
• 合理使用CDN分發。