摘要：異步管理等到執行完成后返回種狀態，代表成功，代表失敗。我們在函數內聲明的變量叫局部變量，局部變量只能在里面訪問，外面是訪問不到的。那么就是為解決這一問題的。可以用鏈式寫法等到異步有結果再進行下一步。

vue的雙向綁定原理是通過Object.definedProperty的getter和setter來對屬性進行數據劫持的。

因為Object.definedProperty最低是支持到瀏覽器IE9的，所以如果想要兼容IE8，只能去做Object.definedProperty的兼容，那最終使用的是做的兼容，而不是Object.definedProperty.

找了一張圖片來表示響應原理。首先Object.definedProperty會對data的每個屬性進行數據的劫持，當我們把data屬性的值改了，就會觸發它的setter，然后通知到watcher，watcher再更新指令所綁定的屬性的值。

通過Observer對data做監聽，并提供了訂閱某個數據項變化的能力

把template編譯成一段document fragment,然后解析其中的Directive,得到每一個Directive所依賴的數據項和update方法。

通過Watcher把上述2部分結合起來，即把Directive中的數據依賴通過Watcher訂閱在對應數據的Observer的Dep上，當數據變化時，

就會觸發Observer的Dep上的notify方法通知對應的Watcher的update,進而觸發Directive的update方法來更新dom視圖，最后達到模型和視圖關聯起來。

依次為：beforeCreate ==> created ==> beforeMount ==> mounted ==> beforeUpdate ==> updated ==> beforeDestroy ==> destroyed
初始化的時候只有一次，只有當數據更改的時候才會去觸發update鉤子

computed是對結果進行緩存的，只要依賴的值沒有變化，結果就不會變化。method就是普通的方法。computed減少執行的getter減去了重復計算，節省內存。watch是一直在監聽。比如this.num + new Date(),雖然new Date的值一直在變，但只要this.num沒變，結果還是一樣的。

html:

    

    

    



style:
.box{
    display:flex;
}
.item:nth-child(2){
    align-self:center;
}
.item:nth-child(3){
    align-self:right;
}

    :first-child/:last-children   //選擇第一個孩子，:nth-of-type(n)
    :checked/:disabled   //選擇checkbox已選中的
    :afeter/:before //標簽的偽類
    :not(selecter) //非元素的其它元素
    

1.加上下一樣的padding值，達到上下居中的目的。
2.利用table

    

        

        

        

    

.wapper{
    displaty:table;
 }
.cell{
    display:table-cell;
    vertical-align:center;
}

3.{position:relative;top:50%;transform:translateY(-50%)}
4.通過box:

    

        

        

        

    

.center{
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

5.flex:

    

        

        

        

    

.flex{
    display:flex;
    align-items:center;
}

瀏覽器為了安全機制，采用同源策略，域名，協議，端口號一致的才可以進行訪問;

1，jsonp:是通過script標簽的src屬性來實現跨域的。通過src傳過去一個函數，把數據放在函數的實參調用就可以拿到數據。由于是用src的鏈接，所以jsonp只支持get方式。content-type:javascript
2，cors:改變請求頭信息。客戶端加：Origin:地址。服務器：Access-Control-Allow-Origin:地址.支持IE10以上。
3，webpack:devServer里配置proxy:{api:"地址"};
4，nginx反向代理：

nginx.conf

upstream tomcatserver{
    server 192.168.72.49:8081//3.找到代理服務器的ip地址進行請求
}
server{
    listen        80;
    server_name   8081.max.com;//1.客戶端調用名
    
    location / {
        proxy_pass    http://tomcatserver;//2.到代理服務器
        index   index.html  index.html;
    }
}

loader和plugins的區別：loader是負責解析代碼的，而且plugins是去做優化，代碼整合之類的。

new ExtractTextPlugin("styles.css")：分隔出css多帶帶打包;

new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: function (module) {
       // 該配置假定你引入的 vendor 存在于 node_modules 目錄中
       return module.context && module.context.indexOf("node_modules") !== -1;
    }
})//依賴項不重復打包，分隔模塊

 importLazy(import("./components/TodoHandler")),
  TodoMenuHandler: () => importLazy(import("./components/TodoMenuHandler")),
  TodoMenu: () => importLazy(import("./components/TodoMenu")),
}}>//懶加載

解析es7用到的babel：babel-core,babel-loader,babel-preset-es2015,babel-preset-stage-2,babe-plugin-transform-runtime,babel-runtime,babel-register.

var:會存在變量提升，如果在聲明之前用到會報undefined.
let:不存在變量提升，如果在聲明之前用到會報錯。暫時性死區。塊級作用域。
const:聲明之后就不能改變。同上，如果是對象的話，只是指向引用的地址，所以對象里面的值改變了，是沒有任何反應的。
function:聲明屬于window.function
class:聲明一個類
import:聲明一個引用過來的模塊

壓縮css,js：體積更小，加載速度更快。
css在前，js在后：css在前可以和dom樹一起合成render樹，js在后不阻塞dom渲染。
減少http請求：http請求需要時間。而且要等到它請求完才能執行。請求是異步的，不知道什么時候才能請求完。
webpack配置：按需加載。分離css。分隔依賴，把相同的依賴只打包到一起，不必重復加載。

promise:promise等到執行完成后返回2種狀態，resolve代表成功，reject代表失敗。
如果有多個異步可以用promise.all([]).
async await:async聲明一個函數返回一個promise。await等到promise異步執行結束拿到的一個結果

臟值檢測：angular在scope模型上設置了一個監聽隊列，用來監聽數據變化并更新view,每次綁定一個東西到view上時angular就會往$watch隊列插入一條$watch,用來檢測它監視的model里是否有變化的東西（一個數據一個$watcher，對象會有一個，里面的值還會有，數組中每個對象也都會有一個）。這些$watch列表會在$digest循環中通過一個叫做‘臟值檢測’的程序解析。
angular對大部分能產生數據變動的事件進行封裝（如click,mouse-enter,timeout），在每次事件發生后，比如更改了scope中的一條數據，angular會自動調用$digest來觸發一輪$digest循環，它會觸發每個watcher,檢查scope中的當前model值是否和上一次計算得到的Model值是否一樣，如不同，對應的回調函數會被執行，調用該函數的結果，就是view中的表達式內容會被更新。

如果執行了非angular的方法，如setTimeout需要調用$apply()應用到angular上，它會調用$rootScope.$digest()。因此，一輪$digest循環在$rootScope開始，隨后會訪問到所有的children scope中的watchers。

$apply()里面可以加參數，而且會觸發作用域樹上所有的監控。$digest()只作用在當前作用域和它的子作用域上。

angular服務:sevicer對象的實例化this.xx=。factory返回一個對象return{a:xx}

arr.splice(2,0,3)

在數據傳輸過程中，json是以文本，即字符串的形式傳遞的。而js操作的是json對象。

轉對象：str.parseJSON(),JSON.parse(str),eval("("+str+")")
轉字符串：obj.toJSONString(),JSON.stringify(obj)

因為js是單線程的，setTimeout/setInterval是在定時器線程，要等主線程走完了，才會執行事件隊列。如果主線程的計算執行時間過長，那么定時器就要一直等著不能執行，就導致了，動畫卡，或者一下堆在一起執行重疊過快。
requestAnimationFrame不需要設置時間間隔。IE9以下不支持。cancelAnimationFrame()用來取消。

每一個構造函數都有自己的原型對象，用prototype屬性來表示。每個原型對象都有一個隱式的_proto_屬性指向它父級的原型對象。如:

let a= new A() 
a._proto_=A.prototype
a._proto_._proto_=A.prototype._proto_=Object.prototype
a._proto_._proto_._proto_=A.prototype._proto_._proto_=Object.prototype._proto_=null

閉包簡單來說就是函數套函數。我們在函數內聲明的變量叫局部變量，局部變量只能在里面訪問，外面是訪問不到的。如果我們想訪問局部變量就可以在函數的內部在寫一個函數，根據作用域鏈的原則就可以往上找父級的變量。
閉包會導致內存泄露的問題，解決辦法是用過之后把這個變量清空還原。

arguments是一個對應于傳遞給函數的參數的類數組對象。它是一個類似于數組的對象，但還不是數組。
arguments.length:實參長度。arguments.callee.length:形參長度
可以用[].slice.call(arguments);或Array.from(arguments);[...arguments]

get一般表示從服務器獲取數據，post是向服務器傳遞數據。
get的方式是url，因為在地址欄所以長度有限，而且地址欄的內容可以看到，所以保密性較差。
而post是放在requst body。對長度沒有限制，保密性也較好。
get一般用于搜索。post一般用于表單提交。

3 + "3" = 33
undefined + 3 = NaN //undefined為NaN,
null + 3 = 3 //null為空。
"null" + 3 = "null3"

當有+的時候會檢查是否有類型為string的，如果有就會把其它值也轉化為string格式進行字符連接。如果沒有string,有number，那么會把其它值轉化為number類型的值執行加法運算。

for(vari=0,j=0;i<5,j<10;i++,j++){
    
}
console.log(i+j) //20

Array.prototype.q=function(arr){
    let obj={},a=[];
    for(let i=0;i
23. 類的繼承：
es6:extends

es5:
1.構造函數綁定：
function Cat(name,color){
    Animal.apply(this,arguments);
    this.name=name;
    this.color=color;
}
2.利用prototype:
function Cat(name,color){
    this.name=name;
    this.color=color;
}
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;
3.組合繼承：
function Cat(){
    Animal.call(this)
}
Cat.prototype=new Animal();
4.通過空對象：
function extend(Child,Parent){
    var F=function(){};
    F.prototype=Parent.prototype;
    
    Child.prototype=new F();
    Child.prototype.constructor=Child;
}

function Animal(){}
Animal.prototype.species="動物";

function Cat(name){
    this.name=name;
}

extend(Cat,Animal)
5.拷貝繼承：
function extend2(Child,Parent){
    var p=Parent.prototype;
    var c=Child.prototype;
    
    for(var i in p){ //淺拷貝
        c[i]=p[i]
    }
}

extend2(Cat,Animal)
24. map和forEach的區別：
forEach不能breack,也不能return.
map循環每一個的時候就相當于在內存中新建了一個數據，比較占內存
25. 獲取url地址：
window.location.href


26. async的好處：
最開始的異步都是用回調函數解決的，比如ajax,setTimeout,addEventListener.但是如果回調函數過多就會形成回調地獄。那么promise就是為解決這一問題的。promise可以用鏈式寫法等到異步有結果再進行下一步。但如果promise寫多了也會變的不直觀，async的await等到promise的返回。可以讓代碼看起來更加簡潔高效。
27. 解構出a.b.c的值：
let obj={a:{b:{c:1}}}
let {a:{b:{c}}}=obj
console.log(c) //1
28.react的生命周期：

29. angular與vue的對比：
30. 計算數組中元素出現的次數：
請輸入代碼