1.什么是事件代理且描述事件代理的原理及為什么要用事件代理乳幸？
2.移動端1px問題摔踱，為什么會有？如何解決暮蹂？
3.解釋jsonp的原理
4.在工作中你是如何優(yōu)化自己的代碼的签夭？
5.axios是什么？如何使用椎侠？描述其實現(xiàn)登錄的流程
6.用JS去掉數(shù)組里面重復(fù)的數(shù)據(jù)第租，并且打印出來? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var? ?arr = [a,b,c,d,d,e,a,b,f,g]
One，什么是事件代理且描述事件代理的原理及為什么要用事件代理我纪？
? ? ? ? 事件委托就是利用事件冒泡慎宾，只指定一個事件處理程序，就可以管理某一類型的所有事件
? ? ? ? 像電商購物車的控制數(shù)量加減刪除等功能就利用了事件委托浅悉，現(xiàn)有的dom節(jié)點有事件趟据，新添加的dom節(jié)點也有事件
? ? ? ? 事件冒泡：
? ? ? ? 事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢术健？就是事件從最深的節(jié)點開始汹碱，然后逐步向上傳? ? 播事件? ?
? ? ? ? 有這樣一個機制，那么我們給最外面的div加點擊事件荞估，那么里面的ul咳促，li，a做點擊事件的時候勘伺，都會冒泡到最外層的div上跪腹，所以都會觸發(fā)，這就是事件委托飞醉，委托它們父級代為執(zhí)行事件冲茸。
? ? ? ? ?為什么用事件代理：
? ? ? ? ?在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能缅帘，因為需要不斷的與dom節(jié)點進(jìn)行交互轴术，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多钦无，就會延長整個頁面的交互就緒時間逗栽，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；如果要用事件委托铃诬，就會將所有的操作放到j(luò)s程序里面祭陷，與dom的操作就只需要交互一次苍凛，這樣就能大大的減少與dom的交互次數(shù)，提高性能
? ? ? ? ? 簡單說每個函數(shù)都是一個對象兵志，而只要是對象就會占用內(nèi)存醇蝴，對象越多內(nèi)存消耗越大，就影響了性能想罕，而如果使用事件委托悠栓，則只需對父級進(jìn)行操作，這樣就只使用一個對象也就是函數(shù)就夠了
Two按价，移動端1px問題惭适，為什么會有？如何解決楼镐？
? ? ? ? ? ? 由于不同的手機有不同的像素密度導(dǎo)致的癞志。如果移動顯示屏的分辨率始終是普通屏幕的2倍，1px的邊框在devicePixelRatio=2的移動顯示屏下會顯示成2px框产，所以在高清瓶下看著1px總是感覺變胖了
解決方案
1.在ios8+中當(dāng)devicePixelRatio=2的時候使用0.5px
p{
????border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
???? p{
???? ????border:0.5px solid #000;
???? }
}
2.偽類 + transform 實現(xiàn)
對于老項目偽類+transform是比較完美的方法了凄杯。
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border 秉宿，并 transform 的 scale 縮小一半戒突，原先的元素相對定位，新做的 border 絕對定位描睦。
單條border樣式設(shè)置：
.scale-1px{ position: relative; border:none; }
.scale-1px:after{
????content: '';
????position: absolute; bottom: 0;
????background: #000;
????width: 100%; height: 1px;
????-webkit-transform: scaleY(0.5);
????transform: scaleY(0.5);
???? -webkit-transform-origin: 0 0;
????transform-origin: 0 0;?
}
優(yōu)點：所有場景都能滿足膊存，支持圓角(偽類和本體類都需要加border-radius)
缺點：對于已經(jīng)使用偽類的元素(例如clearfix)，可能需要多層嵌套
3.viewport + rem 實現(xiàn)
????????這種兼容方案相對比較完美忱叭，適合新的項目隔崎，老的項目修改成本過大。
????????在devicePixelRatio = 2 時窑多，輸出viewport：
????????在devicePixelRatio = 3 時仍稀，輸出viewport：
????????優(yōu)點：所有場景都能滿足，一套代碼埂息，可以兼容基本所有布局
????????缺點：老項目修改代價過大，只適用于新項目
4.使用box-shadow模擬邊框
利用css 對陰影處理的方式實現(xiàn)0.5px的效果
樣式設(shè)置：
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
優(yōu)點：代碼量少遥巴，可以滿足所有場景
缺點：邊框有陰影千康，顏色變淺
Three.解釋jsonp的原理
?????jsonp的原理:就是利用瀏覽器可以動態(tài)地插入一段js并執(zhí)行的特點完成的。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?注意：jsonp只支持get請求? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsonp的核心是動態(tài)添加script標(biāo)簽調(diào)用服務(wù)器提供的js腳本? ??
簡單封裝：
? ? ? ?原理：因為瀏覽器有同源策略铲掐，script標(biāo)簽的src屬性,src屬性不僅僅可以寫 JS文件拾弃，可以請求任意文件，通過JS這一特點實現(xiàn)摆霉，并添加async（異步屬性）豪椿，在js文件中封裝函數(shù)奔坟，函數(shù)中進(jìn)行異步操作
Four.在工作中你是如何優(yōu)化自己的代碼的？
命名規(guī)范搭盾；
注釋覆蓋率50%以上咳秉；
避免全局變量；
避免修改原生API鸯隅；
拆分函數(shù)澜建，避免函數(shù)過于臃腫；
函數(shù)專注于做一件事情蝌以；
模塊化封裝炕舵；
組件化開發(fā)；
對于常量始終保持先定義后使用跟畅；
對于兩個分支的判斷咽筋，使用三目運算符，對于多個分支的判斷使用switch語句徊件；
減少DOM操作晤硕，減少頁面重繪；
盡可能使用 === 而不是 ==庇忌，避免隱式轉(zhuǎn)換舞箍。
Five.? ?axios是什么？如何使用皆疹？描述其實現(xiàn)登錄的流程
? ? ??Axios 是一個基于 promise 的 HTTP 庫疏橄，簡單的講就是可以發(fā)送get、post請求略就。
? ? ?在特性里面已經(jīng)有提到捎迫，瀏覽器發(fā)送請求，或者Node.js發(fā)送請求都可以用到Axios
使用：npm install axios或<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
引入模塊后可以直接使用
? ?//Get
? ?function(){
? ? ? ? axios.get('/user',{params:{ID:12345}}).then(function(response)
? ? ? ? ? ? ? ? ? {console.log(response);
? ? ? ? ? ? ?})
? ?}
//Post
function(){
? ? ? ?axios.post('/url',{name:'a',sex:'women'}).then(function(res){
? ? ? ? ? ? ? console.log(res)
? ? ? ?})
}
也可以使用拼接字符串的方式使用post請求
let name = 'a'? ? ?let sex = 'women'
`url+${name}+${sex}`
使用axios實現(xiàn)登陸：首先我們需要登陸的接口表牢，登陸是post請求窄绒，將用戶名和密碼作為參數(shù)提交到后臺上，只需要獲取到用戶名和密碼這兩條數(shù)據(jù)并提交到接口就好崔兴，提交后彰导，后臺會返回一條數(shù)據(jù)給我們，成功會給我們一條token值敲茄，拿到token值后位谋，就可以進(jìn)行對用戶的編寫，失敗則會返回失敗堰燎，根據(jù)這兩條數(shù)據(jù)來判斷是否登陸成功
six.? ? 用JS去掉數(shù)組里面重復(fù)的數(shù)據(jù)掏父，并且打印出來? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var? ?arr = [a,b,c,d,d,e,a,b,f,g]
? ? ? 數(shù)組元素不是字符串，都是未定義的變量秆剪，小四你真黑啊
