摘要：一的基礎知識實現(xiàn)雙向綁定原理中的設置屬性值獲取屬性值過程劫持并監(jiān)聽所有屬性發(fā)生變化，通知觀察者函數(shù)負責向觀察者列表添加對應更新函數(shù)編譯解析初始化更新生命周期和中的數(shù)據(jù)和方法還沒初始化和初始化完成模板已經(jīng)在內(nèi)存編譯好了，尚未掛載到頁面頁面掛載

一、vue的基礎知識 vue實現(xiàn)雙向綁定原理

1、Object.defineProperty()中的set/get設置屬性值/獲取屬性值

2、過程

Observer劫持并監(jiān)聽所有屬性

發(fā)生變化，通知Dep觀察者（update函數(shù)）

Watcher負責向觀察者列表添加對應更新函數(shù)

Compile編譯解析

初始化/更新

vue生命周期

beforeCreate

data和methods中的數(shù)據(jù)和方法還沒初始化

created

data和methods初始化完成

beforeMount

模板已經(jīng)在內(nèi)存編譯好了，尚未掛載到頁面

mounted

頁面掛載完成，可以操作DOM

beforeUpdate

頁面數(shù)據(jù)是舊的，data數(shù)據(jù)是新的，頁面和最新數(shù)據(jù)還沒同步

updated

頁面和data已經(jīng)保持最新

beforeDestory

進入銷毀階段，data、methodes...還可用

destroyed

組件已經(jīng)完全銷毀，data、methods以及過濾器，指令不可用

vue組件通信

父子通信

父組件綁定屬性“：data-attr”數(shù)據(jù)

子組件在props接收駝峰式dataAttr數(shù)據(jù)

子與父通信

子組件$emit("to-parent",newMsg)綁定屬性傳輸數(shù)據(jù)

父組件綁定@to-parent="getChildren(e)"屬性接收數(shù)據(jù)

兄弟通信

在main.js建立一個Vue.prototype.bus事件總線（中間層）

在borther1，this.bus.$emit("屬性toborther2"，值)

在borther2接收，this.bus.$on("toborther2",function(val){ that.msg = val })

vue的虛擬DOM

虛擬DOM出現(xiàn)是為了減少頻繁大面積的重繪引發(fā)的性能問題

虛擬dom和真實dom的區(qū)別

1、虛擬dom不會排版與重繪 2、真實dom頻繁排版與重繪效率相當?shù)? 3、虛擬dom進行頻繁修改，然后一次性比較并修改真實dom中需要改的部分，最后并在真實dom中進行排版與重繪，減少過多dom節(jié)點排版與重繪損耗 4、虛擬dom有效降低大面積的重繪與排版，因為最終與真實dom比較差異，可以只渲染局部

DOM Diff

指的是通過Diff算法去比較虛擬DOM的變化

vue怎么更新節(jié)點

1、先根據(jù)真實DOM生成virtual DOM 2、當virtual DOM某個節(jié)點的數(shù)據(jù)改變后會生成一個新的Vnode 3、Vnode和oldVnode作對比，發(fā)現(xiàn)有不一樣的就直接修改在真實的DOM，然后使oldVnode的值為Vnode

路由

全局路由攔截(路由守衛(wèi))

router.beforeEach(( to, from, next )=>{}) //跳轉前

to: 即將進入的目標（路由對象）

from:當前導航正要離開的路由

next()進行下一個鉤子，next(false)中斷當前導航，如果此時URL改變，則會重置為from后的路由地址， next("/") next(path: "/")終止當前導航，跳轉到一個不同的地址，next(error)如果參數(shù)為一個error實例，則會終止導航

beforeResolve(( to, from, next )=>{}) //跳轉成功

afterEach(( to, from, next )=>{}) //跳轉后

局部路由攔截

路由內(nèi)部鉤子： beforeEnter(( to, from, next )=>{})

組件內(nèi)部鉤子

beforeRouteEnter(( to, from, next )=>{}) //從另外的組件進入該組件前觸發(fā)該鉤子

beforeRouteUpdate(( to, from, next )=>{}) //同一個組件，參數(shù)不一樣，不一樣數(shù)據(jù)

beforeRouteLeave(( to, from, next )=>{}) //該組件離開跳轉到另外的組件時觸發(fā)該鉤子

路由傳參

this.$router.push({ path: /Re/${id} })

this.$router.push({ name: "Re", params: { id: id } })

this.$router.push({ path: "/Re", query:{ id: id } })

vuex

state定義共享變量

mutations同步修改共享變量（更改state,提交mutation）

actions可以提交mutation,action中執(zhí)行store.commit

getter計算屬性

如何解決單頁面的SEO問題

prerender-spa-plugin

SSR

定義

服務端渲染，用戶請求網(wǎng)頁，都是后端先調用數(shù)據(jù)庫，獲得數(shù)據(jù)之后，將數(shù)據(jù)和頁面元素進行拼接，組合成完整的html頁面，再直接返回給瀏覽器

優(yōu)勢

1、更好的SEO，由于搜索引擎爬蟲抓取工具可以查看渲染頁面

2、更快內(nèi)容到達時間，特別對于緩慢的網(wǎng)絡情況或緩慢的設備

劣勢

1、構建設置和部署的更多要求

2、更多服務器端負載

Nuxt.js

二、微信小程序基礎 目錄

app.js

系統(tǒng)的方法處理文件，主要處理程序聲明周期的一些方法

app.json

路由地址、全局配置，導航頭顏色、名稱

app.wxss

全局界面樣式

project.config.json

控制小程序版本，appid

sitemap.json

用來配置小程序及其頁面是否允許被微信索引

pages

小程序各個頁面文件

components

組件

images

圖片

template

模板

生命周期

頁面生命周期

onLoad

監(jiān)聽頁面加載

onShow

監(jiān)聽頁面顯示

onReady

監(jiān)聽頁面初次渲染完成

onHide

監(jiān)聽頁面隱藏

onUnload

監(jiān)聽頁面卸載

app生命周期

onLaunch

監(jiān)聽小程序初始化，只觸發(fā)一次

onShow

監(jiān)聽小程序顯示

onHide

監(jiān)聽小程序隱藏

onError

錯誤監(jiān)聽函數(shù)

路由

wx.switchTab

跳轉到tabBar頁面，并關閉其他所有非tabBar頁面

wx.reLaunch

關閉所有頁面，打開應用內(nèi)某個頁面

wx.redirectTo

關閉當前頁面，跳轉到應用內(nèi)某個頁面，不允許跳tabbar頁面

wx.navigateTo

保存當前頁面，跳轉到應用內(nèi)某個頁面，不能跳到tabbar頁面，最多十層頁面棧

wx.navigateBack

關閉當前頁面，返回上一頁或多級頁面

頁面?zhèn)鬟f數(shù)據(jù)的方法

url參數(shù)傳遞

1、wx.navigateTo({ url: "../list/list?username=" + this.data.username }) 2、wx.redirectTo 3、wx.reLaunch

本地緩存

wx.setStorageSync("username",this.data.username)

全局變量

appjs里面app.globalData對象中新建屬性

基本原理

雙線程通信方式

view視圖層：渲染頁面結構

1、初始化狀態(tài)

2、首次渲染狀態(tài)

3、持續(xù)渲染狀態(tài)

End

通過JSBridage通信

AppService邏輯層：用來邏輯處理、數(shù)據(jù)請求、接口調用

1、初始化狀態(tài)：onLoad(只執(zhí)行一次)、onShow（每次切換都會執(zhí)行）

2、等待激活狀態(tài)：接收到“界面線程初始化完成”信號，講初始化數(shù)據(jù)發(fā)送到“界面線程”，等待界面線程完成初始渲染

3、激活狀態(tài)：首次渲染完成，調用onReady函數(shù)

4、后臺狀態(tài)：也能接收數(shù)據(jù)，局部渲染

End

虛擬DOM

1、js對象模擬DOM

2、比較兩個DOM樹

3、比較兩個DOM樹的差異

4、把差異應用到真正的DOM樹上

數(shù)據(jù)請求封裝

在utils封裝wx.request請求

組件中引入應用

提高應用速度方法

提高頁面加載速度

用戶行為預測

減少默認data的大小

組件化方案

雙向綁定

this.setData({})

bindinput綁定事件方法，監(jiān)聽變化

三、js基礎知識 原型、原型鏈

函數(shù)對象

所有函數(shù)prototype（顯式原型）

函數(shù)、數(shù)組、對象都擁有__proto__（隱式原型）

原型對象，擁有prototype屬性的對象，在定義函數(shù)時就被創(chuàng)建

構造函數(shù)

構造函數(shù)會擁有本身方法，也會擁有顯式原型的方法，即實例繼承構造函數(shù)的方法

原型鏈（查找屬性，在__proto__中查找，通過__proto__形成原型鏈）

prototype

proto

constructor

繼承

含義

發(fā)生在對象與對象之間

方法

原型

構造函數(shù)（子構造函數(shù)prototype繼承父構造函數(shù)的原型方法）

apply,call借調構造函數(shù)

例：

    function Fn(name,age){                                 
        this.name = name;  
        this.age = 20;                                   
    }
    function Son(name,age,sex){       
        Fn.call(this,name,age);   
        this.sex = sex;                                                                             
    }
    function Son2(name,age,sex){      
        Fn.apply(this,arguments);
        this.sex = sex;                                                                            
    }   
    var  s1 = new Son("李四",20,“男”);
    console.log(s1);    //    son:{  name:"李四",age: 20,sex:"男" }       
    var  s1 = new Son2("張三",29,“女”);
    console.log(s2);   //son:{ name: "張三"，age:29,sex:"女"}     

                 

閉包

含義

就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)

作用

好處

1、保護函數(shù)內(nèi)的變量 安全，防止命名沖突

2、內(nèi)存維持一個變量，可以做緩存

3、匿名自執(zhí)行函數(shù)可以減少內(nèi)耗

壞處

1、增大內(nèi)耗，造成內(nèi)存泄漏

2、閉包跨域訪問，導致性能損失

跨域

含義

協(xié)議、域名、端口有一個不同就是跨域

解決跨域

1、CORS跨源通信：瀏覽器和服務器同時支持，瀏覽器IE不能低于IE10，前端正常ajax請求，需要服務器實現(xiàn)CORS接口，就可以實現(xiàn)跨域通信

2、JSONP：a、只能get請求，不能post b、dataType:"jsonp", jsonp: "jsoncallback" c、先在客戶端注冊一個callback,然后把callback名字傳給服務器，服務器生成json數(shù)據(jù)，然后以js語法方式生成function,function名字就是傳遞上來的參數(shù)jsonp.最后將json數(shù)據(jù)直接入?yún)⒌姆绞?，放置到function,生成一段js語法文檔，返回給客戶端

3、window.name：不同頁面/不同域名 仍然存在

4、document.domain將兩個不同頁面設置成相同練=的域名，設置成更高的父域

5、location.hash子框架具有修改父框架src的hash值

6、window.postMessage：HTML5的api允許兩個窗口跨域發(fā)送信息，解決dom跨域通用方法

構造函數(shù)

任意一個普通函數(shù)用于創(chuàng)建一類對象時，稱為構造函數(shù)或構造器

作用域鏈

作用域：變量和函數(shù)可訪問范圍，或者說變量或函數(shù)起作用的區(qū)域

作用域鏈：是一個對象列表，用來檢索各個變量對象中的變量和函數(shù)，這樣可以保證執(zhí)行環(huán)境有權訪問那些變量和函數(shù)

cal、 apply、bind的區(qū)別

相同：改變this指向，作用一樣

不同：接收的參數(shù)不一樣，call(this,a,b,c),apply(this,arguments)立即執(zhí)行，bind是返回對應函數(shù)，稍后執(zhí)行，需要手動執(zhí)行

null和undefined的區(qū)別

null是空值，類型為object

undefined表示“缺少值”，未定義

事件冒泡、事件捕獲和事件委托

事件冒泡

含義

自下而上（自內(nèi)而外）的觸發(fā)事件

如何防止事件冒泡

jq的e.stopPropagation

事件捕獲

含義

自上而下（自外而內(nèi)）的觸發(fā)事件

事件委托

含義

只指定一個事件處理程序，將原本子元素上的處理程序委托給父元素執(zhí)行

為什么

新增子元素，不需添加事件，因為已經(jīng)綁定父元素

怎么做

$("parent").on("click","li",function(e){ })

原生方法

賦值方法

pop和push

pop從尾部刪除1個元素

push增加若干元素

shift和unshift

shift頭部刪除1個元素

unshift頭部增加若干元素

splice

含義

向數(shù)組中添加/刪除項目，并返回被刪除的項目

參數(shù)

index:添加或刪除項目的位置

howmany:要刪除的項目的數(shù)量

item:向數(shù)組添加的新項目

reverse

將數(shù)組中元素順序反轉

sort

將數(shù)組元素進行排序

訪問方法

concat

用于連接兩個或多個數(shù)組，返回新數(shù)組

join

用于把數(shù)組中的所有元素放入一個字符串，即指定分隔符進行分隔

slice

通過索引位置獲取新的數(shù)組，不會修改數(shù)組，只會返回新的子數(shù)組

toString

將其轉換為字符串

indexOf和lastIndexOf

indexOf返回指定字符串首次出現(xiàn)的位置（從左往右）

lastIndexOf返回指定字符串首次出現(xiàn)的位置（從右往左

迭代方法

forEach

遍歷

map

遍歷

filter

過濾器，把數(shù)組的某些元素過濾掉，然后返回剩下的元素

every和some

every從迭代開始，一旦有一個不符合條件的則停止

some一直在找符合條件的值，找到就停止

reduce和reduceRight

reduce升序從左往右（累加器）

reduceRight降序從右往左（累加）

數(shù)據(jù)類型

Null

Number

String

Boolen

Undefined

js設計模式

模塊模式

構造函數(shù)模式

混合模式

工廠模式

單例模式

發(fā)布-訂閱模式

js的占位顯示色塊（有點預加載的意思） js的遍歷

for

耗時23-24ms,break,continue,return支持

for...in

耗時4858ms

for...of

耗時480-485ms

forEach

耗時209ms，break,continue,return不支持使用

性能測試工具 四、ES6的基本語法 var、let和const賦值

var 聲明變量，可有變量提升作用，函數(shù)級作用域

let 聲明變量，塊級作用域

const聲明常量

解構

含義

允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值

解構賦值的類型

數(shù)組

[a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4

對象

{foo,bar} = {foo: "aaa",bar: "bbb"} //foo="aaa", bar = "bbb"

字符串

[a,b,c,d,e] = "hello" //a=h,b=e,c=l,d=l,e=o

數(shù)值和布爾值

let {toString: s} = 123; //s === Number.prototype.toString;

函數(shù)參數(shù)

function add([x, y]){ return x + y; }; add([1,2]); //3

箭頭函數(shù)

this指向外層

使用callapplybind，this指的是綁定的對象

Set去重

Set是新的數(shù)據(jù)結構，成員的值是唯一的

[...set]

Array.from(new Set(array)) Set結構數(shù)組化

新增數(shù)據(jù)類型Symbol

含義

表示獨一無二的值

Symbol值通過Symbol函數(shù)生成

用途

1、用作屬性名

``模板字符串 怎么實現(xiàn)繼承

Class繼承

模塊化 promise

含義

對象構造函數(shù)

resolve表示成功回調

reject表示失敗回調

方法

promise.all

要多個異步請求一起成功才返回成功

promise.race

只返回第一個執(zhí)行完成的異步操作結果

async/await

含義

在方法外層必須 async異步函數(shù)

await必須執(zhí)行完異步操作，才會執(zhí)行下一步

用法

內(nèi)置執(zhí)行器

返回Promise

五、html與css基礎知識 塊級元素和內(nèi)聯(lián)元素

塊級元素

div/h1/li/ul/p/th/td

內(nèi)聯(lián)元素

a/b/input/span/i/img

如何實現(xiàn)水平垂直居中

1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);

2、position: absolute; top bottom left right:0; margin:auto;

3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //寬的一半

display:none;和visibility:hidden;區(qū)別

display//不占位隱藏

visibility//占位隱藏

清除浮動

1、添加子元素偽元素選擇器

2、overflow: hidden;第一個盒子設置margin-bottom,第二個盒子設置margin-top

css屬性繼承

文本相關屬性：font-family / font-size / font-style / line-height / text-align / color

列表相關屬性：list-style

表格相關屬性：border-spacing

其他屬性：cursor / visibility

static/relative/absolute/fixed的區(qū)別

1、static默認值，不設置屬性，會按正常的文檔流

2、relative相對定位，相對它本身的位置

3、absolute絕對定位，可能是相對父元素的relative/absolute定位，也有可能是相對body定位

4、fixed定位對象是根據(jù)瀏覽器窗口進行定位

link和@import區(qū)別

link是html標簽，頁面加載時，link會同時被加載，沒兼容性，樣式權重高

@import是css加載，會等頁面加載后才加載，IE5以上才能識別，比link低

BFC

含義

塊級格式化上下文，塊級元素的布局渲染規(guī)范

創(chuàng)建BFC

float不是none

position值不是static/relative

display值是inline-block,table-cell,flex,table-caption,inline-flex

overflow值不是visible

IE6的bug

圖片有邊框bug

解決：給圖片border:0;或者border:none;

雙倍邊距

解決：display:inline;

默認高度

解決：font-size:0;或者overflow:hidden;

按鈕元素默認大小不一致

解決：a標簽模擬

六、瀏覽器兼容性 不同瀏覽器margin和padding不同

解決：清除標簽默認樣式 *{ margin: 0; padding: 0; }

IE6雙邊距問題

解決：display:inline;

標簽高度設置小于10px,在IE6和IE7會超出自己設置的高度

解決：overflow:hidden;或line-height小于高

圖片默認有間距

解決：float布局

IE9不能使用opacity

解決：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

邊距重疊問題

解決：給子元素增加父元素，父元素設置overflow:hidden;

cursor: hand在safari上不支持

解決：統(tǒng)一使用cursor:pointer;

七、HTTP的狀態(tài)及請求 常見狀態(tài)碼

200 成功，一切正常

302 重定向

304未修改

403服務器禁止訪問

404找不到請求的資源

500服務器錯誤

http流程

1、建立連接

2、客戶端發(fā)送請求到服務器

3、服務器返回相應信息：狀態(tài)行、協(xié)議版本好、成功或錯誤代碼

4、客戶端接收服務器返回信息顯示在用戶顯示屏，然后斷開鏈接

http方法

GET獲取數(shù)據(jù)

POST傳輸數(shù)據(jù)

PUT傳輸文件

HEAD獲取報文首部

DELET刪除文件

OPTIONS查詢相應URL支持的HTTP方法

八、項目遇到的問題 vue

1、兼容IE10：組件babel-polyfill

2、打包后線上資源圖片路徑地址不對：修改cofig/index.js配置文件公共路徑

微信小程序

1、富文本html在小程序不兼容：用wxParse組件編譯成功小程序view標簽

html、css

1、鍵盤擋住輸入框擋?。篶ss控制滾動頁面

Copyright ? KEN卓越