美團(tuán)-前端開發(fā)面經(jīng)（一）

一、變量的作用域

要理解閉包，首先必須理解Javascript特殊的變量作用域。

變量的作用域無非就是兩種：全局變量和局部變量。

Javascript語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量。

var n=999; 　　function f1(){　　　　alert(n);　　} 　　f1(); // 999

另一方面，在函數(shù)外部自然無法讀取函數(shù)內(nèi)的局部變量。

function f1(){　　var n=999;} alert(n); // error

這里有一個地方需要注意，函數(shù)內(nèi)部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！

function f1(){　　n=999;} f1(); alert(n); // 999

二、如何從外部讀取局部變量？

出于種種原因，我們有時候需要得到函數(shù)內(nèi)的局部變量。但是，前面已經(jīng)說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現(xiàn)。

那就是在函數(shù)的內(nèi)部，再定義一個函數(shù)。

function f1(){ 　　n=999; 　　function f2(){　　　　alert(n); // 999　　} }

在上面的代碼中，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時f1內(nèi)部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內(nèi)部的局部變量，對f1 就是不可見的。這就是Javascript語言特有的“鏈?zhǔn)阶饔糜颉苯Y(jié)構(gòu)（chain scope），

子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。

既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，我們不就可以在f1外部讀取它的內(nèi)部變量了嗎！

function f1(){ 　　n=999;　　function f2(){　　　　alert(n);　　} 　　return f2; } var result=f1();result(); // 999

三、閉包的概念

上一節(jié)代碼中的f2函數(shù)，就是閉包。

各種專業(yè)文獻(xiàn)上的“閉包”（closure）定義非常抽象，很難看懂。我的理解是，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。

所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

四、閉包的用途

閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。

怎么來理解這句話呢？請看下面的代碼。

function f1(){ 　　var n=999; 　　nAdd=function(){n+=1} 　　function f2(){　　　　alert(n);　　} 　　return f2;} var result=f1(); result(); // 999nAdd();result(); // 1000

在這段代碼中，result實際上就是閉包f2函數(shù)。它一共運(yùn)行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒有在f1調(diào)用后被自動清除。

為什么會這樣呢？原因就在于f1是f2的父函數(shù)，而f2被賦給了一個全局變量，這導(dǎo)致f2始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。

這段代碼中另一個值得注意的地方，就是“nAdd=function(){n+=1}”這一行，首先在nAdd前面沒有使用var關(guān)鍵字，因此 nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數(shù)（anonymous function），而這個匿名函數(shù)本身也是一個閉包，所以nAdd相當(dāng)于是一個setter，可以在函數(shù)外部對函數(shù)內(nèi)部的局部變量進(jìn)行操作。

五、使用閉包的注意點

1）由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

2）閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

最直觀的區(qū)別就是在url中 hash 帶了一個很丑的 # 而history是沒有#的

對于vue這類漸進(jìn)式前端開發(fā)框架，為了構(gòu)建 SPA（單頁面應(yīng)用），需要引入前端路由系統(tǒng)，這也就是 Vue-Router 存在的意義。前端路由的核心，就在于 —— 改變視圖的同時不會向后端發(fā)出請求。

為了達(dá)到這一目的，瀏覽器當(dāng)前提供了以下兩種支持：

hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學(xué)里的散列運(yùn)算）。比如這個 URL：http://www.abc.com/#/hello hash 的值為 #/hello。它的特點在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。

因此可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調(diào)用瀏覽器提供的接口）來實現(xiàn)前端路由.

使用場景

一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 URL 里看起來確實有些不太美麗。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉(zhuǎn)而無須重新加載頁面。

另外，根據(jù) Mozilla Develop Network 的介紹，調(diào)用 history.pushState() 相比于直接修改 hash，存在以下優(yōu)勢:

pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL；

pushState() 設(shè)置的新 URL 可以與當(dāng)前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設(shè)置的新值必須與原來不一樣才會觸發(fā)動作將記錄添加到棧中；

pushState() 通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串；

pushState() 可額外設(shè)置 title 屬性供后續(xù)使用。

當(dāng)然啦，history 也不是樣樣都好。SPA 雖然在瀏覽器里游刃有余，但真要通過 URL 向后端發(fā)起 HTTP 請求時，兩者的差異就來了。尤其在用戶手動輸入 URL 后回車，或者刷新（重啟）瀏覽器的時候。

總結(jié)

1 hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.abc.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

2 history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少對 /book/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”

3 結(jié)合自身例子，對于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 開發(fā)場景，用 history 模式即可，只需在后端（Apache 或 Nginx）進(jìn)行簡單的路由配置，同時搭配前端路由的 404 頁面支持。

1,父組件給子組件傳遞數(shù)據(jù)

vue中使用props向子組件傳遞數(shù)據(jù)

1): 子組件在props中創(chuàng)建一個屬性,用于接收父組件傳過來的值

2): 父組件中注冊子組件

3): 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性

4): 把需要傳給子組件的值賦給該屬性

2,子組件向父組件傳遞數(shù)據(jù)

子組件主要通過事件傳遞數(shù)據(jù)給父組件

1), 子組件中需要以某種方式,例如點擊事件的方法來觸發(fā)一個自定義事件

2),將需要傳的值作為$emit的第二個參數(shù),該值將作為實參數(shù)傳給相應(yīng)自定義事件的方法

3),在父組件中注冊子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽

3,子組件向子組件傳遞數(shù)據(jù)

vue找那個沒有直接子組件對子組件傳參的方法,建議將需要傳遞數(shù)據(jù)的在組件,都合并為一個組件,如果一定需要子組件對子組件傳參,可以先傳到父組件,再傳到子組件,為了方便開發(fā),vue推出了一個狀態(tài)管理工具vuex,可以方便的實現(xiàn)組件之間的參數(shù)傳遞

具體的實例代碼如下:可以自行參考相關(guān)代碼在編輯器中嘗試

父組件向子組件傳遞數(shù)據(jù)

// 父組件向子組件傳遞數(shù)據(jù)<!--msg 是在data中(父組件)定義的變量如果需要從父組件中獲取logo的值,就需要使用props['msg'], 如30行在props中添加了元素以后,就不需要在data中(子組件)中再添加變量了--><template>  <div>    <child  @transferuser="getUser" :msg="msg"></child>      <p>用戶名為:{{user}}(我是子組件傳遞給父組件的數(shù)據(jù))</p>    </div></template>

<script>    import child from './child.vue';    export default {        components: {            child,        },        data() {            return {                user: '',                msg: '我是父組件傳給子組件的信息',            };        },        methods: {            getUser(msg) {                this.user = msg;                console.log(msg);            },        },    };</script>

子組件向父組件傳遞數(shù)據(jù)

// 子組件向父組件傳遞數(shù)據(jù)<!--1.@ : 是  v-on的簡寫2.子組件主要通過事件傳遞數(shù)據(jù)給父組件3.當(dāng)input的值發(fā)生變化時,將username傳遞給parent.vue,首先聲明了一個setUser,用change事件來調(diào)用setUser4.在setUser中,使用了$emit來遍歷transferUser事件,并返回this.username,其中transferuser是一個自定義事件,功能類似一個中轉(zhuǎn),this.username通過這個事件傳遞給父組件--><template>  <div>      <div>{{msg}}</div>      <span>用戶名</span>      <input v-model="username" @change='setUser'>向父組件傳值</button>  </div></template>

<script>    export default {        data() {            return {                username: '測試',            };        },        props: {            msg: {                type: String,            },        },        methods: {            setUser() {                this.$emit('transferuser', this.username);            },        },    };</script>