JS中的塊級(jí)作用域

1.with 2.try.. catch 3.let, const

變量提升和函數(shù)提升

• 包括變量和函數(shù)在內(nèi)的所有聲明都會(huì)在任何代碼被執(zhí)行前首先
  被處理
• 函數(shù)聲明比變量聲明優(yōu)先提升\
• 只有聲明會(huì)被提升蹄胰，變量的賦值或者其他運(yùn)行邏輯會(huì)留在本地

什么叫閉包愉镰？

閉包是能夠訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)邓尤，創(chuàng)建閉包：將函數(shù)作為函數(shù)的返回值纠炮；將函數(shù)作為參數(shù)傳遞。

使用場(chǎng)景：實(shí)現(xiàn)對(duì)象的數(shù)據(jù)私有化；代替一些全局變量；

什么叫原型哎壳、原型鏈？

每個(gè)函數(shù)都有一個(gè)prototype屬性尚卫，這個(gè)屬性就是原型归榕。原型鏈就是對(duì)象之間的繼承鏈，一個(gè)對(duì)象通過(guò)的prototype指向一個(gè)父對(duì)象吱涉，父對(duì)象的prototype又指向另一個(gè)對(duì)象刹泄，最終指向Object對(duì)象。這一個(gè)關(guān)系鏈就是原型鏈

如何優(yōu)化網(wǎng)站性能怎爵？

1. Http請(qǐng)求

• 合并js,css文件特石，雪碧圖減少http請(qǐng)求的數(shù)量，壓縮文件鳖链，減少請(qǐng)求的大心氛骸；

• 資源文件按需加載芙委；

• 合理使用緩存乞旦，sessionStorage,cookie，文件加上MD5戳题山；

• 數(shù)據(jù)懶加載，比如PC端可以分頁(yè)故痊，移動(dòng)端可以上拉加載

2.HTML方面

• 合理化使用元素顶瞳，減少不必要的元素

• 避免使用iframe，ifram很消耗資源

3.JS方面

• js文件放在頁(yè)面底部愕秫，因?yàn)殇秩揪W(wǎng)頁(yè)的順序是由上至下慨菱，如果放在頂部會(huì)等待js加載，有可能會(huì)出現(xiàn)空白

• 避免在html中直接寫(xiě)js戴甩，而是獨(dú)立一個(gè)js文件

• 減少DOM訪問(wèn)和修改符喝。合并多次操作，修改元素的樣式會(huì)導(dǎo)致重繪,添加刪除DOM甜孤，修改DOM位置導(dǎo)致重排 （重新排列位置）协饲；

• 刪除不需要的腳本，合理的設(shè)計(jì)結(jié)構(gòu)缴川，實(shí)現(xiàn)模塊化增強(qiáng)復(fù)用性茉稠；

4.CSS方面

• 樣式表放在開(kāi)頭，迅速渲染頁(yè)面樣式把夸；

• 減少行內(nèi)樣式嗎而线，單獨(dú)css文件可以緩存

• 合理編寫(xiě)css，減少css層級(jí)

• 添加一些必要的loading提示

5.server方面

• 使用CDN

• 合理的數(shù)據(jù)查詢語(yǔ)句，適當(dāng)?shù)木彺?/p>

HTTP狀態(tài)碼

1XX 信息狀態(tài)碼

• 100 Continue: 繼續(xù)發(fā)送請(qǐng)求

2XX 成功狀態(tài)碼

• 200 OK: 請(qǐng)求成功

• 201 Created: 創(chuàng)建新資源請(qǐng)求已實(shí)現(xiàn)

• 202 Acceped 服務(wù)器已接收請(qǐng)求膀篮，但是還未處理

• 204 No Content 沒(méi)有響應(yīng)內(nèi)容嘹狞，跨域option就是204

3XX 重定向狀態(tài)碼

• 300 Muiltiple Choices 請(qǐng)求有多個(gè)資源

• 301 Moved Permanently 請(qǐng)求的URL已移除

• 304 Not Mofdified 資源未被修改

4XX 客戶端錯(cuò)誤狀態(tài)碼

• 400 Bad Request 發(fā)送了一個(gè)錯(cuò)誤請(qǐng)求（參數(shù)確實(shí)或錯(cuò)誤）

• 401 Unauthorized 未授權(quán)

• 403 Forbidden 請(qǐng)求被拒絕

• 404 Not Found 找不到資源

5XX 服務(wù)端錯(cuò)誤狀態(tài)碼

• 500 internal Server Error 服務(wù)器發(fā)生錯(cuò)誤

• 502 Bad Gateway 代理出錯(cuò)

Vue相關(guān)

  a. vue和Angularjs的區(qū)別

1. AngularJS采用雙向數(shù)據(jù)綁定，vue默認(rèn)使用單向數(shù)據(jù)綁定

2. vue中也有雙向數(shù)據(jù)綁定誓竿，angularjs是基于臟檢查磅网，而vue是基于getter和setter

3. AngularJS屬于MVVM框架，而vue相當(dāng)于view層

4. vue更容易上手烤黍，API完整有完整的生命周期知市；

  b. vue和Jquery的區(qū)別

1. vue采用數(shù)據(jù)驅(qū)動(dòng)，盡量避免DOM操作速蕊，Jquery使用核心是DOM操作 嫂丙；

2. Jquery本質(zhì)上是封裝了DOM操作的函數(shù)庫(kù)，vue屬于一個(gè)框架规哲；

  c. vue的原理 

• 采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式跟啤，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter唉锌，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者隅肥，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)

Object.defineProperty(person, 'name', {

  set: function(newVal) {

    temp['name'] = newVal;

    console.log('為person設(shè)置新的姓名：' + newVal);

  },

  get: function() {

    var _name =  temp['name'] || '默認(rèn)姓名';

    console.log('獲取person的姓名：' +  _name);

    return _name;

  }

});// 當(dāng)person復(fù)制或取值的時(shí)候回調(diào)用set,get，

  d. vue生命周期

• 一共分為8個(gè)階段：創(chuàng)建前/后袄简，載入前/后腥放，更新前/后，銷毀前/后

• created階段數(shù)據(jù)已經(jīng)準(zhǔn)備好了绿语，但是html還沒(méi)有渲染完成

• mounted html已經(jīng)渲染完成

• destory 解除事件監(jiān)聽(tīng)和dom綁定秃症，但是dom結(jié)構(gòu)還在

  e. vuex

• vuex作用：管理Vue組件的狀態(tài)（當(dāng)出現(xiàn)多個(gè)視圖組件依賴同一個(gè)狀態(tài)，來(lái)自不同視圖的行為需要變更同一個(gè)狀態(tài)吕粹。）

排序方式

1. 冒泡排序

相鄰元素兩兩比較

function bubbleSort(arr) {

    var length = arr.length;

    for(let i = 0; i < length; i++) {

      for(let j = 0; j < length - 1; j++) {

        if(arr[j + 1] < arr[j]) {

          let tem = arr[j+ 1];

          a[j+ 1] = a[j];

          a[j] = tem;

        }

      }

    }

    return arr;

}

2. 選擇排序

選擇最小的

function selectSort(arr) {

    let length = arr.length;

    let minIndex, temp;

    for(let i = 0; i < length; i++) {

      minIndex = i;

      for(let j = i + 1; j < length; j++) {

        if(arr[j] < arr[minIndex]) {

            minIndex = j;

        }

      }

      if(i != minIndex) {

          temp = arr[minIndex];

      arr[minIndex] = arr[i];

      arr[i] = temp;

      }

    }

    return arr;

}

3.插入排序

類似打牌种柑，每選擇一個(gè)元素就找適合它的位置

function insertSort(arr) {

  let length = arr.length;

  let newArr = [];

  for(let i = 1; i < length; i++) {

    let key = arr[i];

    let j = i - 1;

    while(arr[j] > key) {

      arr[j + 1] = arr[j];

      j--;

    }

    arr[j + 1] = key;

  }

  return arr;

}

清除浮動(dòng)的方式

1. overflow:hidden

2. 容器元素最后添加元素，使用clear:both

3. 偽元素

.clearfix:after{

　content:"";//設(shè)置內(nèi)容為空

  height:0;//高度為0

  line-height:0;//行高為0

  display:block;//將文本轉(zhuǎn)為塊級(jí)元素

  visibility:hidden;//將元素隱藏

　clear:both//清除浮動(dòng)

　}

.clearfix{

  zoom:1;為了兼容IE

　　　　}

水平垂直居中的方式

1. margin: auto匹耕； 必須知道高度

.item {
  postion: absoulate;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

2. margin 高寬一半聚请； 必須知道高度和寬度

.item {
  postion: absoulate;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

3. transform； 不需要知道高度和寬度

.item {
  postion: absoulate;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. flex稳其； 兼容性問(wèn)題

.item {
  dispaly: flex;
  justify-content:center;
  align-items: center;
}

實(shí)現(xiàn)深度克隆

function deepClone(obj) {
  var toString = Object.prototype.toString;
  // null, undefined, {}, function
  if(!obj || typeof obj !== 'object') {
      return obj;
  }

  if(toString.call(obj) === '[object Date]') {
    return new Date(obj.getTime());
  }

  if(toString.call(obj) === '[object RegExp]') {
    var flags = [];
    if(obj.global) {
      flags.push('g');
    }
    if(obj.multiline) {
      flags.push('m');
    }
    if(obj.ignoreCase) {
      flags.push('i');
    }
    return new RegExp(obj.source, flags.join(''))
  }
  
  let temp = obj instanceof Array ? [] : {};
  for(var i in obj) {
     if(obj.hasOwnProperty(i)) {
        temp[i] = deepClone(obj[i]);
     }
  }
  return temp;
}// 優(yōu)化驶赏， 可以尾部調(diào)用遞歸

數(shù)組去重

1. 利用對(duì)象屬性唯一

function unique(array) {
  let obj = {};
  let newArray = [];
  for(let i = 0; i < array.length; i++) {
     if(!obj[array[i]]) {
        obj[array[i]] = true;
        newArray.push(array[i]);
     }
  }
  return newArray;
}

2.兩層循環(huán) splice

function unique2(arr) {
    let length = arr.length;
  for(var i = 0; i < length; i++) {
    for(var j = i + 1; j < length; j++) {
        if(arr[j] == arr[i]) {
          arr.splice(j, 1);
          length --;
          j --;
        }
    }
  }
  return arr;
}

3.ES6 set 去重

function unique3(arr) {
  return Array.from(new Set(arr));
 // return (...new Set(arr)) 擴(kuò)展運(yùn)算符
}

內(nèi)存泄露

• 不再用到的內(nèi)存，沒(méi)有及時(shí)釋放就叫內(nèi)存泄露
• 垃圾回收機(jī)制：標(biāo)記清除（最常用）欢际，和引用計(jì)數(shù)
• 常見(jiàn)內(nèi)存泄露情況：
  1. 意外的全局變量母市，比如未定義，直接變量提升（采用嚴(yán)格模式防止）
  2. 閉包過(guò)多损趋，閉包中用到的變量不會(huì)被回收
  3. dom清空或刪除時(shí)患久，事件未清除導(dǎo)致的內(nèi)存泄漏椅寺，及時(shí)移除事件
  4. 循環(huán)引用（引用計(jì)數(shù)永遠(yuǎn)是1）

事件流階段

捕獲階段、目標(biāo)階段蒋失、冒泡階段

Promise

• Promise 好處
  將異步接口以同步的流程表現(xiàn)出來(lái)
• Promise對(duì)象的兩個(gè)特點(diǎn)：
  1. 對(duì)象的狀態(tài)不受外界影響返帕；
  2. 一旦狀態(tài)改變，就
• Promise 的三個(gè)狀態(tài)
  pending篙挽，resolved荆萤，rejected
  Promise狀態(tài)改變只有兩種可能：從pending到fulfilled，從pending到rejected
• Promise 內(nèi)部的錯(cuò)誤不會(huì)影響到 Promise 外部的代碼（Promise會(huì)吃掉錯(cuò)誤）
• Promise.resolve 將現(xiàn)有對(duì)象轉(zhuǎn)化為Promise對(duì)象

   Promise.resolve('foo')
   // 等價(jià)于
   new Promise(resolve => resolve('foo'))
  

Promise.resolve方法的參數(shù)分成四種情況铣卡。
(1) 參數(shù)是一個(gè)Promise對(duì)象
原封不動(dòng)返回
(2) 參數(shù)是一個(gè) thenable對(duì)象（有then屬性方法）
會(huì)將對(duì)象轉(zhuǎn)化為Promise對(duì)象链韭，然后立即執(zhí)行其中的then方法

 let thenable = {
 then: function(resolve, reject) {
   resolve(222);
 }
};
Promise.resolve(thenable)
 .then(res => console.log(res));
(3) 參數(shù)沒(méi)有then方法， 或者根本不是對(duì)象
會(huì)返回一個(gè)新的Promise對(duì)象煮落，狀態(tài)為resolved

const p = Promise.then('hello');
p.then(function(s) {
  console.log(s);
}); // hello

(4) 不帶任何參數(shù)時(shí)敞峭，直接返回一個(gè)resolved狀態(tài)的Promise對(duì)象
   因此可以使用Promise.then() 創(chuàng)建一個(gè)新的Promise對(duì)象

• 使用Promise封裝ajax

  let mineAjax = function(url, method, data) {
  let promise = new Promise(function(resolve, reject) {
   const handler = function() {
     if(this.readyState === 4  && this.status === 200) {
       resolve(this.responce);
     } else {
       reject(new Error(this.statusText));
     }
   };
   const client = new XMLHttpRequest();// new 一個(gè) ajax對(duì)象
   data = getQueryString(data);// 對(duì)象數(shù)據(jù)轉(zhuǎn)'&'連接的字符串
   if(method == 'post') {
     client.open(method, url);
     client.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');// post 要設(shè)置header
     if(data) {
       client.send(data);
     } else {
       client.send();
     }
   }
   if(method == 'get') {
     url += data;
     client.open(method, url);
     client.send();
   } 
     client.onreadystatechange = handler;
     client.responseType = 'json';
   });
   return promise;
  }
  function getQueryString(query) {
   let result = [];
   for(let key in query) {
     result.push(`${key}=${query[key]}`);
   }
   if(result.length > 0) {
     return result.join('&');
   }
  }
  mineAjax('testurl", 'post', {data: test}).then(function(res){
   console.log(res);
  }, function(error) {
   console.log(error);
  });
  

• Promise.prototype.then
  1. then 是寫(xiě)在 promise原型上
  2. then方法返回的是一個(gè)新的Promise實(shí)例
  3. 鏈?zhǔn)綄?xiě)法，前一個(gè)then的返回值下一個(gè)then的參數(shù)

js寫(xiě)原生ajx

1. new XMLHttpRequest;
2. 使用open方法蝉仇，設(shè)置請(qǐng)求方法（get/post）旋讹、url
3. 設(shè)置發(fā)送數(shù)據(jù)，數(shù)據(jù)為（a=1&b=2）的格式
4. 如果是post請(qǐng)求設(shè)置請(qǐng)求頭 setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
5. send, 如果有數(shù)據(jù) send(data)轿衔，沒(méi)有send();
6. 服務(wù)器響應(yīng)事件沉迹，onreadystatechange，當(dāng)readyState == 4 && status == 200的時(shí)候表示響應(yīng)成功

• ajax readState
  0 － （未初始化）還沒(méi)有調(diào)用send()方法
  1 － （載入）已調(diào)用send()方法害驹，正在發(fā)送請(qǐng)求
  2 － （載入完成）send()方法執(zhí)行完成鞭呕，已經(jīng)接收到全部響應(yīng)內(nèi)容
  3 － （交互）正在解析響應(yīng)內(nèi)容
  4 － （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

設(shè)計(jì)模式

• 單體模式
  概念： 單體是一個(gè)用來(lái)劃分命名空間宛官，并將一批屬性和方法組織在一起的對(duì)象
  應(yīng)用： 將代碼封裝在一個(gè)對(duì)象中琅拌，只暴露一個(gè)入口
  好處：
  1. 可以用來(lái)劃分命名空間，減少全局變量的數(shù)量摘刑；
  2. 使用單例模式可以使代碼組織更為一致，便于閱讀和維護(hù)
  3. 可以被實(shí)例化刻坊，且實(shí)例化一次

  var Singleton = {
    attribute: true,
    method1: function() {},
    method2: function() {}
  };

• 工廠模式
  概念： 用于創(chuàng)建對(duì)象實(shí)例枷恕，封裝實(shí)例創(chuàng)建過(guò)程，只關(guān)心創(chuàng)建結(jié)果
  應(yīng)用：處理一些共享相同屬性的組件谭胚，或者對(duì)象徐块，比如提示框；AngularJS factory
  缺點(diǎn)： 沒(méi)有解決對(duì)象的識(shí)別問(wèn)題灾而，都是object

function animal(opts) {
  var obj = new Object();
  obj.name = opts.name;
  obj.color = opts.color;
  obj.getInfo = funtion() {
    return name;
  }
return obj;
}
var cat = animal({name: '波斯貓'胡控， color: '白色'});

• 構(gòu)造函數(shù)模式
  概念： 用于創(chuàng)建特定類型的對(duì)象
  優(yōu)點(diǎn)： 解決了工廠模式無(wú)法識(shí)別類型的問(wèn)題（instanceof Animal == true）
  缺點(diǎn)： 有些公共方法，需要重復(fù)定義

function Animal(name, color) {
  this.name = name;
  this.color = color;
  this.getName = function() {
    return this.name;
  }
}
var cat = new Animal('貓', '白色');
cat.getInfo();

• 原型模式
  概念： 將屬性都放在原型上旁趟；
  優(yōu)點(diǎn)： 所有所有實(shí)例可以共享他的屬性和方法
  缺點(diǎn)： 共享屬性和方法昼激，導(dǎo)致一個(gè)實(shí)例更改屬性或方法就會(huì)影響其他實(shí)例

function Animal() {}
Animal.name = '貓'；
Animal.color = '白色';
var cart1 = new Animal();
var cart2 = new Animal();

• 混合模式（構(gòu)造函數(shù)模式和原型模式結(jié)合）
  概念：構(gòu)造函數(shù)負(fù)責(zé)屬性，原型模式負(fù)責(zé)公共方法或?qū)傩?

   function Animal(name, color) {
     this.name = name;
     this.color = color;
   }
   Animal.prototype.getInfo = function() {
      return this.name + ' ' + this.color;
   }
  

• 創(chuàng)建對(duì)象的方式：

1. 對(duì)象字面量和Object構(gòu)造函數(shù)
2. 工廠模式：抽象了對(duì)象的實(shí)現(xiàn)過(guò)程橙困，但是無(wú)法知道對(duì)象的類型
3. 構(gòu)造函數(shù)模式：new 操作符瞧掺，可以判斷實(shí)例類型（即instanof可以判斷），缺點(diǎn)無(wú)法使用公共屬性
4. 原型模式：將公共屬性添加到prototype中凡傅；
5. 組合使用構(gòu)造函數(shù)模式和原型模式：構(gòu)造函數(shù)模式用于定義實(shí)例屬性辟狈，原型模式用于定義方法和共享的屬性。使用最廣泛的一種方法
6. 動(dòng)態(tài)原型模式： 把初始化原型的過(guò)程也封裝在構(gòu)造函數(shù)中夏跷；

• 發(fā)布訂閱者模式
  概念： 一對(duì)多的映射關(guān)系哼转，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，當(dāng)該對(duì)象改變時(shí)槽华，依賴于它的對(duì)象都將得到通知壹蔓；
  優(yōu)點(diǎn)：支持簡(jiǎn)單的廣播通信，對(duì)象改變會(huì)自動(dòng)通知訂閱過(guò)的對(duì)象
  發(fā)布者和訂閱者的耦合性降低
  缺點(diǎn)：創(chuàng)建訂閱者需要消耗一定的時(shí)間和內(nèi)存

跨域

為什么跨域：XHR對(duì)象只能訪問(wèn)同一個(gè)域中的資源硼莽，為了防止某些惡意行為庶溶，但是有時(shí)候需要跨域訪問(wèn)

1. 圖像Ping

• 一個(gè)網(wǎng)頁(yè)可以從任何網(wǎng)頁(yè)中加載圖像
• 常用于跟蹤用戶點(diǎn)擊頁(yè)面或動(dòng)態(tài)廣告曝光次數(shù)（1px圖片）

2. JSONP （JSON with padding）

• JSONP由回調(diào)函數(shù)和數(shù)據(jù)組成
• 因?yàn)閟cript 可以不受限的從其他域獲取資源；
• 有安全問(wèn)題懂鸵，確定JSONP是否請(qǐng)求失敗不容易偏螺；

3. CORS (cors origin resource sharing)
4. 代理 nginx轉(zhuǎn)發(fā)

TCP 三次握手

TCP核心思想：既要保證數(shù)據(jù)可靠傳輸，又要提高傳輸?shù)男蚀夜猓挝帐謩偤每梢詽M足
在TCP/IP協(xié)議中套像，TCP協(xié)議提供可靠的連接服務(wù)，采用三次握手建立一個(gè)連接终息。
第一次握手：客戶端發(fā)送syn包到服務(wù)器夺巩；
第二次握手：服務(wù)器確認(rèn)客戶端的sync包，同時(shí)發(fā)送一個(gè)sync + ack包到客戶端
第三次握手：客戶端收到服務(wù)器發(fā)的包周崭，向服務(wù)器發(fā)送確認(rèn)包ACK完成三次握手

TCP和UDP的區(qū)別

TCP面向有鏈接柳譬，能正確處理丟包， UDP面向無(wú)連接续镇，不管對(duì)方有沒(méi)有收到

HTTP

HTTP是建立在TCP協(xié)議基礎(chǔ)上的美澳，http是一種短連接，是一種無(wú)狀態(tài)的連接

從輸入U(xiǎn)RL到頁(yè)面加載發(fā)生了什么

1.輸入U(xiǎn)RL,

2. 瀏覽器根據(jù)URL查找是否有緩存摸航，并且判斷緩存是否過(guò)期制跟，如果沒(méi)過(guò)期則從緩存中讀取,如果過(guò)期則需要重新讀取
3. DNS查找域名的IP地址
   • 先從瀏覽器緩存中找,在從操作系統(tǒng)緩存中找，再?gòu)穆酚善骶彺嬷姓?/li>
   • 沒(méi)有緩存酱虎，則進(jìn)行DNS遞歸查找
4. 同服務(wù)器建立TCP連接雨膨，然后發(fā)起http請(qǐng)求
5. 服務(wù)器收到請(qǐng)求并解析，將請(qǐng)求轉(zhuǎn)發(fā)到服務(wù)程序读串；
6. 服務(wù)程序讀取請(qǐng)求并作出響應(yīng)聊记；
7. 服務(wù)器通過(guò)TCP連接發(fā)送回瀏覽器撒妈；
8. 瀏覽器接收響應(yīng)，檢查狀態(tài)碼甥雕，作出響應(yīng)踩身；
9. 解析HTML文檔，構(gòu)建DOM樹(shù)結(jié)構(gòu)社露，下載圖片挟阻、視頻、css峭弟、js資源等附鸽，構(gòu)建CSSOM樹(shù)
   10.根據(jù)DOM樹(shù)和CSSOM樹(shù)構(gòu)建渲染樹(shù)， 執(zhí)行js腳本
10. 最后顯示HTML

瀏覽器緩存機(jī)制

瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的web資源（html,圖片瞒瘸，js等）拷貝一份副本存儲(chǔ)在瀏覽器中坷备；

• 瀏覽器緩存的控制

1. 使用HTML Meta標(biāo)簽
2. 使用和緩存有關(guān)的http報(bào)文

 <meta http-equiv="Pragma" content="no-cache">  

項(xiàng)目相關(guān)

1. Angularjs和Vue你覺(jué)得區(qū)別在哪里？
   • 從使用上看情臭，Vue使用更為方便省撑，有完整的api包括生命周期，文檔也個(gè)更為齊全

• Angularjs指令和組件沒(méi)有區(qū)分開(kāi)俯在，都是用directive竟秫，而Vue是完全分開(kāi)的
• Vue性能更好，Angularjs 的雙向綁定是基于臟檢查的 跷乐，當(dāng) watcher 越來(lái)越多時(shí)會(huì)變得越來(lái)越慢肥败，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算愕提。則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式馒稍，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter浅侨；
  a. 臟值檢查： 就是不關(guān)心你如何以及何時(shí)改變的數(shù)據(jù)纽谒，只關(guān)心在特定的檢查階段（UI事件，ajax事件如输， timeout 延遲事件）佛舱，數(shù)據(jù)是否改變。
  b. angularjs賍值檢查的實(shí)現(xiàn)：
  每一個(gè)綁定到UI上的數(shù)據(jù) 都擁有一個(gè)對(duì)應(yīng)的$watch對(duì)象挨决，這個(gè)對(duì)象會(huì)被push到watch list中， $watch包括兩個(gè)函數(shù)屬性

watch = {
  name: '', // 當(dāng)前watch的對(duì)象
  getNewValue: function($scope) {// 得到新值
    return newValue;
  },
  listener: function(newValue, oldValue) {// 當(dāng)數(shù)據(jù)發(fā)生改變時(shí)候需要執(zhí)行的操作
    ...
  }
};

c. 手動(dòng)出發(fā)臟檢查订歪，$apply進(jìn)入angular上下文脖祈，$digest觸發(fā)臟檢查

gulp和webpack的區(qū)別

兩者不應(yīng)該拿來(lái)比較，
gulp屬于前端流程優(yōu)化工具刷晋，它可以自動(dòng)刷新頁(yè)面盖高、壓縮技術(shù)慎陵，css,編譯less，自動(dòng)化
而webpack是模塊化方案喻奥，是一個(gè)前端資源加載/打包工具席纽，從官網(wǎng)的圖片就可以看出Webpack 可以將多種靜態(tài)資源 js、css撞蚕、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件润梯，減少了頁(yè)面的請(qǐng)求

this

• this 的綁定和函數(shù)聲明的位置沒(méi)有任何關(guān)系，只取決于函數(shù)的調(diào)用方式甥厦。
• this取值情況分為4種情況：
  1. 構(gòu)造函數(shù)纺铭，如果函數(shù)作為構(gòu)造函數(shù)（new），那么this指向new出來(lái)的對(duì)象
  2. 函數(shù)作為對(duì)象的一個(gè)屬性刀疙，并且作為對(duì)象的一個(gè)屬性被調(diào)用的時(shí)候舶赔，this指向該對(duì)象（隱式綁定）；
  3. 函數(shù)使用call或apply調(diào)用的時(shí)候谦秧，this的值就去傳入對(duì)象的值竟纳；（顯示綁定）
  4. 全局并且調(diào)用普通函數(shù)，this指向window（nodejs中指向global）
  5. 箭頭函數(shù)根據(jù)外層作用域(函數(shù)或者全局)決定this

作用域

• 作用域在函數(shù)定義的時(shí)候就已經(jīng)確定疚鲤，而不是函數(shù)調(diào)用時(shí)確定
• 作用域中變量的值是在執(zhí)行過(guò)程中產(chǎn)生和確定的
• 自由變量跨作用域取值要去創(chuàng)建函數(shù)的作用域找

執(zhí)行上下文

執(zhí)行上下文指的是以下三種數(shù)據(jù)的準(zhǔn)備情況：

1. 變量（包括函數(shù)表達(dá)式）的變量聲明锥累，默認(rèn)賦值為undefined
2. this的賦值；
3. 函數(shù)聲明的賦值
   通俗的講就是把將要用到的所有變量都實(shí)現(xiàn)聲明和賦值
   函數(shù)每被調(diào)用一次石咬，都會(huì)產(chǎn)生一個(gè)新的執(zhí)行上下文環(huán)境
   處于活動(dòng)狀態(tài)的執(zhí)行上下文環(huán)境只有一個(gè)揩悄，執(zhí)行不同上下文的過(guò)程，是一個(gè)壓棧出棧的過(guò)程——執(zhí)行上下文棧

常用正則

1. 去除空格

• 所有空格
  replace(/\s*/g, '');
• 去除兩頭空格
  replace(/^\s|\s$/g, '');
• 去除左邊空格
  replace(/^\s*/g, '')
• 去除右邊空格
  replace(/\s*$/g, '')

2. 數(shù)字

• 整數(shù) /^\d+$/;
• 數(shù)字 /^\d*.?\d+$/

圣杯布局和雙飛翼布局

• 圣杯布局

  <div class="container">
    <div class="middle"><h4>中間彈性區(qū)</h4></div> 
    <div class="left"><h4>左邊欄</h4></div> 
    <div class="right"><h4>右邊欄</h4></div>
  </div>
  <style>
  .container {
            height: 200px;
            overflow: hidden;
            padding: 0 200px;
        }

        .middle {
            width: 100%;
            height: 200px;
            background-color: deeppink;
            float: left;
            
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            margin-left:-100%;
            position: relative;
            left: -200px;
        }

        .right {
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            float: left;
            margin-left:-200px;
            position: relative;
            right: -200px;
        }
  </style>

• 雙飛翼布局

<div class="container2">
    <div class="middle2"><div><h4>中間彈性區(qū)</h4></div></div> 
    <div class="left2"><h4>左邊欄</h4></div> 
    <div class="right2"><h4>右邊欄</h4></div>
  </div>
.container2 {
            height: 200px;
            overflow: hidden;
            margin-top: 20px;
        }
        .left2 {
          width: 200px;
          height: 200px;
          background-color: green;
          float: left;
          margin-left: -100%;
        }
        .right2 {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: -200px;
        }
        .middle2 {
            width: 100%;
            height: 200px;
            float: left;
            background-color: orange;
        }
        .co {
            margin: 0 200px;
        }

清除浮動(dòng)

1鬼悠、clear清除浮動(dòng)（添加空div法）

在浮動(dòng)元素下方添加空div,并給該元素寫(xiě)css樣式：   {clear:both;height:0;overflow:hidden;}

2删性、方法：給浮動(dòng)元素父級(jí)設(shè)置高度
3、父元素overflow：hidden

overflow: hidden;
*zoom: 1;

4. after偽類

.clear:after{content:' ';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}