前端方面：

1.?transition和animation的區(qū)別黄橘？

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值悼沈，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性贱迟，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀絮供，從from .... to衣吠，而animation可以一幀一幀的。transition規(guī)定動畫的名字 規(guī)定完成過渡效果需要多少秒或毫秒 規(guī)定速度效果 定義過渡效果何時開始壤靶。animation指定要綁定到選擇器的關鍵幀的名稱缚俏。

2.?怎么使不確定寬高的div居中？

使用flex在父盒子設置display: flex; justify-co

ntent: center;align-items: center

使用css的transform 父盒子設置:display:relative

Div設置: transform: translate(-50%贮乳，-50%);position: absolute;top: 50%;left: 50%;

display：table-cell 父盒子設置:display:table-cell; text-align:center;vertical-align:middle;

Div設置: display:inline-block;vertical-align:middle;

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

3.?浮動問題忧换？

Float的取值： ?????????????????????????????????????????????????????????????????????????

left左浮 ?right右浮 ?none默認

2.?Float的特性：

浮動元素會從普通文檔流中脫離，但浮動元素影響的不僅是自己向拆，它會影響周圍的元素對齊進行環(huán)繞亚茬。

不管一個元素是行內元素還是塊級元素，如果被設置了浮動浓恳，那浮動元素會生成一個塊級框刹缝，可以設置它的width和height碗暗，因此float常常用于制作橫向配列的菜單，可以設置大小并且橫向排列梢夯。

浮動元素在浮動的時候言疗，其margin不會超過包含塊的padding。PS：如果想要元素超出厨疙，可以設置margin屬性

如果兩個元素一個向左浮動洲守，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰沾凄。

如果有多個浮動元素梗醇，浮動元素會按順序排下來而不會發(fā)生重疊的現(xiàn)象。

如果有多個浮動元素撒蟀，后面的元素高度不會超過前面的元素叙谨，并且不會超過包含塊。

如果有非浮動元素和浮動元素同時存在保屯，并且非浮動元素在前手负，則浮動元素不會高于非浮動元素

浮動元素會盡可能地向頂端對齊、向左或向右對齊

3.?父元素高度塌陷問題?

解決父元素高度塌陷問題：一個塊級元素如果沒有設置height姑尺，其height是由子元素撐開的竟终。對子元素使用了浮動之后，子元素會脫離標準文檔流切蟋，也就是說统捶，父級元素中沒有內容可以撐開其高度，這樣父級元素的height就會被忽略柄粹，這就是所謂的高度塌陷喘鸟。

4.?清除浮動的方法?

方法1：給父級div定義 高度 原理：給父級DIV定義固定高度（height），能解決父級DIV 無法獲取高度得問題驻右。 優(yōu)點：代碼簡潔 缺點：高度被固定死了什黑，是適合內容固定不變的模塊。（不推薦使用）

方法二：使用空元素堪夭，如

方法三：父元素設置overflow：hidden祈惶、auto雕旨； 原理：這個方法的關鍵在于觸發(fā)了BFC扮匠。在IE6中還需要觸發(fā) hasLayout（zoom：1） 優(yōu)點：代碼簡介，不存在結構和語義化問題 缺點：無法顯示需要溢出的元素凡涩。

方法四：父級div定義 偽類:after 和 zoom

.clearfix:after{

????content:'.';

????display:block;

????height:0;

????clear:both;

????visibility: hidden;

}.clearfix {zoom:1;}

原理：IE8以上和非IE瀏覽器才支持:after棒搜，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題 優(yōu)點：結構和語義化完全正確,代碼量也適中活箕，可重復利用率（建議定義公共類） 缺點：代碼不是非常簡潔（極力推薦使用）

經益求精寫法

.clearfix:after {

content:”\200B”;

????display:block;

????height:0;

????clear:both;

?}

.clearfix { *zoom:1; }照顧IE6力麸，IE7就可以了

5.?px,em,rem的區(qū)別？

px像素(Pixel)育韩。絕對單位克蚂。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位筋讨，是計算機系統(tǒng)的數(shù)字化圖像長度單位埃叭，如果 px 要換算成物理長度，需要指定精度 DPI悉罕。

em是相對長度單位赤屋，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置壁袄， 則相對于瀏覽器的默認字體尺寸类早。它會繼承父級元素的字體大小，因此并不是一個固定的值嗜逻。

rem是 CSS3 新增的一個相對單位(root em涩僻，根 em)，使用 rem 為元素設定字體大小時变泄，仍然是相對大小令哟， 但相對的只是 HTML 根元素。

6.?CSS引入的方式有哪些? link 和@import 的區(qū)別是?

有四種：內聯(lián)(元素上的style屬性)妨蛹、內嵌(style標簽)屏富、外鏈(link)、導入(@import) link和@import的區(qū)別：

link是XHTML標簽蛙卤，除了加載CSS外狠半，還可以定義RSS等其他事務；@import屬于CSS范疇颤难，只能加載CSS神年。

link引用CSS時，在頁面載入時同時加載行嗤；@import需要頁面網頁完全載入以后加載已日。

link是XHTML標簽，無兼容問題栅屏；@import是在CSS2.1提出的飘千，低版本的瀏覽器不支持堂鲜。

link支持使用Javascript控制DOM去改變樣式；而@import不支持护奈。

7.流式布局與響應式布局

流式布局使用非固定像素來定義網頁內容缔莲，也就是百分比布局，通過盒子的寬度設置成百分比來根據(jù)屏幕的寬度來進行伸縮霉旗，不受固定像素的限制痴奏，內容向兩側填充。

響應式開發(fā)利用CSS3中的 Media Query(媒介查詢)厌秒，通過查詢 screen 的寬度來指定某個寬度區(qū)間的網頁布局读拆。

8.消除圖片底部間隙的方法

圖片塊狀化-無基線對齊：img { display: block; }

圖片底線對齊：img { vertical-align: bottom; }

行高足夠小-基線位置上移：.box { line-height: 0; }

9.?什么是函數(shù)防抖和函數(shù)節(jié)流區(qū)別

函數(shù)防抖就是在規(guī)定的時間只執(zhí)行一次，如果事件觸發(fā)多次简僧，重新計算函數(shù)執(zhí)行時間建椰，只執(zhí)行最后一次

函數(shù)節(jié)流就是在限制一個函數(shù)在規(guī)定的時間內只執(zhí)行一次

函數(shù)節(jié)流與函數(shù)防抖的區(qū)別： 我們以一個案例來講一下它們之間的區(qū)別：設定一個間隔時間為一秒，在一分鐘內岛马，不斷的移動鼠標棉姐，讓它觸發(fā)一個函數(shù)，打印一些內容啦逆。函數(shù)防抖：會打印1次伞矩，在鼠標停止移動的一秒后打印。函數(shù)節(jié)流：會打印60次夏志，因為在一分鐘內有60秒乃坤，每秒會觸發(fā)一次」得铮總結：節(jié)流是為了限制函數(shù)的執(zhí)行次數(shù)湿诊，而防抖是為了限制函數(shù)的執(zhí)行時機。

10.?var ?let ?count

const：定義的變量不可修改瘦材，必須初始化 var：定義的變量可以修改厅须，如果不初始化輸出undefined，不會報錯 let：塊級作用域食棕，函數(shù)內部使用let定義后朗和，會函數(shù)外部無影響 let const不會造成變量的提升

11.?null和undefined的區(qū)別

undefined類型只要一個，即undefined簿晓，當聲明變量還未被初始化時就是undefined null類型也只有一個值眶拉，即null。null用來表示尚未存在的對象憔儿，常用來表示函數(shù)企圖返回一個不存在的對象 NaN與任何值都是相比較的結果都是false

12.?http和https的區(qū)別

https：是以安全為目標的HTTP通道忆植，簡單講是HTTP的安全版本，通過SSL加密http：超文本傳輸協(xié)議。是一個客服端和服務器端請求和應答的標準（tcp）,使瀏覽器更加高效朝刊，使網絡傳輸減少

13.?Ajax的原理

ajax的原理：相當于在用戶和服務器之間加一個中間層（ajax引擎),使用戶操作與服務器響應異步化吴侦。 優(yōu)點：在不刷新整個頁面的前提下與服務器通信維護數(shù)據(jù)。不會導致頁面的重載可以把前端服務器的任務轉嫁到客服端來處理坞古，減輕服務器負擔，節(jié)省寬帶 劣勢：不支持back劫樟。對搜索引擎的支持比較弱痪枫；不容易調試 怎么解決呢？通過location.hash值來解決Ajax過程中導致的瀏覽器前進后退按鍵失效叠艳，解決以前被人常遇到的重復加載的問題奶陈。主要比較前后的hash值，看其是否相等附较，在判斷是否觸發(fā)ajax

?

Vue方面：

1.?Vue的核心思想：

組件化開發(fā)和數(shù)據(jù)驅動

2.?什么是vuex?有什么作用吃粒？

vuex是vue的狀態(tài)管理工具

作用：項目數(shù)據(jù)狀態(tài)的集中管理，復雜組件的數(shù)據(jù)通信問題拒课。

3.?Vuex的核心屬性：

State:存儲數(shù)據(jù)狀態(tài)的地方徐勃，但是不可以直接修改里面的數(shù)據(jù)

Mutations: mutations定義的方法動態(tài)修改vuex的store中的狀態(tài)或數(shù)據(jù)

Actions:簡單的說就是異步操作數(shù)據(jù)，view層通過store.dispatch來分發(fā)action.

Getters:類似vue的計算屬性早像，主要用來過濾數(shù)據(jù)

Modules:模塊化管理 ??項目特別復雜的時候僻肖，可以讓每一個模塊擁有自己的state,mutation,action,getters，使得結構非常清晰卢鹦，方便管理

4.?vuex的工作流程臀脏？

在vue組件里面，通過dispatch來觸發(fā)actions提交修改數(shù)據(jù)的操作

然后再通過actions的commit來觸發(fā)mutations來修改數(shù)據(jù)

Mutations接收到commit的請求冀自，就會自動通過mutate來修改state里面的數(shù)據(jù)

最后由store觸發(fā)每一個調用它的組建的更新揉稚。

5.?Vue的生命周期？

BeforeCreated(實例創(chuàng)建前)：此時的vue實例還沒有掛載元素$el,數(shù)據(jù)對象data也是undefined

Created(實例創(chuàng)建完成)：vue實例的數(shù)據(jù)對象data有了熬粗，但是$el還沒有

beforeMount(實例載入前)：vue的實例的$el和data都初始化了搀玖，但還是掛載在之前的虛擬DOM節(jié)點上，data.message還沒替換荐糜。

Mounted(實力載入完成)：vue實例掛載完成巷怜，data.message成功渲染。

beforeUpdate(實例更新前)：data發(fā)生變化前

Updated(實例更新前)：data發(fā)生變化后

BeforeDestory(實例銷毀前)：在實例銷毀之前調用暴氏，實例仍然可用

Destory(實例銷毀完成)：所有的監(jiān)聽事件會被消除延塑，所有的子實例也會被銷毀

6.?vue常用的指令？

V-model ??v-html ??v-text ?v-for ?v-show ?v-if ?v-on

7.?V-if和v-show的區(qū)別答渔？

V-if是通過添加和刪除DOM節(jié)點來控制顯示隱藏关带，v-show是通過操作css的display屬性來控制顯示隱藏；

V-if擁有更高的切換成本，v-show擁有更高的渲染成本宋雏。

頻繁切換的時候使用v-show,不經常切換就使用v-if.

8.?V-for和v-if的優(yōu)先級芜飘？

當它們處于同一節(jié)點，v-for的優(yōu)先級比v-if更高磨总，這意味著v-if將分別重復運行于每個v-for的循環(huán)中嗦明。

9.?MVC ??MVP ??MVVM的區(qū)別？

MVC: MVC之間的數(shù)據(jù)通信都是單向的蚪燕。View(視圖層)發(fā)送指令到controller(控制層)娶牌，完成業(yè)務邏輯后，要求Model(模型層)改變狀態(tài)馆纳，匠心的數(shù)據(jù)發(fā)送到(view)視圖層诗良，用戶得到反饋。

MVP:在MVP中鲁驶，view和model之間沒有任何通信關系鉴裹，所有的通信和業(yè)務邏輯都放在presenter層中。View層發(fā)送指令到presenter層钥弯，presenter層處理業(yè)務邏輯径荔，要求model層改變狀態(tài)，完成狀態(tài)修改之后脆霎，發(fā)送指令到presenter層猖凛，之后再通知view層做出改變。

MVVM: Model專門用來處理數(shù)據(jù)模型绪穆。View專門用來處理用戶視圖辨泳，ViewModel用來使view和model雙向綁定，view的任何變化都會通知ViewModel,而model的任何變化也會通知ViewModel玖院，無論哪一項發(fā)生改變菠红，都會使對應的視圖/數(shù)據(jù)模型同時發(fā)生改變。

10.?Vue插槽难菌？

?

11.?什么是axios?

就是請求后臺資源的模塊试溯，前臺通過它獲取后臺數(shù)據(jù)，類似ajax交互

12.?怎么封裝axios?

?13.?路由傳參的方法郊酒？

https://segmentfault.com/a/1190000012393587?utm_source=tag-newest

14.?Vuex中actions和mutations的區(qū)別遇绞？

Mutations的更改是同步更改，用于用戶執(zhí)行直接數(shù)據(jù)更改燎窘，this.$store.commit(‘名’)觸發(fā)

Actions的更改是異步操作摹闽，用于需要與后端交互的數(shù)據(jù)更改,this.$store.dispath(“名”)觸發(fā)

注意：

1)：定義actions方法創(chuàng)建一個更改函數(shù)時，這個函數(shù)必須攜帶一個context參數(shù)褐健，用于觸發(fā)mutations方法付鹿，context.commit(‘修改函數(shù)名’ , ’異步請求值’)；

2)：mutations第一個參數(shù)必須傳入state，第二個參數(shù)是新值

15.?漸進式框架的理解舵匾？

項目介紹1

項目介紹：

項目背景：

商品列表渲染：

路由跳轉：

商品分類怎么實現(xiàn)的;

單選多選全選怎么實現(xiàn)的：

加入購物車怎么實現(xiàn)的;

登錄注冊怎么實現(xiàn);

登錄流程：

Loading動畫怎么實現(xiàn);

上拉加載俊抵，下拉刷新怎么實現(xiàn)：

圖片懶加載怎么實現(xiàn);

商品持久化存儲怎么實現(xiàn)的：（區(qū)別）

sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀坐梯。因此sessionStorage不是一種持久化的本地存儲徽诲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲吵血，除非主動刪除數(shù)據(jù)馏段，否則數(shù)據(jù)是永遠不會過期的。

webstorage和cookie的區(qū)別WebStorage的概念和cookie相似践瓷，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的亡蓉，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去晕翠，這樣無形中浪費了帶寬，另外cookie還需要指定作用域砍濒，不可以跨域調用淋肾。除此之外，WebStorage擁有setItem,getItem,removeItem,clear等方法爸邢，不像cookie需要前端開發(fā)者自己封裝setCookie樊卓，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互杠河，作為HTTP規(guī)范的一部分而存在碌尔，而WebStorage僅僅是為了在本地“存儲”數(shù)據(jù)而生。

做這個項目的過程中遇到的bug,怎么解決的：

移動端的性能優(yōu)化：

首屏加載和按需加載碧绞，懶加載 資源預加載 圖片壓縮處理绢记，使用base64內嵌圖片 合理緩存dom對象 使用touchstart代替click（click 300毫秒的延遲） 利用transform:translateZ(0)扳肛，開啟硬件GUP加速 不濫用web字體，不濫用float（布局計算消耗性能）叹坦，減少font-size聲明 使用viewport固定屏幕渲染，加速頁面渲染內容 盡量使用事件代理卑雁，避免直接事件綁定

項目介紹2

項目介紹：

項目背景：

數(shù)據(jù)渲染：

后臺權限管理是怎么實現(xiàn)的：

? ? ? ?定義兩張路由表募书，一張是靜態(tài)路由表（無需權限的使用），另一張是權限路由表（和后臺返回的權限進行匹配使用）测蹲。用戶登錄莹捡，判斷登錄是否成功，登錄成功后判斷是否獲取用戶權限列表扣甲，獲取到后道盏，將權限數(shù)據(jù)存儲到Vuex中。用Vuex中的權限數(shù)據(jù)和定義好的需要訪問權限的路由表進行比對。比對完后生成當前賬戶對應的權限路由表荷逞。通過addRouters方法動態(tài)添加路由規(guī)則媒咳，生成可訪問的側邊欄菜單。

跨域問題种远，怎么解決的：

原生javascript:

promise封裝axios(手寫):

如何合并對象(多個對象合成一個)：

Object.assign(o1,o2,o3,…)

Foreach和map的區(qū)別：

Foreach：沒有返回值涩澡，遍歷數(shù)組對每個值進行處理

Map()：有返回值，返回值組成一個新的數(shù)組

JSON.parse()與JSON.stringify()的區(qū)別：

JSON.parse()從一個字符串中解析出json對象

JSON.stringify()從一個對象中解析出字符串

跨域解決方法：

Jsonp：jsonp的原理坠敷，通過動態(tài)的創(chuàng)建script標簽妙同，其src屬性可以跨域引用文件，jsonp是請求之后后臺包裝好的一段json膝迎，并且把數(shù)據(jù)存放在一個callback回調函數(shù)中粥帚，返回一個js文件，動態(tài)的引入這個文件限次，調用callback芒涡，進行數(shù)據(jù)訪問。

回調地獄問題(異步回調)：

promise卖漫、generator费尽、async/await promise：

1.是一個對象，用來傳遞異步操作的信息羊始。代表著某個未來才會知道結果的時間旱幼，并未這個事件提供統(tǒng)一的api，供進異步處理 ?2.有了這個對象突委，就可以讓異步操作以同步的操作的流程來表達出來柏卤，避免層層嵌套的回調地獄 3.promise代表一個異步狀態(tài)，有三個狀態(tài)pending（進行中）匀油，Resolve(以完成）闷旧，Reject（失敗） 4.一旦狀態(tài)改變钧唐，就不會在變忙灼。任何時候都可以得到結果。從進行中變?yōu)橐酝瓿苫蛘呤?promise.all()里面狀態(tài)都改變钝侠，那就會輸出该园，得到一個數(shù)組 promise.race()里面只有一個狀態(tài)變?yōu)閞ejected或者fulfilled即輸出 promis.finally()不管指定不管Promise對象最后狀態(tài)如何，都會執(zhí)行的操作（本質上還是then方法的特例）

數(shù)組去重(手寫代碼)：

let arr = [1, 2, 3, 4, 5, 1, 2, 3, 5, 6, 7, 8, 1, 5];

function noRepeat(arr) {

????let result = [];

????for(let i = 0; i < arr.length; i++) {

????????if(!result.includes(arr[i])) {

????????????result.push(arr[i]);

????????}

????}

????return result;

}

console.log(noRepeat(arr));

字符串反轉(手寫代碼)：

var num = "123456789";

var result = num.split('').reverse().join('');

console.log(result);

閉包閉包作用：

閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)帅韧。閉包是將函數(shù)內部和函數(shù)外部連接起來的橋梁里初。

作用可以讀取函數(shù)內部的變量讓這些變量的值始終保持在內存中

缺點1.閉包的缺點就是常駐內存會增大內存使用量，并且使用不當容易造成內存泄漏2.如果不是因為某些特殊任務而需要閉包忽舟，在沒有必要的情況下双妨，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的淮阐，因為閉包對腳本性能具有負面影響，包括處理速度和內存消耗刁品。

原型 原型鏈：

作用域 作用域鏈：

作用域就是變量與函數(shù)的可訪問范圍

作用域分為全局作用域(所聲明的變量全局都可以訪問),局部作用域(所聲明的變量只在其內部可以訪問)

作用域鏈：當我們在一個函數(shù)內部訪問當前作用域內不存在的變量時泣特，就會逐層向外查找，如果一直找不到就會報錯挑随。當我們在局部作用域中状您，調用外部變量時，就產生了作用域鏈

描述一次完整的http請求：

查詢NDS(域名解析),獲取域名對應的IP地址查詢?yōu)g覽器緩存 ?2.瀏覽器與服務器建立tcp鏈接（三次握手）

第一次握手：客服端發(fā)送一個請求連接兜挨，服務器端只能確認自己可以接受客服端發(fā)送的報文段 第二次握手：服務端向客服端發(fā)送一個鏈接膏孟，確認客服端收到自己發(fā)送的報文段 第三次握手：服務器端確認客服端收到了自己發(fā)送的報文段3.瀏覽器向服務器發(fā)送http請求(請求和傳輸數(shù)據(jù)）4.服務器接受到這個請求后，根據(jù)路經參數(shù)拌汇，經過后端的一些處理生成html代碼返回給瀏覽器5.瀏覽器拿到完整的html頁面代碼開始解析和渲染柒桑，如果遇到外部的css或者js，圖片一樣的步驟6.瀏覽器根據(jù)拿到的資源對頁面進行渲染噪舀，把一個完整的頁面呈現(xiàn)出來

瀏覽器是如何渲染頁面的：

流程：解析html以及構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹 概念：

1.構建DOM樹： 渲染引擎解析HTML文檔魁淳，首先將標簽轉換成DOM樹中的DOM node(包括js生成的標簽)生成內容樹 2.構建渲染樹： 解析對應的css樣式文件信息（包括js生成的樣式和外部的css） 3.布局渲染樹：從根節(jié)點遞歸調用，計算每一個元素的大小傅联，位置等。給出每個節(jié)點所在的屏幕的精準位置 4.繪制渲染樹：遍歷渲染樹疚察，使用UI后端層來繪制每一個節(jié)點

事件委托的原理：

事件委托又叫事件冒泡蒸走，指把自身的事件交給父元素或祖先元素代為執(zhí)行

什么是深拷貝什么是淺拷貝：

把字符串轉駝峰(手寫) 例get-element-by-id轉為getElementById：

let str = 'get-element-by-id';

function toCamBakStr(str){

let strArr = str.split('-');

for(let i = 1; i < strArr.length; i++){

let start = strArr[i].charAt(0).toUpperCase();

let end = strArr[i].slice(1);

strArr[i] = start + end;

}

return strArr.join('');

}

let newStr = toCamBakStr(str);

console.log(newStr)//getElementById

http常見的狀態(tài)碼：

200：服務器成功處理了請求

400：客戶端發(fā)送了一個錯誤的請求

404：未找到資源

405：客戶端請求的額方法被禁止

408：服務器等待客戶端發(fā)送的請求時間過長，超時

500：服務器內部出現(xiàn)錯誤

501：服務器遇到錯誤貌嫡，使其無法對請求提供服務

同步異步問題：

同步：由于js單線程比驻，同步任務都在主線程上排隊執(zhí)行，前面任務沒有執(zhí)行完成岛抄，后面的任務會一直等待 異步：不進入主線程别惦，進入任務隊列，等待主線程任務執(zhí)行完成夫椭，開始執(zhí)行掸掸。最基本的異步操作SetTimemot和SetInterval,等待主線程任務執(zhí)行完，在開始執(zhí)行里面的函數(shù)

舉個例子.........

前端性能優(yōu)化手段：

盡可能使用雪碧圖

使用字體圖標代替圖片

Html,css蹭秋，js文件進行壓縮

模塊按需加載

資源懶加載與資源預加載

避免使用層級較深的選擇器扰付，以提高css渲染效率

緩存DOM，減少DOM深度以及DOM數(shù)量

移動端點透問題仁讨，如何解決：

點透問題出現(xiàn)的原因就是移動端click事件300ms延遲問題羽莺，當點擊上層元素時，先觸發(fā)touchstart事件洞豁，然后在300ms后會觸發(fā)click事件盐固，而此時上層元素已經消失荒给，所以下邊的元素會觸發(fā)click事件，這就是點透

解決方法:

使用一個透明遮罩刁卜，屏蔽所有事件志电，然后400ms（對于IOS來說是個理想值）后自動屏蔽

touchstart換成touchend，因為觸發(fā)touchend需要200ms所以可以把觸發(fā)時間這個原理問題解決掉

zepto最新版已經修復了這個問題长酗，或者使用fastclick等通用庫

直接使用click溪北，不考慮延遲

下層避開click事件，如a鏈接改為span等標簽夺脾，使用js跳轉頁面

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

Number ?String ?Undefined ?Null ?Object ?Boolean ?Symbol

單頁面和多頁面的區(qū)別優(yōu)缺點：

判斷字符串中出現(xiàn)次數(shù)最對的字符竄之拨，并統(tǒng)計出現(xiàn)的次數(shù)(手寫代碼)：

var string = 'yhthththt';

var obj = new Object();

for(var i=0;i<string.length;i++){

var value = string.charAt(i);

console.log(value)

if(obj[value]>0){

obj[value]++;

}else{

obj[value]=1;

}

}

for(var a in obj){

console.log(a+"出現(xiàn)的次數(shù)"+obj[a]+"次")

}

將數(shù)字12345678轉化成 RMB 形式 如： 12,345,678(手寫代碼)：

let price = 12345678;

function toRMB(price) {

let strArr = (price + '').split('').reverse();

let result = [];

for (let i = 0; i < strArr.length; i++) {

if (i % 3 === 0 && i !== 0) {

result.push(',');

}

result.push(strArr[i]);

}

return result.reverse().join('');

}

console.log(toRMB(price)); // 12,345,678

Es6你都用過哪些:

?

Css優(yōu)先級算法：

!important>內聯(lián)>ID選擇器>class選擇器>元素選擇器>通配符選擇器>繼承>瀏 ?覽器默認屬性