摘要：加快整體響應(yīng)速度。步驟，用戶在商戶中選擇商品，提交訂單，選擇微信支付。微信支付要求商戶訂單號(hào)保持唯一性，商戶后臺(tái)收到用戶支付單，調(diào)用微信支付統(tǒng)一下單接口。，與團(tuán)隊(duì)成員，，產(chǎn)品經(jīng)理的溝通。

一：頁面性能優(yōu)化：
1，減少http請求，資源的合并與壓縮，恰當(dāng)?shù)木彺?，不濫用float，雪碧圖代替圖片，異步加載。減少dom節(jié)點(diǎn)，
二： 數(shù)組的深淺拷貝
1，假設(shè)B復(fù)制了A，當(dāng)修改A時(shí)，看B是否會(huì)發(fā)生變化，
如果B也跟著變了，說明這是淺拷貝，。如果B沒變，那就是深拷貝。
2，基本數(shù)據(jù)類型有哪些，number,string,boolean,null,undefined五類。
引用數(shù)據(jù)類型：對(duì)象，數(shù)組，函數(shù)。
3，如何深拷貝？
借用JSON對(duì)象的parse和stringify。
借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )；
let a=[0,1,[2,3],4],

b=$.extend(true,[],a);

a[0]=1;
a2=1;
console.log(a,b);
4，使用場景？
但多人開發(fā)情況下，你是沒辦法明確這堆數(shù)據(jù)是否有其它功能也需要使用， 直接修改可能會(huì)造成隱性問題，深拷貝能幫你更安全安心的去操作數(shù)據(jù)，
根據(jù)實(shí)際情況來使用深拷貝，

三： 前后端分離的原理
1，原始人時(shí)代：
發(fā)布，需要用eclipse把代碼打成一個(gè)war包，然后把這個(gè)war包發(fā)布到生產(chǎn)環(huán)境下的web容器里。這時(shí)候前后端代碼都在這個(gè)war包里，html，js，css，各種第三方庫等。這樣服務(wù)器壓力會(huì)很大，頁面中的所有請求都要通過這個(gè)服務(wù)器，如果同時(shí)很多人訪問這個(gè)網(wǎng)站速度就會(huì)很慢。一旦服務(wù)器出現(xiàn)狀況，前后端一起玩完，用戶體驗(yàn)級(jí)差。。
2， 前后端分離的優(yōu)勢
1，可以實(shí)現(xiàn)正真的前后端解耦，前端服務(wù)器放 css，js，圖片等一系列資源，前端服務(wù)器負(fù)責(zé)控制頁面引用，跳轉(zhuǎn)，路由。前端頁面異步調(diào)用后端的接口。加快整體響應(yīng)速度。
3，減少后端服務(wù)器的開發(fā)/負(fù)載壓力。除了接口外的http請求全部轉(zhuǎn)到 前端nginx上。
前端大量的組件化代碼 可以抽出來復(fù)用，組件化開發(fā)提升效率。
前端與后端是兩個(gè)項(xiàng)目。放在兩個(gè)不同的服務(wù)器，需要獨(dú)立部署。

四：同步和異步的區(qū)別
1，javascript語言是一門“單線程”的語言，
其實(shí)同步和異步，
無論如何，做事情的時(shí)候都是只有一條流水線（單線程），
同步和異步的差別就在于這條流水線上各個(gè)流程的執(zhí)行順序不同。
最基礎(chǔ)的異步是setTimeout和setInterval函數(shù)，

五：異步promise
1,自己身上有all、reject、resolve這幾個(gè)眼熟的方法，原型上有then、catch等同樣很眼熟的方法。
2,一： 優(yōu)點(diǎn)和缺點(diǎn)
可以將異步操作以同步操作流程的方式表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對(duì)象提供統(tǒng)一的接口，使得控制異步操作更加容易。
3,使用
新建new一個(gè)promise，傳入resove和reject兩個(gè)參數(shù)分別代表成功失敗的方法。

六：常用的ES6
1，let和const 只在聲明指令的塊級(jí)作用域內(nèi)有效。
let所聲明的變量可以改變，const聲明常量，不能改變
2，Object.assign()方法用于對(duì)象的合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
3，promise對(duì)象
4，import 導(dǎo)入模塊
5，字符串拼接
Es6的這種新的“字符串拼接”方法比較簡單，沒有繁瑣的加號(hào)和引號(hào)，只需要在所需要的字符串“邊界”加上``即可。

var name = "Datura";
var age = 18;
var sex = "nü";
var hobby = "敲代碼";
var str1 = `我是${name}，今年${age}歲，性別${sex}的了，愛好${hobby}`; //注意此處有兩個(gè)“ `` ”
var str2 = "我是"+name+"，今年"+age+"歲，性別"+sex+"，愛好"+hobby+""; //這個(gè)是原來的寫法
alert(st1r);

6，map對(duì)象
let map = new Map();
map.set("a","apple");
map.set("b","banana");
console.log(map); // Map {"a" => "apple", "b" => "banana"}
7，for in循環(huán)， for of循環(huán)（不能循環(huán)json數(shù)據(jù)）
8，箭頭函數(shù)

var show = function(){
    alert(12);  
};
show();   // 12
const show = () =>{
    alert(12);  
};
show();  // 12 
//個(gè)人理解：這里將function關(guān)鍵字去掉然后在“()”后面加一個(gè)“=>”

七：app里面的支付功能，分享功能
（可以查看微信開發(fā)文檔）
1，商戶APP調(diào)用微信提供的SDK調(diào)用微信支付模塊，
商戶APP會(huì)跳轉(zhuǎn)到微信中完成支付，支付完后跳回到商戶APP內(nèi)，最后展示支付結(jié)果。
步驟：
1，用戶在商戶APP中選擇商品，提交訂單，選擇微信支付。
創(chuàng)建訂單接口需要的參數(shù)：
(1) 交易金額
(2) 交易類型trade_type
JSAPI--JSAPI支付（或小程序支付）、NATIVE--Native支付、APP--app支付，MWEB--H5支付，不同trade_type決定了調(diào)起支付的方式，請根據(jù)支付產(chǎn)品正確上傳
(3) 貨幣類型
境內(nèi)商戶號(hào)僅支持人民幣
CNY：人民幣
(4) 換算成北京時(shí)間為2014年11月11日8時(shí)0分0秒。
(5)部分系統(tǒng)取到的值為毫秒級(jí)，需要轉(zhuǎn)換成秒(10位數(shù)字)。
(6)商戶訂單號(hào)
。微信支付要求商戶訂單號(hào)保持唯一性
(7)
2，商戶后臺(tái)收到用戶支付單，調(diào)用微信支付統(tǒng)一下單接口。
（需要傳的參數(shù)都有：appid， 隨機(jī)字符串，不長于32位，簽名sign，訂單號(hào)，交易時(shí)間，訂單金額，）
3，統(tǒng)一下單接口返回正常的prepay_id，生成簽名
4，掉起微信支付，
5，返回支付結(jié)果。
分享功能：
1，先引入weixin.js。 然后通過config接口注入權(quán)限驗(yàn)證配置

wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: "", // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: "", // 必填，生成簽名的隨機(jī)串
signature: "",// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});
通過ready接口處理成功驗(yàn)證，

wx.ready(function(){
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。

});

八： html5的新特性
1，繪畫的canvas元素
2，video和audio元素
3，本地離線存儲(chǔ)localStorage 和 sessionStorage
4,新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
5,
(1) localStorage和sessionStorage都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象。
(2) cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上
(3) cookie不是很安全，考慮到安全應(yīng)當(dāng)使用session
(4) session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上，當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie。
(5) 建議將登錄信息等重要信息存放為session，其他信息如果需要保留，可以放在cookie中
localStorage - 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)去除。
sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。

6，表單新增了輸入類型和驗(yàn)證

九：攔截器
統(tǒng)一處理錯(cuò)誤及配置請求信息
登陸攔截設(shè)置
路由攔截：
1，
1，在定義路由的時(shí)候就需要多添加一個(gè)自定義字段，
用于判斷該路由的訪問是否需要登錄。如果用戶已經(jīng)登錄，則順利進(jìn)入路由， 否則就進(jìn)入登錄頁面。

{
    path: "/repository",
    name: "repository",
    meta: {
        requireAuth: true,  // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
    },
    component: Repository
},

2，用vue-router提供的鉤子函數(shù)beforeEach()對(duì)路由進(jìn)行判斷。

router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {  // 判斷該路由是否需要登錄權(quán)限
    if (store.state.token) {  // 通過vuex state獲取當(dāng)前的token是否存在
        next();
    }
    else {
        next({
            path: "/login",
            query: {redirect: to.fullPath}  // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
        })
    }
}
else {
    next();
}

})

第二步：攔截器
要想統(tǒng)一處理所有http請求和響應(yīng)，就得用上 axios 的攔截器。通過配置http response inteceptor，當(dāng)后端接口返回401 Unauthorized（未授權(quán)），讓用戶重新登錄。

// http request 攔截器
axios.interceptors.request.use(
config => {
    if (store.state.token) {  // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
        config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
},
err => {
    return Promise.reject(err);
});

// http response 攔截器
axios.interceptors.response.use(
response => {
    return response;
},
error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面
                store.commit(types.LOGOUT);
                router.replace({
                    path: "login",
                    query: {redirect: router.currentRoute.fullPath}
                })
        }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的錯(cuò)誤信息
});

十：跨域問題
1，jsonp方法
只需配置一個(gè)dataType:"jsonp"，就可以發(fā)起一個(gè)跨域請求。
2， window.name + iframe跨域
3，postMessage跨域
用法：postMessage(data,origin)方法接受兩個(gè)參數(shù)
data： html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。
origin： 協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。
4，WebSocket協(xié)議跨域
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。

十一：什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
1，漸進(jìn)增強(qiáng)：
先根據(jù)低版本進(jìn)行構(gòu)建頁面，保證最基本的功能。然后再根據(jù)高級(jí)瀏覽器進(jìn)行效果，達(dá)到更好的用戶體驗(yàn)。
2，優(yōu)雅降級(jí)：
一開始就構(gòu)建完整的功能，然后在根據(jù)低版本瀏覽器兼容。

十二：對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？
1，快速高效精準(zhǔn)的完成效果圖，注重用戶體驗(yàn)。
2，與團(tuán)隊(duì)成員，UI，產(chǎn)品經(jīng)理的溝通。
3，寫出優(yōu)美的代碼格式。注釋
4，優(yōu)化頁面

十三：JavaScript 的同源策略
1，同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

十四：電商網(wǎng)站如果有大量圖片，怎么去優(yōu)化界面？
1，圖片懶加載，滾動(dòng)到位置再發(fā)送請求
2，rem，em，px的區(qū)別
使用它們的目的就是為了適應(yīng)各種手機(jī)屏幕。
em：而em是繼承父元素的字體
相對(duì)長度的單位，用來設(shè)置文本的字體尺寸的，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的尺寸，
以上實(shí)例em是相對(duì)于父級(jí)元素div的，div設(shè)置的字體大小為30px，所以0.5em計(jì)算后的字體大小為：30px x 0.5 = 15px
3，rem是相對(duì)于html元素字體大小的設(shè)置。字體大小是html的值 * 倍數(shù)。
(1) em:

十五：JQUERY篇章
1，選擇器：
CSS 選擇器，ID選擇器，標(biāo)簽選擇器，屬性選擇器$("[href]") 選取所有帶有 href 屬性的元素。
attr()，$("button").click(function(){
alert($("#w3s").attr("href"));
});
2，show(), hide(),fadeIn(), fadeOut(),
3,操作DOM
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

十六： css篇，定位問題position
1，relative ,相對(duì)定位。
如果元素添加了relative，設(shè)置偏移量，元素會(huì)有移動(dòng)但是所占據(jù)的那個(gè)位置空間依然還在，也不會(huì)擠掉其他的元素。
2，position:absolute，絕對(duì)定位。
元素加了絕對(duì)定位，在頁面中是不占據(jù)空間的，他會(huì)浮動(dòng)起來。他會(huì)相對(duì)于他的父元素定位。
如果它的父元素沒有設(shè)置定位，那么就得看它父元素的父元素是否有設(shè)置定位 ，如果還是沒有就繼續(xù)向更高層的祖先元素類推，總之它的定位就是相對(duì)于設(shè)置了除static定位之外的定位（比如position:relative）的第一個(gè)祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會(huì)相對(duì)于文檔body來定位（并非窗口,相對(duì)于窗口定位的是fixed）
3，fixed相對(duì)于瀏覽器窗口進(jìn)行定位。
4， 1.id選擇器（ # myid）

2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li:nth-child）

5，CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個(gè)

元素的每個(gè)

元素。
p:last-of-type 選擇屬于其父元素的最后

元素的每個(gè)

元素。
p:only-of-type 選擇屬于其父元素唯一的

元素的每個(gè)

元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)

元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)

元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
6，css3動(dòng)畫
(1) @keyframes規(guī)則定義動(dòng)畫
設(shè)置動(dòng)畫的名稱, 對(duì)關(guān)鍵幀進(jìn)行操作。
動(dòng)畫至少需要兩個(gè)關(guān)鍵幀：一個(gè)from關(guān)鍵幀，它是我們動(dòng)畫的起始狀態(tài)，一個(gè)to幀，它是它的結(jié)束狀態(tài)。在每個(gè)多帶帶的關(guān)鍵幀塊中，我們可以定義要設(shè)置動(dòng)畫的屬性：

十七：瀏覽器兼容性問題
1，css透明，
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
2，元素水平居中問題
FF: margin:0auto;
IE: 父級(jí){ text-align:center; }
3，頁面的最小高度：
(1)IE不識(shí)別min,可以通過js的判斷來添加
4，圖片下有空隙產(chǎn)生
img為display:block
5，

十八： 移動(dòng)端兼容性問題
1，防止手機(jī)中頁面放大和縮小

2，上下拉動(dòng)滾動(dòng)條時(shí)卡頓、慢

body
{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

3，iphone及ipad下輸入框默認(rèn)內(nèi)陰影

element
{
    -webkit-appearance:none;
}

4，click的300ms延遲問題
方案一：禁用縮放，

方案二：安裝第三方依賴包。
npm install fastclick ---save
(2)在入口文件main.js中引入并使用，方法如下：

import fastClick from "fastclick"
fastClick.attach(document.body)

5, 響應(yīng)式圖片
解決方法：讓圖片最大只能是自己的寬度

img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

6，輸入框的問題：

var oHeight = $(document).height(); //瀏覽器當(dāng)前的高度   
$(window).resize(function(){
    if($(document).height() < oHeight){
     
    $("#footer").css("position","static");
}else{
     
    $("#footer").css("position","absolute");
}      

});
7，Input 的placeholder會(huì)出現(xiàn)文本位置偏上的情況
input 的placeholder會(huì)出現(xiàn)文本位置偏上的情況：PC端設(shè)置line-height等于height能夠?qū)R，而移動(dòng)端仍然是偏上，解決是設(shè)置line-height：normal

十九：flex彈性布局
1，使用flex盒模型來實(shí)現(xiàn)兩欄布局，左側(cè)固定200px,右側(cè)自適應(yīng)寬度
父元素: display:flex
子元素1: width:200px; /固定寬度/
子元素2: flex: 1; /這里設(shè)置為占比1，填充滿剩余空間/
2,容器的屬性6個(gè)：
(1) flex-direction決定主軸的方向（即項(xiàng)目排列的方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
(2) flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}    

nowrap: 不換行
wrap: 換行，第一行在上方。
wrap-reverse: 換行，第一行在上方
(3) flex-flow:
是flex-direction和flex-wrap的簡寫形式，默認(rèn)值row, nowrap
(4) justify-content屬性
定義了項(xiàng)目在主軸上的對(duì)齊方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}  
//flex-start左對(duì)齊， flex-end右對(duì)齊，  center居中對(duì)齊， space-between兩端對(duì)齊中間間隔相等
//space-around:每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

(5) align-items屬性
定義項(xiàng)目在縱向?qū)R方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

(6)align-content屬性
定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around |         stretch;
}

3,項(xiàng)目屬性，不常用

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4，flex屬性
是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

二十：vuex
vuex就是把組件的共享狀態(tài)提取出來，以一個(gè)全局方式管理。
任何組件都可以獲取狀態(tài)或者觸發(fā)行為。vuex就是專門為vue設(shè)計(jì)的狀態(tài)管理庫。
1，state
定義初始化狀態(tài)變量。
改變state中的狀態(tài)唯一方式就是顯示的提交(commit) mutation.
2，getters
可以監(jiān)聽state里面值的變化。有時(shí)候我們需要從state中派生出一些狀態(tài)
，例如對(duì)列表過濾。類似于計(jì)算屬性。
可以以屬性的形式訪問這些值
store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]
3，mutation
改變state中狀態(tài)的唯一方法就是顯示提交mutations。是同步的
4，action方法
action類似于mutation不同在于：
(1) action提交mutation，而不是直接變更狀態(tài)
(2) action可以包含任意異步操作。
使用方式：

  const mutations ={
      increment(state){
        return state.count++;
      }
   };
   const actions = {
      increment(context){
        context.commit("increment");
      }
   };
//在組件中使用 this.$store.dispatch("xxx") 分發(fā) action

二十一：移動(dòng)端打包問題
打包安卓apk過程：
(1)，基本依賴環(huán)境
nodejs環(huán)境
jdk(java的開發(fā)基礎(chǔ)類庫，因?yàn)?android )
SDK(安卓開發(fā)集成包，集成了安卓的開發(fā)工具，插件，API等等)
(2)，環(huán)境配置
nodejs
jdk (無需配置環(huán)境變量)
sdk (需要配置環(huán)境變量)
gradle安裝
安裝ionic和cordova
全局安裝ionic和cordova（IONIC是UI，cordova負(fù)責(zé)打包成apk,并且可以調(diào)用原生安卓的各種API）
(3)打包
ionic cordova build android --release
如若你聰慧的雙眼發(fā)現(xiàn)如下字眼：Build Success! 說明你已經(jīng)成功打包了。耐心等待，命令行結(jié)束會(huì)提示你apk的生成位置
給包生成簽名
2，移動(dòng)端Mint UI?；?Vue.js 的移動(dòng)端組件庫
(1)包案豐富的css和js組件。

二十二： js篇基礎(chǔ)
1，事件委托
把綁定到子元素的事件 委托到父元素上，原理就是事件冒泡

事件委托的優(yōu)點(diǎn)？
(1) 因?yàn)槊恳粋€(gè)函數(shù)都是一個(gè)對(duì)象，對(duì)象越多，內(nèi)存占有率就越大，自然性能就越差，使用事件委托，只需要在其父元素中定義一個(gè)事件就可以。
(3) 減少事件注冊，比如在ul上代理所有l(wèi)i的click事件就非常棒

  
item 1
  
item 2
  
item 3
  ......
  
item n
// ...... 代表中間還有未知數(shù)個(gè) li。
如果給每個(gè)li列表項(xiàng)都綁定一個(gè)函數(shù)，那對(duì)內(nèi)存的消耗是非常大的，
因此較好的解決辦法就是將li元素的點(diǎn)擊事件綁定到它的父元素ul身上，執(zhí)行事件的時(shí)候再去匹配判斷目標(biāo)元素。

可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無需再次對(duì)其綁定（動(dòng)態(tài)綁定事件）

實(shí)現(xiàn)方式用：event.target可以判定當(dāng)前點(diǎn)擊的目標(biāo)對(duì)象

2， 適合事件委托的事件有：

click，
mousedown，
mouseup，
keydown，
keyup，
keypress

3， this作用域問題
(1) this總是指向調(diào)用它所在方法的對(duì)象。
this是在函數(shù)生成的時(shí)候，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。
(2) 全局函數(shù)調(diào)用
this代表的全局對(duì)象window。
(3) 對(duì)象方法的調(diào)用
如果函數(shù)作為對(duì)象的方法調(diào)用，this指向的是這個(gè)上級(jí)對(duì)象，即調(diào)用方法的對(duì)象。
(4) 構(gòu)造函數(shù)的調(diào)用
構(gòu)造函數(shù)中的this指向新創(chuàng)建的對(duì)象本身。

3，冒泡排序
(1) 原理：
依次比較相鄰的兩個(gè)值，如果后面的比前面的小，則將小的元素排到前面。依照這個(gè)規(guī)則進(jìn)行多次并且遞減的迭代，直到順序正確
(2) 實(shí)現(xiàn)方法：

4，閉包
(1) 如何從外部讀取局部變量？
在函數(shù)的內(nèi)部，再定義一個(gè)函數(shù)。

 function f1(){
       n = 999;
       function f2(){
           console.log(n);　　//999
       }
   }

在上面的代碼中，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，

這時(shí)f1內(nèi)部的所有局部變量，對(duì)f2都是可見的。但是反過來就不行，
f2內(nèi)部的局部變量對(duì)f1就是不可見的。
這就是javascript語言特有的‘鏈?zhǔn)阶饔糜颉Y(jié)構(gòu)(chain scope)，子對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變
量。所以，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見的，反之則不成立。

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

   function f1(){
       n = 999;
       function f2(){
           console.log(n);
       }
       return f2;

   }
   var result = f1();　　//返回的是f2函數(shù)
   result();　　//999

(2) 閉包的概念：
上一節(jié)代碼中的f2函數(shù)就是閉包。
閉包可以簡單理解成：
定義在一個(gè)函數(shù)內(nèi)部的函數(shù)，
本質(zhì)上閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接的一座橋梁。

(3)閉包的用途：
一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量
另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

 function f1(){
       var n = 999;
       nAdd = function(){
           n += 1;
       }
       function f2(){
           console.log(n);
       }
       return f2;
   }
   var result = f1();
   result();　　//從函數(shù)外部通過閉包f2獲取到函數(shù)f1內(nèi)部局部變量的值
   nAdd();　　//從函數(shù)外部通過閉包修改局部變量n的值
   result();　　//再次通過閉包f2獲取到函數(shù)f1內(nèi)部局部變量的值  
   //console.log出的值是， 999， 1000

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

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

5，JS繼承
(1) 屬性繼承
就是將對(duì)象的成員復(fù)制一份給需要繼承的對(duì)象
存在問題：
父構(gòu)造函數(shù)的原型對(duì)象和子構(gòu)造函數(shù)的原型對(duì)象上的成員有共享問題
只能繼承父構(gòu)造函數(shù)的原型對(duì)象上的成員, 不能繼承父構(gòu)造函數(shù)的實(shí)例對(duì)象的成員
(2) 原型鏈繼承
prototype 英[?pr??t?ta?p]
即 子構(gòu)造函數(shù).prototype = new 父構(gòu)造函數(shù)()

(3) 借用構(gòu)造函數(shù)

 // 創(chuàng)建父構(gòu)造函數(shù)
function Person(name){
  this.name = name;
  this.freinds = ["小王", "小強(qiáng)"];
  this.showName = function(){
     console.log(this.name);
  }
}
// 創(chuàng)建子構(gòu)造函數(shù)
 function Student(name){
  // 使用call借用Person的構(gòu)造函數(shù)
  Person.call(this, name);
 }
 // 測試是否有了 Person 的成員
 var stu = new Student("Li");
 stu.showName(); // Li
 console.log(stu.friends); // ["小王","小強(qiáng)"]

使用call和apply借用其他構(gòu)造函數(shù)的成員, 可以解決給父構(gòu)造函數(shù)傳遞參數(shù)的問題, 但是獲取不到父構(gòu)造函數(shù)原型上的成員.也不存在共享問題

(4) 組合繼承 (構(gòu)造函數(shù) + 原型式繼承)
(5) 借用構(gòu)造函數(shù) + 深拷貝

function Person(name,age){
    this.name = name;
    this.age = age;
    this.showName = function(){
        console.log(this.name);
    }
}
Person.prototype.friends = ["小王","小強(qiáng)","小王八"];
function Student(name,25){
    // 借用構(gòu)造函數(shù)(Person)
    Person.call(this,name,25);
}
// 使用深拷貝實(shí)現(xiàn)繼承
deepCopy(Student.prototype,Person.prototype);
Student.prototype.constructor = Student;

6：BOM
(1) BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。
(2) 全局作用域：
在全局作用域中生成的變量，函數(shù)都是window的屬性和方法。
全局變量與在window對(duì)象上直接定義的屬性還是有一些差別，
全局變量不能通過delete刪除，window對(duì)象可以。
(3) window對(duì)象有以下方法：

open 
close 
alert 
setTimeout 
clearTimeout 
setInterval 
clearInterval 
moveBy 
moveTo 
resizeBy 
resizeTo 
scrollBy 
scrollTo 
find 
back 
forward 
home 
stop 
print 
blur 
focus 
handleEvent 
releaseEvent 
routeEvent 
scroll

(4) http狀態(tài)碼
200：請求成功
404：請求的資源不存在
500：內(nèi)部服務(wù)器錯(cuò)誤
5XX服務(wù)端錯(cuò)誤：
501,502,503,504,505
4XX客戶端錯(cuò)誤
401，402，403
304： 對(duì)客戶端有緩存的情況下，服務(wù)端的一種響應(yīng)。
403： 表示對(duì)請求資源的訪問被服務(wù)器拒絕
401： 表示發(fā)送的請求需要有通過 HTTP 認(rèn)證的認(rèn)證信息

7：數(shù)組的哪些方法會(huì)改變原數(shù)組？那些不會(huì)？
(1) 變原數(shù)組：

pop()   刪除最后一個(gè)元素并把長度減一
shift() 數(shù)組的第一個(gè)元素被刪除
shift(0,1) 0: 開始的索引，1：要?jiǎng)h除的個(gè)數(shù)。
push()  添加元素

(2) 不改變原數(shù)組

concat() 連接多個(gè)數(shù)組，返回新的數(shù)組
slice()   
foreach()
     

二十三： vue篇
1，簡述Vue的響應(yīng)式原理