整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)象一：先定義在使用，正常執(zhí)行可以理解
var num = 1; console.log(num);//1
現(xiàn)象二：先使用，在定義，報(bào)錯(cuò)也能接受
console.log(num);//報(bào)錯(cuò) num = 1;
現(xiàn)象三：先使用在定義，居然沒有報(bào)錯(cuò)？為什么輸出undefined？
console.log(num);//undefined; var num = 1;
現(xiàn)象一：先定義函數(shù)，在使用。能夠理解
function sum(){ console.log(1);
}
sum(); 現(xiàn)象二：先使用，在定義。也能正常執(zhí)行？？？？？ sum();
function sum(){
console.log(1);
}
JavaScript解析過(guò)程分為兩個(gè)階段：
一個(gè)是編譯階段，另外一個(gè)就是執(zhí)行階段。
編譯階段：編譯階段就是我們常說(shuō)的JavaScript預(yù)解析（預(yù)處理）階段，在這個(gè)階段JavaScript解釋器將完成把JavaScript腳本代碼轉(zhuǎn)換到字節(jié)碼。
執(zhí)行階段：在編譯階段JavaScript解釋器借助執(zhí)行環(huán)境把字節(jié)碼生成機(jī)械碼， 并頁(yè)序執(zhí)行。
以上文言文翻譯成漢語(yǔ)是： js代碼執(zhí)行分兩個(gè)階段：首先做預(yù)解析，然后代碼從上到下執(zhí)行。 那么，預(yù)解析都做了些什么呢？
Javascript在預(yù)解析時(shí)，在當(dāng)前的作用域中,js代碼執(zhí)行之前瀏覽器首先會(huì)默認(rèn)把所有帶var和function的進(jìn)行提前的聲明或者定義.
var num = 1;
sum();
function sum(){
console.log(num);//1
}
以上代碼執(zhí)行時(shí)：
1.預(yù)解析：查找var，發(fā)現(xiàn)了變量num，按照預(yù)解析的規(guī)則，變量預(yù)解析只聲明不賦值。相當(dāng)于把num變量放在了全局的小倉(cāng)庫(kù)中。告訴javascript代碼，現(xiàn)在程序中有一個(gè)全局變量num，但是此時(shí)num并沒有賦值即num此時(shí)的值為undefined。
查找function關(guān)鍵字，發(fā)現(xiàn)了函數(shù)sum，按照預(yù)解析的規(guī)則，聲明并定義。相當(dāng)于把sum函數(shù)放在全局 的小倉(cāng)庫(kù)中，并且賦值了。
2.執(zhí)行：代碼從上到下執(zhí)行，預(yù)解析過(guò)的直接略過(guò)。第一行 var num=1;已經(jīng)預(yù)解析過(guò)num，所以這句只執(zhí)行 賦值操作。第二行 sum(); 執(zhí)行sum函數(shù)，js會(huì)到當(dāng)前作用域的小倉(cāng)庫(kù)中查找，預(yù)解析過(guò)sum函數(shù)，那么 函數(shù)執(zhí)行，函數(shù)執(zhí)行console.log(num);變量num在當(dāng)前作用域的小倉(cāng)庫(kù)中沒有，那么去上級(jí)作用域查 找，發(fā)現(xiàn)上級(jí)作用域的小倉(cāng)庫(kù)中有預(yù)解析過(guò)num變量，并且變量的值在第一行代碼執(zhí)行時(shí)已經(jīng)被賦值為 1，所以console.log(num);輸出1
任何程序設(shè)計(jì)語(yǔ)言都有作用域的概念，簡(jiǎn)單的說(shuō)，作用域就是變量與函數(shù)的可訪問(wèn)范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。
在JavaScript中，函數(shù)也是對(duì)象，實(shí)際上，JavaScript里一切都是對(duì)象。函數(shù)對(duì)象和其它對(duì)象一樣，擁有可以通過(guò)代碼訪問(wèn)的屬性和一系列僅供JavaScript引擎訪問(wèn)的內(nèi)部屬性。其中一個(gè)內(nèi)部屬性是[[Scope]]，由ECMA-262標(biāo)準(zhǔn)第三版定義，該內(nèi)部屬性包含了函數(shù)被創(chuàng)建的作用域中對(duì)象的集合，這個(gè)集合被稱為函數(shù)的作用域鏈，它決定了哪些數(shù)據(jù)能被函數(shù)訪問(wèn)。
function add(num1,num2){
var sum = num1+ num2;
return sum;
}
在函數(shù)add創(chuàng)建時(shí)，它的作用域鏈中會(huì)填入一個(gè)全局對(duì)象，該全局對(duì)象包含了所有全局變量，如下圖所示（注意：圖片只例舉了全部變量中的一 部分）
作用域鏈
函數(shù)add的作用域?qū)?huì)在執(zhí)行時(shí)用到。例如執(zhí)行如下代碼：
var total = add(5,10);
執(zhí)行此函數(shù)時(shí)會(huì)創(chuàng)建一個(gè)稱為“運(yùn)行期上下文(execution context)”的內(nèi)部對(duì)象，運(yùn)行期上下文定義了函數(shù)執(zhí)行時(shí) 的環(huán)境。每個(gè)運(yùn)行期上下文都有自己的作用域鏈，用于標(biāo)識(shí)符解析，當(dāng)運(yùn)行期上下文被創(chuàng)建時(shí)，而它的作 用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的[[Scope]]所包含的對(duì)象。這些值按照它們出現(xiàn)在函數(shù)中的頁(yè)序被復(fù)制到運(yùn) 行期上下文的作用域鏈中。它們共同組成了一個(gè)新的對(duì)象，叫“活動(dòng)對(duì)象(activation object)”，該對(duì)象包含了 函數(shù)的所有局部變量、命名參數(shù)、參數(shù)集合以及this，然后此對(duì)象會(huì)被推入作用域鏈的前端，當(dāng)運(yùn)行期上下 文被銷毀，活動(dòng)對(duì)象也隨之銷毀。新的作用域鏈如下圖所示：
在函數(shù)執(zhí)行過(guò)程中，每遇到一個(gè)變量，都會(huì)經(jīng)歷一次標(biāo)識(shí)符解析過(guò)程以決定從哪里獲取和存儲(chǔ)數(shù)據(jù)。該過(guò)程從作用域鏈頭部，也就是從活動(dòng)對(duì)象開始搜索，查找同名的標(biāo)識(shí)符，如果找到了就使用這個(gè)標(biāo)識(shí)符對(duì)應(yīng)的變量，如果沒找到繼續(xù)搜索作用域鏈中的下一個(gè)對(duì)象，如果搜索完所有對(duì)象都未找到，則認(rèn)為該標(biāo)識(shí)符未定義。函數(shù)執(zhí) 行過(guò)程中，每個(gè)標(biāo)識(shí)符都要經(jīng)歷這樣的搜索過(guò)程。
結(jié)論：從作用域鏈的結(jié)構(gòu)可以看出，在運(yùn)行期上下文的作用域鏈中，標(biāo)識(shí)符所在的位 置越深，讀寫速度就會(huì)越慢。如上圖所示，因?yàn)槿肿兞靠偸谴嬖谟谶\(yùn)行期上下文 作用域鏈的最末端，因此在標(biāo)識(shí)符解析的時(shí)候，查找全局變量是最慢的。所以，在 編寫代碼的時(shí)候應(yīng)盡量少使用全局變量，盡可能使用局部變量。一個(gè)好的經(jīng)驗(yàn)法則 是：如果一個(gè)跨作用域的對(duì)象被引用了一次以上，則先把它存儲(chǔ)到局部變量里再使用。
段時(shí)間在面試web開發(fā)前端工程師，整理了一些web前端相關(guān)的面試題及答案，包含原生html、js、微信小程序、uni-app等。有些答案包含了一些個(gè)人見解在里面，僅供參考。
切圖工具
Ps， sketch，figma
行內(nèi)元素和塊級(jí)元素的區(qū)別？
行內(nèi)元素：不會(huì)獨(dú)立出現(xiàn)在一行，單獨(dú)使用的時(shí)候后面不會(huì)有換行符的元素。
塊級(jí)元素：獨(dú)立在一行的元素，他們后面會(huì)自動(dòng)帶有換行符。
行內(nèi)元素轉(zhuǎn)換成塊元素，只要設(shè)置其display屬性為block即可，display:block; 。塊元素轉(zhuǎn)換成行內(nèi)元素，只要將其display屬性設(shè)置為inline即可，display:inline。
（1）行內(nèi)元素有：a b span img input select
（2）塊級(jí)元素有：div p ul ol li dl dt dd h1-h6
（3）常見的空元素：br-換行，hr-水平分割線
瀏覽器（客戶端）存儲(chǔ)方式
SessionStorage， LocalStorage， Cookie 這三者都可以被用來(lái)在瀏覽器端存儲(chǔ)數(shù)據(jù)，而且都是字符串類型的鍵值對(duì)。區(qū)別在于前兩者的目的便于客戶端存儲(chǔ)數(shù)據(jù)。而 cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。cookie 數(shù)據(jù)始終在同源（協(xié)議、主機(jī)、端口相同）的 http 請(qǐng)求中攜帶（即使不需要），會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
存儲(chǔ)大小：
cookie 數(shù)據(jù)大小不能超過(guò)4 k 。
sessionStorage 和 localStorage 雖然也有存儲(chǔ)大小的限制，但比 cookie 大得多，可以達(dá)到 5M 或更大。
有期時(shí)間：
1、 localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)。
2、 sessionStorage 數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除。頁(yè)面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。在新標(biāo)簽或窗口打開一個(gè)頁(yè)面時(shí)會(huì)在頂級(jí)瀏覽上下文中初始化一個(gè)新的會(huì)話。
3、 cookie 設(shè)置的 cookie 過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
作用域：
1、 sessionStorage 只在同源的同窗口（或標(biāo)簽頁(yè)）中共享數(shù)據(jù)，也就是只在當(dāng)前會(huì)話中共享。
2、 localStorage 在所有同源窗口中都是共享的。
3、 cookie 在所有同源窗口中都是共享的。
瀏覽器端常用的存儲(chǔ)技術(shù)是 cookie 、localStorage 和 sessionStorage。
img標(biāo)簽的title和alt是什么
title：解釋信息，鼠標(biāo)移上去顯示的信息
alt：替換信息、圖片不能顯示時(shí)的信息
html5新特性
語(yǔ)義化標(biāo)簽：比如 article、footer、header、nav、section;
表單控件：calendar、date、time、email、url、search;
媒體元素video和audio元素
本地存儲(chǔ)：localStorage sessionStorage
新的技術(shù)，websocket
前端需要注意哪些SEO搜索引擎
合理的title、description、keywords：搜素時(shí)對(duì)這三項(xiàng)的權(quán)重逐個(gè)減少，title強(qiáng)調(diào)重點(diǎn)，重要關(guān)鍵詞不要超過(guò)兩次，而且要靠前，不同頁(yè)面title要有所不同，description高度概括頁(yè)面內(nèi)容，長(zhǎng)度合適，不過(guò)分堆砌關(guān)鍵詞，不同頁(yè)面description有所不同，keywords列出重要關(guān)鍵詞即可
語(yǔ)義化的html代碼，符合W3C標(biāo)準(zhǔn)
提高網(wǎng)站速度
重要HTML代碼放前面
重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容
少用 iframe：搜索引擎不會(huì)抓取 iframe 中的內(nèi)容
非裝飾性圖片必須加 alt
HTML和XHTML的區(qū)別
XHTML：重寫了HTML規(guī)范，比HTML更嚴(yán)格
XHTML中所有的標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)簽；
XHTML所有標(biāo)簽的元素和屬性的名字都必須使用小寫；
所有的XML標(biāo)記都必須合理嵌套；
所有的屬性都必須用引號(hào)“”括起來(lái)；
把所有<和&特殊符號(hào)用編碼表示；
給所有屬性附一個(gè)值；
不要在注釋內(nèi)容中使用“--”；
圖片必須使用說(shuō)明文字。
文本超出部分顯示省略號(hào)
單行：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多顯示幾行
overflow: hidden;
前端頁(yè)面有哪三層構(gòu)成，分別是什么？作用是什么？
答案：分成：結(jié)構(gòu)層、表示層、行為層。
分別是：HTML、CSS、JavaScript
結(jié)構(gòu)層（structural layer）
由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段。”
表示層（presentation layer）
由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。
行為層（behaviorlayer）
負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是 Javascript 語(yǔ)言和 DOM 主宰的領(lǐng)域。
描述從輸入url到頁(yè)面展示的完整過(guò)程
網(wǎng)絡(luò)請(qǐng)求
解析
渲染
1)網(wǎng)絡(luò)請(qǐng)求:
DNS查詢（得到IP ) ，建立TCP連接（三次握手)
瀏覽器發(fā)起HTTP請(qǐng)求
收到請(qǐng)求響應(yīng)，得到HTML 源代碼
繼續(xù)請(qǐng)求靜態(tài)資源
解析HTML過(guò)程中，遇到靜態(tài)資源還會(huì)繼續(xù)發(fā)起網(wǎng)絡(luò)請(qǐng)求
JS CSS圖片視頻等
注意:靜態(tài)資源可能有強(qiáng)緩存，此時(shí)不必請(qǐng)求
2)解析:字符串->結(jié)構(gòu)化數(shù)據(jù):
HTML構(gòu)建 DOM樹
CSS構(gòu)建CSSOM樹( style tree )
兩者結(jié)合，形成render tree
題外話：優(yōu)化解析
CSS放在<head> 中，不要異步加載CSS
JS放在<body>最下面（或合理使用defer async )
<img>提前定義width height
3）渲染: Render Tree云制到頁(yè)面
計(jì)算各個(gè)DOM的尺寸、定位，最后繪制到頁(yè)面
遇到JS 可能會(huì)執(zhí)行（參考defer async )
異步CSS、圖片加載，可能會(huì)觸發(fā)重新渲染
無(wú)樣式內(nèi)容閃爍（FOUC）Flash of Unstyle Content
@import導(dǎo)入CSS文件會(huì)等到文檔加載完后再加載CSS樣式表。因此，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成之間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒有樣式的。
解決方法：使用link標(biāo)簽加載CSS樣式文件。因?yàn)閘ink是順序加載的，這樣頁(yè)面會(huì)等到CSS下載完之后再下載HTML文件，這樣先布局好，就不會(huì)出現(xiàn)FOUC問(wèn)題。
JavaScript的數(shù)據(jù)類型
值類型(基本類型)：字符串（String）、數(shù)字(Number)、布爾(Boolean)、對(duì)空（Null）、未定義（Undefined）、Symbol（獨(dú)一無(wú)二的值）。
引用數(shù)據(jù)類型：對(duì)象(Object)、數(shù)組(Array)、函數(shù)(Function)。注：Symbol 是 ES6 引入了一種新的原始數(shù)據(jù)類型，表示獨(dú)一無(wú)二的值。
基本數(shù)據(jù)類型與引用類型在存儲(chǔ)上有什么區(qū)別?
1.存儲(chǔ)位置不同:基本數(shù)據(jù)類型：以棧的形式存儲(chǔ), 保存與賦值指向數(shù)據(jù)本身, 用typeof 來(lái)判斷類型,存儲(chǔ)空間固定。引用類型：以堆的形式存儲(chǔ), 保存于賦值指向?qū)ο蟮囊粋€(gè)指針, 用instanceof 來(lái)判斷類型 , 存儲(chǔ)空間不固定。2.傳值方式不同：基本數(shù)據(jù)類型按值傳遞，無(wú)法改變一個(gè)基本數(shù)據(jù)類型的值引用類型按引用傳遞，應(yīng)用類型值可以改變
JS 中 == 和 === 區(qū)別是什么？
1、對(duì)于string,number等基礎(chǔ)類型，==和===有區(qū)別
1）不同類型間比較，==之比較“轉(zhuǎn)化成同一類型后的值”看“值”是否相等，===如果類型不同，其結(jié)果就是不等。
2）同類型比較，直接進(jìn)行“值”比較，兩者結(jié)果一樣。
2、對(duì)于Array,Object等高級(jí)類型，==和===沒有區(qū)別
進(jìn)行“指針地址”比較。
3、基礎(chǔ)類型與高級(jí)類型，==和===有區(qū)別
1）對(duì)于==，將高級(jí)轉(zhuǎn)化為基礎(chǔ)類型，進(jìn)行“值”比較。
2）因?yàn)轭愋筒煌?==結(jié)果為false。
閉包的概念？?jī)?yōu)缺點(diǎn)？使用場(chǎng)景？
閉包的概念：閉包就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)。
避免全局變量的污染
希望一個(gè)變量長(zhǎng)期存儲(chǔ)在內(nèi)存中（緩存變量）
缺點(diǎn)：
內(nèi)存泄露（消耗）
常駐內(nèi)存，增加內(nèi)存使用量
使用場(chǎng)景：封裝功能時(shí)(需要使用私有的屬性和方法)，函數(shù)防抖、函數(shù)節(jié)流、函數(shù)柯里化、給元素偽數(shù)組添加事件需要使用元素的索引值。
造成內(nèi)存泄露的原因
意外的全局變量(在函數(shù)內(nèi)部沒有使用var進(jìn)行聲明的變量)
console.log
閉包
對(duì)象的循環(huán)引用
未清除的計(jì)時(shí)器
DOM泄露(獲取到DOM節(jié)點(diǎn)之后，將DOM節(jié)點(diǎn)刪除，但是沒有手動(dòng)釋放變量，拿對(duì)應(yīng)的DOM節(jié)點(diǎn)在變量中還可以訪問(wèn)到，就會(huì)造成泄露)
javascript中this指的是誰(shuí)
this永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對(duì)象，而不是函數(shù)被創(chuàng)建時(shí)所在的對(duì)象。
普通的函數(shù)調(diào)用，函數(shù)被誰(shuí)調(diào)用，this就是誰(shuí)。
構(gòu)造函數(shù)的話，如果不用new操作符而直接調(diào)用，那即this指向window。用new操作符生成對(duì)象實(shí)例后，this就指向了新生成的對(duì)象。
匿名函數(shù)或不處于任何對(duì)象中的函數(shù)指向window 。
如果是call，apply等，指定的this是誰(shuí)，就是誰(shuí)。
繼承（6種方式）
原型鏈繼承
構(gòu)造函數(shù)繼承
組合繼承（原型鏈繼承+構(gòu)造函數(shù)繼承）
原型式繼承
寄生繼承
組合寄生繼承
document.onload和document.ready兩個(gè)事件的區(qū)別
頁(yè)面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。
Js的淺拷貝和深拷貝
淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針，而不復(fù)制對(duì)象本身，新舊對(duì)象還是共享同一塊內(nèi)存。但深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象，新對(duì)象跟原對(duì)象不共享內(nèi)存，修改新對(duì)象不會(huì)改到原對(duì)象。
什么是跨域？有什么方法解決跨域帶來(lái)的問(wèn)題？
跨域需要針對(duì)瀏覽器的同源策略來(lái)理解，同源策略指的是請(qǐng)求必須是同一個(gè)端口，同一個(gè)協(xié)議，同一個(gè)域名，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對(duì)方資源。
受瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對(duì)象。想要操作另一個(gè)源下的對(duì)象是就需要跨域。
常用解決方案：
跨域資源共享（CORS）
nginx代理跨域
nodejs中間件代理跨域
jsonp跨域
解釋什么是Json
(1)JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式。
(2)JSON 獨(dú)立于語(yǔ)言和平臺(tái)，JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。
(3)JSON的語(yǔ)法表示三種類型值，簡(jiǎn)單值(字符串，數(shù)值，布爾值，null),數(shù)組，對(duì)象
瀏覽器的線程
JS引擎線程：解釋執(zhí)行JS代碼、用戶輸入、網(wǎng)絡(luò)請(qǐng)求等
GUI線程（渲染線程）：繪制用戶界面、與JS主線程互斥
HTTP網(wǎng)絡(luò)請(qǐng)求線程：處理用戶的GET、POST等請(qǐng)求，等拿到返回結(jié)果后，將回調(diào)函數(shù)推入事件隊(duì)列
定時(shí)器觸發(fā)線程：setTimeout、setInterval等待時(shí)間結(jié)束后，將執(zhí)行函數(shù)推入事件隊(duì)列中
事件處理線程：將click、mouse、input等交互事件發(fā)生后，將事件處理函數(shù)推入事件隊(duì)列中
promise、async有什么區(qū)別
1、什么是Async/Await
async/await是寫異步代碼的新方式，使用的方式看起來(lái)像同步
async/await是基于Promise實(shí)現(xiàn)的，它不能用于普通的回調(diào)函數(shù)。
2、什么是promise
為了解決異步嵌套而產(chǎn)生，讓代碼更易于理解
區(qū)別：async/await讓代碼更像同步，進(jìn)一步優(yōu)化了代碼
介紹各種異步方案
（1）回調(diào)函數(shù)（異步回調(diào)）
回調(diào)是一個(gè)函數(shù)被作為一個(gè)參數(shù)傳遞到另一個(gè)函數(shù)里，在那個(gè)函數(shù)執(zhí)行完后再執(zhí)行。
（2）promise
promise對(duì)象是commonJS工作組提出的一種規(guī)范，一種模式，目的是為了異步編程提供統(tǒng)一接口。
（3）async/await
（4）事件監(jiān)聽
采用事件驅(qū)動(dòng)模式。任務(wù)的執(zhí)行不取決于代碼的順序，而取決于某個(gè)事件是否發(fā)生。
（5）發(fā)布/訂閱
XML與JSON的區(qū)別？
1) 數(shù)據(jù)體積方面。JSON相對(duì)于XML來(lái)講，數(shù)據(jù)的體積小，傳遞的速度更快些。
2) 數(shù)據(jù)交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。
3) 數(shù)據(jù)描述方面。JSON對(duì)數(shù)據(jù)的描述性比XML較差。
4) 傳輸速度方面。JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。
DOCTYPE的作用？嚴(yán)格模式和混雜模式的區(qū)別？
！DOCTYPE告訴瀏覽器以HTML5標(biāo)準(zhǔn)解析頁(yè)面，如果不寫，則進(jìn)入混雜模式
嚴(yán)格模式（標(biāo)準(zhǔn)模式）：以w3c標(biāo)準(zhǔn)解析代碼
混雜模式（怪異模式）：瀏覽器用自己的方式解析代碼，混雜模式通常模擬老式瀏覽器的行為，以防止老站點(diǎn)無(wú)法工作
HTML5 沒有 DTD ，因此也就沒有嚴(yán)格模式與混雜模式的區(qū)別，HTML5 有相對(duì)寬松的方法，實(shí)現(xiàn)時(shí)，已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容(HTML5 沒有嚴(yán)格和混雜之分)。
“use strict”的作用是什么？
use strict 出現(xiàn)在 JavaScript 代碼的頂部或函數(shù)的頂部，可以幫助你寫出更安全的 JavaScript 代碼。如果你錯(cuò)誤地創(chuàng)建了全局變量，它會(huì)通過(guò)拋出錯(cuò)誤的方式來(lái)警告你。
消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
提高編譯器效率，增加運(yùn)行速度；
為未來(lái)新版本的Javascript做好鋪墊。
"嚴(yán)格模式"體現(xiàn)了Javascript更合理、更安全、更嚴(yán)謹(jǐn)?shù)陌l(fā)展方向，包括IE 10在內(nèi)的主流瀏覽器，都已經(jīng)支持它，許多大項(xiàng)目已經(jīng)開始全面擁抱它。
另一方面，同樣的代碼，在"嚴(yán)格模式"中，可能會(huì)有不一樣的運(yùn)行結(jié)果；一些在"正常模式"下可以運(yùn)行的語(yǔ)句，在"嚴(yán)格模式"下將不能運(yùn)行。掌握這些內(nèi)容，有助于更細(xì)致深入地理解Javascript，讓你變成一個(gè)更好的程序員。
漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)，達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
Ajax使用
全稱 ： Asynchronous Javascript And XML 所謂異步，就是向服務(wù)器發(fā)送請(qǐng)求的時(shí)候，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時(shí)，頁(yè)面是不會(huì)發(fā)生整頁(yè)刷新的，提高了用戶體驗(yàn)。
什么是window對(duì)象? 什么是document對(duì)象?
window對(duì)象代表瀏覽器中打開的一個(gè)窗口。
document對(duì)象代表整個(gè)html文檔。
實(shí)際上，document對(duì)象是window對(duì)象的一個(gè)屬性。
null，undefined的區(qū)別？
null表示一個(gè)對(duì)象被定義了，但存放了空指針，轉(zhuǎn)換為數(shù)值時(shí)為0。
undefined表示聲明的變量未初始化，轉(zhuǎn)換為數(shù)值時(shí)為NAN。
typeof(null) -- object; typeof(undefined) -- undefined
new操作符具體干了什么呢?
創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2) 屬性和方法被加入到 this 引用的對(duì)象中。
3) 新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。
如果想獲取到頁(yè)面中所有的checkbox用什么方法？
document.getElementsByTagName(tagName);
從輸入 URL 到頁(yè)面展示，這中間發(fā)生了什么？
用戶輸入url并回車
瀏覽器進(jìn)程檢查url，組裝協(xié)議，構(gòu)成完整的url
瀏覽器進(jìn)程通過(guò)進(jìn)程間通信（IPC）把url請(qǐng)求發(fā)送給網(wǎng)絡(luò)進(jìn)程
網(wǎng)絡(luò)進(jìn)程接收到url請(qǐng)求后檢查本地緩存是否緩存了該請(qǐng)求資源，如果有則將該資源返回給瀏覽器進(jìn)程
如果沒有，網(wǎng)絡(luò)進(jìn)程向web服務(wù)器發(fā)起http請(qǐng)求（網(wǎng)絡(luò)請(qǐng)求）
網(wǎng)絡(luò)進(jìn)程解析響應(yīng)流程，如果是200，檢查響應(yīng)類型Content-Type，如果是字節(jié)流類型，則將該請(qǐng)求提交給下載管理器，該導(dǎo)航流程結(jié)束，不再進(jìn)行；如果是html則通知瀏覽器進(jìn)程準(zhǔn)備渲染進(jìn)程準(zhǔn)備進(jìn)行渲染
準(zhǔn)備渲染進(jìn)程；瀏覽器進(jìn)程檢查當(dāng)前url是否和之前打開的渲染進(jìn)程根域名是否相同，如果相同，則復(fù)用原來(lái)的進(jìn)程，如果不同，則開啟新的渲染進(jìn)程；
傳輸數(shù)據(jù)、更新狀態(tài)
http與https的區(qū)別
HTTP協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的，所以使用HTTP協(xié)議傳輸隱私信息非常的不安全，為了保證隱私信息的安全傳輸。網(wǎng)景公司設(shè)計(jì)了SSL協(xié)議進(jìn)行HTTP協(xié)議傳輸數(shù)據(jù)的加密，由此誕生了HTTPS。兩者的區(qū)別在于：
1.https協(xié)議需要用到ca申請(qǐng)證書，一般來(lái)說(shuō)是需要一定費(fèi)用的。
2.http協(xié)議是超文本傳輸協(xié)議，信息屬于明文傳輸，https是具有安全性的ssl加密傳輸協(xié)議
3.http和https使用的是兩種完全不同的連接方式，用的端口也不一樣，前者是80，后者是443
4.http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由HTTP+SSL協(xié)議共同構(gòu)建的可以加密，身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，安全性高很多。
微信小程序
請(qǐng)談?wù)勎⑿判〕绦蛑饕夸浐臀募淖饔茫?/p>
project.config.json：項(xiàng)目配置文件，用的最多的就是配置是否開啟https校驗(yàn)
App.js：設(shè)置一些全局的基礎(chǔ)數(shù)據(jù)等
App.json：底部tab，標(biāo)題欄和路由等設(shè)置
App.wxss：公共樣式，引入iconfont等
pages：里面包含一個(gè)個(gè)具體的頁(yè)面
index.json：配置當(dāng)前頁(yè)面標(biāo)題和引入組件
index.wxml：頁(yè)面結(jié)構(gòu)
index.wxss：頁(yè)面樣式表
index.js：頁(yè)面的邏輯，請(qǐng)求和數(shù)據(jù)處理
請(qǐng)談?wù)剋xml與標(biāo)準(zhǔn)的html的異同？
都是用來(lái)描述頁(yè)面的結(jié)構(gòu)
都由標(biāo)簽，屬性等構(gòu)成
標(biāo)簽名字不一樣，且小程序標(biāo)簽更少，單一標(biāo)簽更多
多了一些 wx:if 這樣的屬性以及{{}} 這樣的表達(dá)式
WXML僅能在微信小程序開發(fā)者工具中預(yù)覽，而HTML可以在瀏覽器內(nèi)預(yù)覽
組件封裝不同，WXML對(duì)組件進(jìn)行了重新封裝
小程序運(yùn)行在JS Core內(nèi)，沒有DOM樹和window對(duì)象，小程序中無(wú)法使用window對(duì)象和document對(duì)象。
請(qǐng)談?wù)刉XSS和CSS的異同？
都是用來(lái)描述頁(yè)面的樣子
WXSS具有CSS大部分的特性，也做了一些擴(kuò)充和修改
WXSS新增了尺寸單位，WXSS在底層支持新的尺寸單位rpx
WXSS僅支持部分CSS選擇器
WXSS提供全局樣式與局部樣式
有沒有封裝過(guò)微信小程序的數(shù)據(jù)請(qǐng)求，是怎么封裝微信小程序的數(shù)據(jù)請(qǐng)求的？
在根目錄下創(chuàng)建util目錄及api.js文件和apiConfig.js文件
在apiConfig.js封裝基礎(chǔ)的get，post和put，upload等請(qǐng)求方法，設(shè)置請(qǐng)求體，帶上token和異常處理等
在api中引入apiConfig.js封裝好的請(qǐng)求方法.根據(jù)頁(yè)面數(shù)據(jù)請(qǐng)求的urls，設(shè)置對(duì)應(yīng)的方法并導(dǎo)出
在具體的頁(yè)面中導(dǎo)入或
將所有的接口放在統(tǒng)一的js文件中并導(dǎo)出
在app.js中創(chuàng)建封裝請(qǐng)求數(shù)據(jù)的方法
在子頁(yè)面中調(diào)用封裝的請(qǐng)求數(shù)據(jù)
小程序頁(yè)面之間有哪些（傳值）傳遞數(shù)據(jù)的方法？
使用全局遍歷實(shí)現(xiàn)數(shù)據(jù)傳遞
頁(yè)面跳轉(zhuǎn)重定向時(shí)，使用url帶參數(shù)傳遞數(shù)據(jù)
使用組件模板 template傳遞參數(shù)
使用緩存?zhèn)鬟f參數(shù)
使用數(shù)據(jù)庫(kù)傳遞參數(shù)
給html元素添加data-*屬性來(lái)傳遞值，然后通過(guò)e.currentTarget.dataset或onload的param參數(shù)獲取（data- 名稱不能有大寫字母，不可以存放對(duì)象）
設(shè)置id 的方法標(biāo)識(shí)來(lái)傳值，通過(guò)e.currentTarget.id獲取設(shè)置的id值，然后通過(guò)設(shè)置全局對(duì)象的方式來(lái)傳遞數(shù)據(jù)
在navigator中添加參數(shù)數(shù)值
請(qǐng)談?wù)勑〕绦虻纳芷诤瘮?shù)
onLoad()頁(yè)面加載時(shí)觸發(fā)，只會(huì)調(diào)用一次，可獲取當(dāng)前頁(yè)面路徑中的參數(shù)
onShow()頁(yè)面顯示/切入前臺(tái)時(shí)候觸發(fā)，一般用來(lái)發(fā)送數(shù)據(jù)請(qǐng)求
onReady()頁(yè)面初次渲染完成時(shí)觸發(fā)，只會(huì)調(diào)用一次，代表頁(yè)面已可和視圖層進(jìn)行交互
onHide()頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)，如底部tab切換到其他頁(yè)面或小程序切入后臺(tái)等
onUnload()頁(yè)面卸載時(shí)觸發(fā)，如redirectTO或navigateBack到其他頁(yè)面時(shí)
分析微信小程序的優(yōu)劣勢(shì)？
優(yōu)勢(shì)：容易上手，基礎(chǔ)組件庫(kù)比較全，基本不需要考慮兼容問(wèn)題
開發(fā)文檔比較完善，開發(fā)社區(qū)比較活躍，支持插件式開發(fā)
良好的戶體驗(yàn)，無(wú)需下載，通過(guò)搜索和掃一掃就可以打開，打開速度快，安卓上可以添加到桌面，與原生APP差不多
開發(fā)成本比APP要低
為用戶提供良好的保障（小程序發(fā)布，嚴(yán)格是審查流程）
劣勢(shì)：限制較多，頁(yè)面大小不能超過(guò)1M，不能打開超過(guò)5個(gè)層級(jí)的頁(yè)面
樣式單一，部分組件已經(jīng)是成型的，樣式不可修改，例如：幻燈片，導(dǎo)航
推廣面窄，不能分享朋友圈，只能通過(guò)分享給朋友，附加小程序推廣
依托與微信，無(wú)法開發(fā)后臺(tái)管理功能
后臺(tái)調(diào)試麻煩，因?yàn)閍pi接口必須https請(qǐng)求且公網(wǎng)地址
真機(jī)測(cè)試，個(gè)別安卓和蘋果表現(xiàn)迥異，例如安卓的定位功能加載很慢
微信小程序和H5的區(qū)別？
運(yùn)行環(huán)境不同（小程序在微信運(yùn)行，h5在瀏覽器運(yùn)行）
開發(fā)成本不同（h5需要兼容不同的瀏覽器）
獲取系統(tǒng)權(quán)限不同（系統(tǒng)級(jí)權(quán)限可以和小程序無(wú)縫銜接）
應(yīng)用在生成環(huán)境的運(yùn)行速度流程（h5需不斷對(duì)項(xiàng)目?jī)?yōu)化來(lái)提高用戶體驗(yàn)）
使用webview直接加載要注意那些事項(xiàng)？
必須要在小程序后臺(tái)使用管理員添加業(yè)務(wù)域名
h5頁(yè)面跳轉(zhuǎn)至小程序的腳步必須是1.3.1以上
微信分享只可以是小程序的主名稱，如要自定義分享內(nèi)容，需小程序版本在1.7.1以上
h5的支付不可以是微信公眾號(hào)的appid，必須是小程序的appid，而且用戶的openid也必須是用戶和小程序的
之前是如何管理小程序緩存的getstorage，setstorage？
簡(jiǎn)述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 區(qū)別
wx.navigateTo() : 保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面
wx.redirectTo() : 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面
wx.switchTab() : 跳轉(zhuǎn)到 TabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
wx.navigateBack() : 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層
wx.reLaunch() : 關(guān)閉所有頁(yè)面，打開到應(yīng)用的某個(gè)頁(yè)面。
小程序運(yùn)行機(jī)制
熱啟動(dòng) ：假如用戶已經(jīng)打開了某個(gè)小程序，在一定時(shí)間內(nèi)再次打開小程序的話，這個(gè)時(shí)候我們就不再需要重新啟動(dòng)了，這需要把我們的后臺(tái)打開的小程序切換到前臺(tái)來(lái)使用。
冷啟動(dòng)：用戶首次打開小程序或被微信主動(dòng)銷毀再次打開的情況，此時(shí)小程序需要重新加載啟動(dòng)。
小程序什么時(shí)候會(huì)主動(dòng)銷毀？
小程序在進(jìn)入后臺(tái)之后，客戶端會(huì)幫我們?cè)谝欢〞r(shí)間內(nèi)維持我們的一個(gè)狀態(tài)，超過(guò)五分鐘后，會(huì)被微信主動(dòng)銷毀.
官方也沒有明確說(shuō)明 什么時(shí)候銷毀， 在不同機(jī)型表現(xiàn)也不一樣，
2019年開發(fā)時(shí)：時(shí)間官方文檔沒有說(shuō)明，但是經(jīng)過(guò)詢問(wèn)一般指5分鐘內(nèi)
2020年開發(fā)時(shí)：時(shí)間官方文檔沒有說(shuō)明，實(shí)測(cè)安卓沒有固定時(shí)間，內(nèi)存足夠情況下，有時(shí)候一天了還在，有時(shí)候幾分鐘就沒了。
bindtap和catchtap的區(qū)別是什么
相同點(diǎn)：首先他們都是作為點(diǎn)擊事件函數(shù)，就是點(diǎn)擊時(shí)觸發(fā)。在這個(gè)作用上他們是一樣的，可以不做區(qū)分
不同點(diǎn)：他們的不同點(diǎn)主要是bindtap是不會(huì)阻止冒泡事件的，catchtap是阻值冒泡的
小程序調(diào)用后臺(tái)接口遇到哪些問(wèn)題？
1.數(shù)據(jù)的大小有限制，超過(guò)范圍會(huì)直接導(dǎo)致整個(gè)小程序崩潰，除非重啟小程序；
2.小程序不可以直接渲染文章內(nèi)容頁(yè)這類型的html文本內(nèi)容，若需顯示要借住插件，但插件渲染會(huì)導(dǎo)致頁(yè)面加載變慢，所以最好在后臺(tái)對(duì)文章內(nèi)容的html進(jìn)行過(guò)濾，后臺(tái)直接處理批量替換p標(biāo)簽div標(biāo)簽為view標(biāo)簽，然后其它的標(biāo)簽讓插件來(lái)做，減輕前端的時(shí)間。
小程序組件生命周期
created 組件實(shí)例化，但節(jié)點(diǎn)樹還未導(dǎo)入，因此這時(shí)不能用setData
attached 節(jié)點(diǎn)樹完成，可以用setData渲染節(jié)點(diǎn)，但無(wú)法操作節(jié)點(diǎn)
ready(不是onReady) 組件布局完成，這時(shí)可以獲取節(jié)點(diǎn)信息，也可以操作節(jié)點(diǎn)
moved 組件實(shí)例被移動(dòng)到樹的另一個(gè)位置
detached 組件實(shí)例從節(jié)點(diǎn)樹中移除
ReactJS
React組件分為哪兩種，各有什么特點(diǎn)？
功能組件：這些類型的組件沒有自己的狀態(tài)，只包含渲染方法，因此也被稱為無(wú)狀態(tài)組件。他們可能從其他組件中獲取數(shù)據(jù)作為道具（屬性）。
類組件：這些類型的組件可以保存和管理自己的狀態(tài)，并有一個(gè)單獨(dú)的渲染方法來(lái)在屏幕上返回 JSX。它們也被稱為有狀態(tài)組件，因?yàn)樗鼈兛梢跃哂袪顟B(tài)。
React中如何更新組件的狀態(tài)？
Setstate
React的生命周期包含哪些？
· constructor(props)：初始化 props 和 State。
· componentWillMount()：一旦屬性被獲取并且也初始化了 State，該方法將會(huì)被觸發(fā)。該方法是在 DOM 被渲染之前觸發(fā)的，并且可以用來(lái)初始化第三方腳本庫(kù)、啟動(dòng)動(dòng)畫、請(qǐng)求數(shù)據(jù)，以及其他可能需要在組件被渲染之前執(zhí)行的額外步驟。還可以在該方法中觸發(fā) setState 方法，在組件被初次渲染之前修改組件的 State。
在組件被渲染完畢之前調(diào)用 setState 方法將不會(huì)啟動(dòng)更新生命周期。在組件渲染完畢之后調(diào)用 setState 方法就會(huì)啟動(dòng)更新生命周期。
如果用戶在 componentWillMount 方法中定義的回調(diào)函數(shù)內(nèi)調(diào)用了 setState 方法，那么它將會(huì)在組件被渲染完成之后被觸發(fā)，并且會(huì)啟動(dòng)更新生命周期。
· render()：只要父組件 render 被調(diào)用，其所有子組件的 render 都會(huì)被調(diào)用
· componentDidMount()：組件被渲染完畢之后觸發(fā)，可以獲取到 DOM。
· componentWillUnmount()：組件被卸載之前觸發(fā)，在這里可以清除一些后臺(tái)進(jìn)程。
列舉常見的npm命令
Npm命令中install全局安裝使用哪個(gè)參數(shù)？
React與vue有什么區(qū)別？
· HTML 和 CSS
在 react 中，everything is JavaScript，不僅是 html 可以用 jsx 表示，連 css 也有 js 的解決方案。
Vue 的整體思想是擁抱經(jīng)典的 Web 技術(shù)，并在其上進(jìn)行擴(kuò)展。使用 html，css 和 js 來(lái)構(gòu)建模板。
在這個(gè)方面我覺得 vue 是在適應(yīng)開發(fā)者，而 react 想要改變開發(fā)者。
同時(shí)，在組件作用域內(nèi)的 css 上，react 是使用的 css-in-js 的解決方案或者是 css modules。而 vue 使用 scoped 來(lái)控制 css
· 規(guī)模
vue 的路由管理和狀態(tài)管理由官方維護(hù)，而 react 則是把這些問(wèn)題交給社區(qū)，創(chuàng)建了一個(gè)更為分散的生態(tài)系統(tǒng)，因此react的生態(tài)系統(tǒng)相對(duì)于 vue 更加繁榮。
· 原生渲染
由于兩者都是使用的虛擬 dom 技術(shù)，因此都可以構(gòu)建原生的安卓或者 ios 應(yīng)用，例如 react-native 和 weex
Uni-app
Uniapp中的本地緩存
同步存儲(chǔ)：uni.setStorageSync，獲取：uni.getStorageSync
異步存儲(chǔ)：uni.setStorage，獲取：uni.getStorage
詳細(xì)描述一下Uniapp的工作原理，它是如何做到跨平臺(tái)開發(fā)的
Uniapp的工作原理是將Vue.js的模板語(yǔ)法轉(zhuǎn)換為各個(gè)平臺(tái)所支持的原生組件，再通過(guò)引擎的渲染器將其渲染到各個(gè)平臺(tái)上。同時(shí)，Uniapp還提供了平臺(tái)API以及對(duì)各平臺(tái)的配置文件支持，使得開發(fā)者能夠方便地在同一份代碼下實(shí)現(xiàn)對(duì)不同平臺(tái)的適配。
在Uniapp中，使用Vue.js的語(yǔ)法開發(fā)，同時(shí)通過(guò)Uniapp所提供的各平臺(tái)API和配置文件適配各種平臺(tái)的差異即可實(shí)現(xiàn)跨平臺(tái)開發(fā)。例如，在編寫頁(yè)面的時(shí)候，可使用Uniapp提供的原生組件替代HTML標(biāo)簽，然后在編寫樣式時(shí)，可通過(guò)編寫針對(duì)各平臺(tái)的樣式代碼，使樣式在各平臺(tái)下呈現(xiàn)一致。
Uniapp 中的跳轉(zhuǎn)方式
標(biāo)簽法：<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳轉(zhuǎn)到關(guān)于頁(yè)面</button>
</navigator>
跳轉(zhuǎn)tabBar頁(yè)面加open-type="switchTab"
頁(yè)面跳轉(zhuǎn)uni.navigateTo({url:})保留當(dāng)前頁(yè)面，只能打開非 tabBar 頁(yè)面。uni.redirectTo({})關(guān)閉卸載當(dāng)前頁(yè)面，只能打開非 tabBar 頁(yè)面
tabBar跳轉(zhuǎn)uni.switchTab關(guān)閉所有非tabbar頁(yè)面， 只能打開 tabBar 頁(yè)面，不能url傳參
uni.reLaunch({})關(guān)閉卸載所有頁(yè)面，可以打開任意頁(yè)面
應(yīng)用的生命周期
onLaunch——當(dāng)uni-app 初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次）
onShow——當(dāng) uni-app 啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
onHide——當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái)
onError——當(dāng) uni-app 報(bào)錯(cuò)時(shí)觸發(fā)
onUniNViewMessage——對(duì) nvue 頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽，可參考 nvue 向 vue 通訊
onUnhandledRejection——對(duì)未處理的 Promise 拒絕事件監(jiān)聽函數(shù)（2.8.1+）
onPageNotFound——頁(yè)面不存在監(jiān)聽函數(shù)
onThemeChange——監(jiān)聽系統(tǒng)主題變化
頁(yè)面的生命周期
onInit——監(jiān)聽頁(yè)面初始化，其參數(shù)同 onLoad 參數(shù)，為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁(yè)面?zhèn)鲄ⅲ|發(fā)時(shí)機(jī)早于 onLoad
onLoad——監(jiān)聽頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁(yè)面?zhèn)鲄ⅲ瑓⒖际纠?/p>
onShow——監(jiān)聽頁(yè)面顯示。頁(yè)面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面
onReady——監(jiān)聽頁(yè)面初次渲染完成。注意如果渲染速度快，會(huì)在頁(yè)面進(jìn)入動(dòng)畫完成前觸發(fā)
onHide——監(jiān)聽頁(yè)面隱藏
onUnload——監(jiān)聽頁(yè)面卸載
onResize——監(jiān)聽窗口尺寸變化
組件的生命周期
beforeCreate——在實(shí)例初始化之后被調(diào)用。
created——在實(shí)例創(chuàng)建完成后被立即調(diào)用。
beforeMount——在掛載開始之前被調(diào)用。
mounted——掛載到實(shí)例上去之后調(diào)用。詳見 注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔
beforeUpdate——數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。
updated——由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。
beforeDestroy——實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroyed——Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
uni-app的用戶體驗(yàn)如何
使用uni-app開發(fā)的微信小程序，和直接開發(fā)微信小程序相比性能沒有明顯差別，因?yàn)閡ni-app輸出到微信時(shí)也是編譯為wxml格式。uni-app編譯到微信使用的是mpvue框架，這個(gè)是業(yè)內(nèi)廣泛使用的成熟框架。
uni-app打包成App后的體驗(yàn)和微信小程序一樣好，在某些場(chǎng)景下更好；微信小程序的Hybrid應(yīng)用框架是業(yè)內(nèi)體驗(yàn)上的標(biāo)桿，實(shí)踐證明這種體驗(yàn)足以承載一線互聯(lián)網(wǎng)開發(fā)商獲得上億用戶。
uni-app內(nèi)置預(yù)載機(jī)制，加載新頁(yè)面速度極快，可實(shí)現(xiàn)無(wú)白屏極速渲染。
uni-app在App端還支持weex原生渲染（nvue），左右拖動(dòng)長(zhǎng)列表等復(fù)雜場(chǎng)景依然可實(shí)現(xiàn)高流暢性。
在Uniapp中，如何使用原生SDK以及插件
在Uniapp中，可通過(guò)uni-app plus的方式來(lái)集成原生SDK和插件。具體實(shí)現(xiàn)方式是，在manifest.json文件中添加對(duì)應(yīng)的插件設(shè)置，并在代碼中調(diào)用相關(guān)API使用內(nèi)置的SDK和插件。15. 描述一下在Uniapp中如何實(shí)現(xiàn)動(dòng)態(tài)路由。在Uniapp中，可通過(guò)vue-router實(shí)現(xiàn)動(dòng)態(tài)路由。具體實(shí)現(xiàn)方式是，在定義路由時(shí)，使用動(dòng)態(tài)路由參數(shù)設(shè)置路由的路徑，然后在組件中通過(guò)$route.params來(lái)獲取路由參數(shù)，以便進(jìn)行頁(yè)面的動(dòng)態(tài)渲染。
實(shí)上，通過(guò)使用閉包，我們可以做很多事情。比如模擬面向?qū)ο蟮拇a風(fēng)格;更優(yōu)雅，更簡(jiǎn)潔的表達(dá)出代碼;在某些方面提升代碼的執(zhí)行效率，同時(shí)避免對(duì)命名空間的污染，最重要的是可以從一個(gè)域中取出原本訪問(wèn)不到的變量去使用。
函數(shù)的作用域：
1.變量的聲明會(huì)提前。
2.全局變量和局部變量。
3.函數(shù)作用域的生命周期。
變量的聲明
tt='ee';
function b(){
function test(){
alert(tt);
var tt='ff';
}
test()
}
b()
第一段函數(shù)返回的是一個(gè)undefined， 因?yàn)樽兞康穆暶鲿?huì)提前相當(dāng)于
var tt='123'
function test(){
var tt;
alert(tt);
tt='ff';
}
2.
tt='ee';
function b(){
function test(){
alert(tt);
/*var tt='ff';*/
}
test()
}
b()
變量作用域
1.function outFn(){
function innerFn(){
var inner=0;
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
//每當(dāng)這個(gè)內(nèi)部函數(shù)被調(diào)用的時(shí)候，都會(huì)重新生命一個(gè)inner變量，然后讓這個(gè)變量自增。
2.
var inner=0;
function outFn(){
function innerFn(){
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
//每當(dāng)內(nèi)部函數(shù)被調(diào)用時(shí)，都會(huì)讓全局變量inner自增。
如果讓這個(gè)函數(shù)變成父元素的局部變量，會(huì)是什么結(jié)果?
3.
function outFn(){
var inner=0;
function innerFn(){
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
一段概念：
這次的結(jié)果可能會(huì)出人預(yù)料，因?yàn)楫?dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用的時(shí)候，就創(chuàng)建了改內(nèi)部函數(shù)的一個(gè)閉包，這種情況下我們稱既不是局部變量也不是其參數(shù)的變量為自由變量，稱內(nèi)部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上將，如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量，相當(dāng)于授權(quán)該變量能夠被延遲使用。因此，當(dāng)外部函數(shù)調(diào)用完成后，這些變量的內(nèi)存不會(huì)被釋放，因?yàn)殚]包仍然需要使用它們。
閉包
一句話理解閉包： JavaScript中的函數(shù)運(yùn)行在它們被定義的作用域里，而不是它們被執(zhí)行的作用域里。
一個(gè)故事理解閉包
我的年齡是秘密，你想知道。
但是每次我都含糊其辭的對(duì)你說(shuō)undefined;
為了防止我自己也忘記或搞錯(cuò)自己的年齡，我辦了一張身份證，上面記錄我的年齡信息，藏在我家里。
你知道了這件事，為了得到我的年齡，決定對(duì)我投其所好，
于是你送我一只逗比間諜貓。
作為感謝我給了你一把我家的鑰匙，方便你有空來(lái)看貓。
這只貓實(shí)在太神奇了，每次都能找到我的身份證，并把信息傳遞給你。
于是你每次想知道我的年齡的時(shí)候就來(lái)看貓，
然后間諜貓每次都能把我的最新的年齡信息反饋給你。
var day=0;
var timer=setInterval("dayChanges()",(24*60*60*1000)); //定時(shí)器，
function dayChanges(){
day++;
} //每過(guò)24小時(shí) 次函數(shù)運(yùn)行一次，我的年齡又多了一天
//------------ 下面的代碼就是一個(gè)比較常見的閉包。
function isMyHome(){ //我家
var myAge=0; //我的身份證信息
if(day%365==0){ //我的年齡變化
myAge+=1;
}
function myHomeKey(){ // 我家鑰匙
return myAge; //return 就是間諜貓
}
return myHomeKey; //給你我家的鑰匙。
}
var key=isMyHome(); //你拿到我家鑰匙
var you=key(); //得到年齡。
匿名函數(shù)：
(functoin( ){
alert( 2 )
})()
特性：1.自調(diào)用
2.參數(shù)傳入方式;
閉包的使用方法：
1.
function outFn(){
console.log('我是外部函數(shù)');
function innerFn(){
console.log('我是內(nèi)部函數(shù)');
}
innerFn()
}
outFn();
//可以在外部函數(shù)調(diào)用到內(nèi)部函數(shù)，但是并不能在外部調(diào)用內(nèi)部函數(shù)。這種技術(shù)適合用于小型，單用途的函數(shù)。
2.在任何地方調(diào)用內(nèi)部函數(shù)，通過(guò)一個(gè)全局變量可以訪問(wèn)到內(nèi)部函數(shù);
var global;
function outFn(){
console.log('我是外部函數(shù)')
function innerFn(){
console.log('我是內(nèi)部函數(shù)')
}
global=innerFn;
}
outFn();
global();
3.一個(gè)最簡(jiǎn)單的閉包，可以迅速調(diào)用，并且不會(huì)污染全局變量。
var data = {
table : [1,2,3,4,5],
tree : {}
};
(function(data){
alert(data.table)
//build dm.tree
})(data);
4.可以通過(guò)對(duì)變量進(jìn)行封裝實(shí)現(xiàn)閉包。
var obj=(function(){
var name='找不見的名字';
return {
getName:function(){
return name;
},
setName:function(newName){
return newName
}
}
})()
obj.getName()
高階函數(shù)英文叫Higher-order function。那么什么是高階函數(shù)?
JavaScript的函數(shù)其實(shí)都指向某個(gè)變量。既然變量可以指向函數(shù)，函數(shù)的參數(shù)能接收變量，那么一個(gè)函數(shù)就可以接收另一個(gè)函數(shù)作為參數(shù)，這種函數(shù)就稱之為高階函數(shù)。
一個(gè)最簡(jiǎn)單的高階函數(shù)：
function add(x, y, f) {
return f(x) + f(y);
}
當(dāng)我們調(diào)用add(-5, 6, Math.abs)時(shí)，參數(shù)x，y和f分別接收-5，6和函數(shù)Math.abs，根據(jù)函數(shù)定義，我們可以推導(dǎo)計(jì)算過(guò)程為：
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;
用代碼驗(yàn)證一下：
add(-5, 6, Math.abs); // 11
編寫高階函數(shù)，就是讓函數(shù)的參數(shù)能夠接收別的函數(shù)
1. 高階函數(shù)map
舉例說(shuō)明，比如我們有一個(gè)函數(shù)f(x)=x2，要把這個(gè)函數(shù)作用在一個(gè)數(shù)組[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map實(shí)現(xiàn)如下：
由于map()方法定義在JavaScript的Array中，我們調(diào)用Array的map()方法，傳入我們自己的函數(shù)，就得到了一個(gè)新的Array作為結(jié)果：
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
map()傳入的參數(shù)是pow，即函數(shù)對(duì)象本身。
你可能會(huì)想，不需要map()，寫一個(gè)循環(huán)，也可以計(jì)算出結(jié)果：
var f = function (x) {
return x * x;
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i
result.push(f(arr[i]));
}
的確可以，但是，從上面的循環(huán)代碼，我們無(wú)法一眼看明白“把f(x)作用在Array的每一個(gè)元素并把結(jié)果生成一個(gè)新的Array”。
所以，map()作為高階函數(shù)，事實(shí)上它把運(yùn)算規(guī)則抽象了，因此，我們不但可以計(jì)算簡(jiǎn)單的f(x)=x2，還可以計(jì)算任意復(fù)雜的函數(shù)，比如，把Array的所有數(shù)字轉(zhuǎn)為字符串：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
只需要一行代碼。
2. 高階函數(shù)reduce
再看reduce的用法。Array的reduce()把一個(gè)函數(shù)作用在這個(gè)Array的[x1, x2, x3...]上，這個(gè)函數(shù)必須接收兩個(gè)參數(shù)，reduce()把結(jié)果繼續(xù)和序列的下一個(gè)元素做累積計(jì)算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
比方說(shuō)對(duì)一個(gè)Array求和，就可以用reduce實(shí)現(xiàn)：
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
練習(xí)：利用reduce()求積。
練習(xí)：把[1, 3, 5, 7, 9]變換成整數(shù)13579，用reduce()。
練習(xí)：請(qǐng)用map()把用戶輸入的不規(guī)范的英文名字，變?yōu)槭鬃帜复髮懀渌懙囊?guī)范名字。輸入：['adam', 'LISA', 'barT']，輸出：['Adam', 'Lisa', 'Bart']。
3. 高階函數(shù)filter
filter也是一個(gè)常用的操作，它用于把Array的某些元素過(guò)濾掉，然后返回剩下的元素。
和map()類似，Array的filter()也接收一個(gè)函數(shù)。和map()不同的是，filter()把傳入的函數(shù)依次作用于每個(gè)元素，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
例如，在一個(gè)Array中，刪掉偶數(shù)，只保留奇數(shù)，可以這么寫：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
把一個(gè)Array中的空字符串刪掉，可以這么寫：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']
可見用filter()這個(gè)高階函數(shù)，關(guān)鍵在于正確實(shí)現(xiàn)一個(gè)“篩選”函數(shù)。
練習(xí)：請(qǐng)使用filter()篩選出一個(gè)數(shù)組中所有的素?cái)?shù)
函數(shù)作為返回值
高階函數(shù)除了可以接受函數(shù)作為參數(shù)外，還可以把函數(shù)作為結(jié)果值返回。
我們來(lái)實(shí)現(xiàn)一個(gè)對(duì)Array的求和。通常情況下，求和的函數(shù)是這樣定義的：
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); // 15
但是，如果不需要立刻求和，而是在后面的代碼中，根據(jù)需要再計(jì)算怎么辦?可以不返回求和的結(jié)果，而是返回求和的函數(shù)!
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
當(dāng)我們調(diào)用lazy_sum()時(shí)，返回的并不是求和結(jié)果，而是求和函數(shù)：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
調(diào)用函數(shù)f時(shí)，才真正計(jì)算求和的結(jié)果：
f(); // 15
在這個(gè)例子中，我們?cè)诤瘮?shù)lazy_sum中又定義了函數(shù)sum，并且，內(nèi)部函數(shù)sum可以引用外部函數(shù)lazy_sum的參數(shù)和局部變量，當(dāng)lazy_sum返回函數(shù)sum時(shí)，相關(guān)參數(shù)和變量都保存在返回的函數(shù)中，這種稱為“閉包(Closure)”的程序結(jié)構(gòu)擁有極大的威力。
請(qǐng)?jiān)僮⒁庖稽c(diǎn)，當(dāng)我們調(diào)用lazy_sum()時(shí)，每次調(diào)用都會(huì)返回一個(gè)新的函數(shù)，即使傳入相同的參數(shù)：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
f1()和f2()的調(diào)用結(jié)果互不影響。
閉包
注意到返回的函數(shù)在其定義內(nèi)部引用了局部變量arr，所以，當(dāng)一個(gè)函數(shù)返回了一個(gè)函數(shù)后，其內(nèi)部的局部變量還被新函數(shù)引用，所以，閉包用起來(lái)簡(jiǎn)單，實(shí)現(xiàn)起來(lái)可不容易。
還有一個(gè)需要注意的問(wèn)題是，返回的函數(shù)并沒有立刻執(zhí)行，而是直到調(diào)用了f()才執(zhí)行。我們來(lái)看一個(gè)例子：
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
在上面的例子中，每次循環(huán)，都創(chuàng)建了一個(gè)新的函數(shù)，然后，把創(chuàng)建的3個(gè)函數(shù)都添加到一個(gè)Array中返回了。
你可能認(rèn)為調(diào)用f1()，f2()和f3()結(jié)果應(yīng)該是1，4，9，但實(shí)際結(jié)果是：
f1(); // 16
f2(); // 16
f3(); // 16
全部都是16!原因就在于返回的函數(shù)引用了變量i，但它并非立刻執(zhí)行。等到3個(gè)函數(shù)都返回時(shí)，它們所引用的變量i已經(jīng)變成了4，因此最終結(jié)果為16。
返回閉包時(shí)牢記的一點(diǎn)就是：返回函數(shù)不要引用任何循環(huán)變量，或者后續(xù)會(huì)發(fā)生變化的變量。
如果一定要引用循環(huán)變量怎么辦?方法是再創(chuàng)建一個(gè)函數(shù)，用該函數(shù)的參數(shù)綁定循環(huán)變量當(dāng)前的值，無(wú)論該循環(huán)變量后續(xù)如何更改，已綁定到函數(shù)參數(shù)的值不變：
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function () {
return n * n;
}
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
注意這里用了一個(gè)“創(chuàng)建一個(gè)匿名函數(shù)并立刻執(zhí)行”的語(yǔ)法：
(function (x) {
return x * x;
})(3); // 9
理論上講，創(chuàng)建一個(gè)匿名函數(shù)并立刻執(zhí)行可以這么寫：
function (x) { return x * x } (3);
但是由于JavaScript語(yǔ)法解析的問(wèn)題，會(huì)報(bào)SyntaxError錯(cuò)誤，因此需要用括號(hào)把整個(gè)函數(shù)定義括起來(lái)：
(function (x) { return x * x }) (3);
通常，一個(gè)立即執(zhí)行的匿名函數(shù)可以把函數(shù)體拆開，一般這么寫：
(function (x) {
return x * x;
})(3);
說(shuō)了這么多，難道閉包就是為了返回一個(gè)函數(shù)然后延遲執(zhí)行嗎?
當(dāng)然不是!閉包有非常強(qiáng)大的功能。舉個(gè)栗子：
在面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言里，比如Java和C++，要在對(duì)象內(nèi)部封裝一個(gè)私有變量，可以用private修飾一個(gè)成員變量。
在沒有class機(jī)制，只有函數(shù)的語(yǔ)言里，借助閉包，同樣可以封裝一個(gè)私有變量。我們用JavaScript創(chuàng)建一個(gè)計(jì)數(shù)器：
'use strict';
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
它用起來(lái)像這樣：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
在返回的對(duì)象中，實(shí)現(xiàn)了一個(gè)閉包，該閉包攜帶了局部變量x，并且，從外部代碼根本無(wú)法訪問(wèn)到變量x。換句話說(shuō)，閉包就是攜帶狀態(tài)的函數(shù)，并且它的狀態(tài)可以完全對(duì)外隱藏起來(lái)。
閉包還可以把多參數(shù)的函數(shù)變成單參數(shù)的函數(shù)。例如，要計(jì)算xy可以用Math.pow(x, y)函數(shù)，不過(guò)考慮到經(jīng)常計(jì)算x2或x3，我們可以利用閉包創(chuàng)建新的函數(shù)pow2和pow3：
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 創(chuàng)建兩個(gè)新函數(shù):
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(5); // 25
pow3(7); // 343
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
