1. css 一行文本超出...
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
2.多行文本超出顯示...
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:?3;//此處的數(shù)字可變 此處是三行省略
overflow:hidden;
3.IOS 手機(jī)容器滾動條滑動不流暢
overflow:auto;
-webkit-overflow-scrolling:touch;
4.修改滾動條樣式
隱藏div元素的滾動條
div::-webkit-scrollbar{
display:?none;
}
div::-webkit-scrollbar滾動條整體部分
div::-webkit-scrollbar-thumb滾動條里面的小方塊励堡，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條
div::-webkit-scrollbar-track滾動條的軌道（里面裝有Thumb
div::-webkit-scrollbar-button滾動條的軌道的兩端按鈕察迟，允許通過點(diǎn)擊微調(diào)小方塊的位置
div::-webkit-scrollbar-track-piece內(nèi)層軌道伊滋，滾動條中間部分（除去
div::-webkit-scrollbar-corner邊角饲常，即兩個滾動條的交匯處
div::-webkit-resizer兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件注意此方案有兼容性問題，一般需要隱藏滾動條時我都是用一個色塊通過定位蓋上去，或者將子級元素調(diào)大宫盔，父級元素使用overflow-hidden截掉滾動條部分。暴力且直接享完。
5.使用 css 寫出一個三角形角標(biāo)
元素寬高設(shè)置為 0灼芭，通過border屬性來設(shè)置，讓其它三個方向的border顏色為透明或者和背景色保持一致般又，剩余一條border的顏色設(shè)置為需要的顏色彼绷。
div{
width:0;
height:0;
border:5pxsolid transparent;
border-top-color:?red;
}
6.解決 ios audio 無法自動播放巍佑、循環(huán)播放的問題
ios手機(jī)在使用audio或者video播放的時候，個別機(jī)型無法實(shí)現(xiàn)自動播放寄悯，可使用下面的代碼hack萤衰。
//?解決ios?audio無法自動播放、循環(huán)播放的問題
varmusic?=document.getElementById('video');
varstate?=0;
document.addEventListener('touchstart',function(){
if(state==0){
music.play();
state=1;
}
},false);
document.addEventListener("WeixinJSBridgeReady",function(){
music.play();
},false);
//循環(huán)播放
music.onended?=function(){
music.load();
music.play();
}
7.水平垂直居中
我一般只使用兩種方式 定位 或者flex猜旬，我覺得夠用了脆栋。
div{
width:100px;
height:100px;
position:?absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:?auto;
}
父級控制子集居中
.parent{
display:?flex;
justify-content:?center;
align-items:?center;
}
8.隱藏頁面元素(display:none;visibility:hidden;opacity:0的區(qū)別)
1、空間占據(jù)
display:none隱藏后不占據(jù)額外空間洒擦，它會產(chǎn)生回流和重繪椿争，
而visibility:hidden和opacity:0元素雖然隱藏了，但它們?nèi)匀徽紦?jù)著空間熟嫩，它們倆只會引起頁面重繪丘薛。
2、子元素繼承
display:none不會被子元素繼承邦危，但是父元素都不在了洋侨，子元素自然也就不會顯示了，皮之不存倦蚪，毛之安附~~
visibility:hidden 會被子元素繼承希坚，可以通過設(shè)置子元素visibility:visible 使子元素顯示出來
opacity: 0 也會被子元素繼承，但是不能通過設(shè)置子元素opacity: 0使其重新顯示
三陵且、事件綁定
display:none 的元素都已經(jīng)不再頁面存在了裁僧，因此肯定也無法觸發(fā)它上面綁定的事件；
visibility:hidden 元素上綁定的事件也無法觸發(fā)慕购；
opacity: 0元素上面綁定的事件是可以觸發(fā)的聊疲。
（這個就不太好在圖上看了，可以自己測試一下）
四沪悲、過渡動畫
transition對于display肯定是無效的获洲，大家應(yīng)該都知道；
transition對于visibility也是無效的殿如；
transition對于opacity是有效贡珊，大家也是知道的:).
9.前端工程化
一提到前端工程化很多人想到的都是webpack，這是不對的涉馁，webpack僅僅是前端工程化中的一環(huán)门岔。在整個工程化過程中他幫我們解決了絕大多數(shù)的問題，但并沒有解決所有問題烤送。
前端工程化是通過工具提升效率寒随，降低成本的一種手段。
近些年被廣泛的關(guān)注和探討，究其原因主要是因?yàn)楝F(xiàn)代化前端應(yīng)用功能要求不斷提高妻往，業(yè)務(wù)邏輯日益復(fù)雜逢防，作為當(dāng)下互聯(lián)網(wǎng)時代唯一不可或缺的技術(shù)，前端可以說是占據(jù)了整個開發(fā)行業(yè)的半壁江山蒲讯。從傳統(tǒng)的網(wǎng)站，到現(xiàn)在的 H5,移動 App,桌面應(yīng)用灰署，以及小程序判帮。前端技術(shù)幾乎是無所不能的全面覆蓋。
在這些表象的背后呢溉箕，實(shí)際上是行業(yè)對開發(fā)人員的要求發(fā)生了天翻地覆的變化晦墙，以往前端寫 demo，套模板肴茄，調(diào)頁面這種刀耕火種的方式已經(jīng)完全不符合當(dāng)下對開發(fā)效率的要求晌畅，前端工程化就是在這樣一個背景下被提上臺面，成為前端工程師必備的手段之一寡痰。
一般來說前端工程包含抗楔，項(xiàng)目初始化，項(xiàng)目開發(fā)拦坠，集成连躏，構(gòu)建，打包贞滨，測試入热，部署等流程。工程化就是以工程的角度來解決這些問題晓铆。比如項(xiàng)目初始化我們一般使用npm init, 創(chuàng)建頁面模板使用 plop勺良，我們喜歡使用 ES6+開發(fā)，但是需要通過 babel 編碼成 ES5骄噪，持續(xù)集成的時候我們使用 git尚困，但是為了保持開發(fā)規(guī)范我們引入了 ESLint，部署一般使用 ci/cd 或者 jenkins 等等链蕊。
前端工程化是一個比較大的話題尾组，后面我們會單開話題來講。
10.contenteditable
html中大部分標(biāo)簽都是不可以編輯的示弓，但是添加了contenteditable屬性之后讳侨，標(biāo)簽會變成可編輯狀態(tài)。
不過通過這個屬性把標(biāo)簽變?yōu)榭删庉嫚顟B(tài)后只有input事件奏属，沒有change事件跨跨。也不能像表單一樣通過maxlength控制最大長度。我也忘記我在什么情況下用到過了，后面想起來再補(bǔ)吧勇婴。
11.calc
這是一個css屬性忱嘹，我一般稱之為css表達(dá)式「剩可以計算css的值拘悦。最有趣的是他可以計算不同單位的差值。很好用的一個功能橱脸，缺點(diǎn)是不容易閱讀础米。接盤俠沒辦法一眼看出20px是啥。
div{
width:calc(25%-20px);
}
12.Proxy 和 Object.defineProperty 區(qū)別
Proxy的意思是代理添诉，我一般教他攔截器屁桑，可以攔截對象上的一個操作。用法如下栏赴，通過new的方式創(chuàng)建對象蘑斧，第一個參數(shù)是被攔截的對象，第二個參數(shù)是對象操作的描述须眷。實(shí)例化后返回一個新的對象竖瘾，當(dāng)我們對這個新的對象進(jìn)行操作時就會調(diào)用我們描述中對應(yīng)的方法。
newProxy(target,?{
get(target,?property)?{
},
set(target,?property)?{
},
deleteProperty(target,?property)?{
}
})
Proxy區(qū)別于Object.definedProperty花颗。
Object.defineProperty只能監(jiān)聽到屬性的讀寫准浴，而Proxy除讀寫外還可以監(jiān)聽屬性的刪除，方法的調(diào)用等捎稚。
通常情況下我們想要監(jiān)視數(shù)組的變化乐横，基本要依靠重寫數(shù)組方法的方式實(shí)現(xiàn)，這也是 Vue 的實(shí)現(xiàn)方式今野，而Proxy可以直接監(jiān)視數(shù)組的變化葡公。
constlist?=?[1,2,3];
constlistproxy?=newProxy(list,?{
set(target,?property,?value)?{
target[property]?=?value;
returntrue;//?標(biāo)識設(shè)置成功
}
});
list.push(4);
Proxy是以非入侵的方式監(jiān)管了對象的讀寫，而defineProperty需要按特定的方式定義對象的屬性条霜。
13.Reflect
他是ES2015新增的對象催什，純靜態(tài)對象也就是不能被實(shí)例畫，只能通過靜態(tài)方法的方式調(diào)用宰睡，和Math對象類似蒲凶，只能類似Math.random的方式調(diào)用。
Reflect內(nèi)部封裝了一系列對對象的底層操作拆内，一共 14 個旋圆，其中 1 個被廢棄，還剩下 13 個麸恍。
Reflect的靜態(tài)方法和Proxy描述中的方法完全一致灵巧。也就是說Reflect成員方法就是Proxy處理對象的默認(rèn)實(shí)現(xiàn)搀矫。
Proxy對象默認(rèn)的方法就是調(diào)用了Reflect內(nèi)部的處理邏輯，也就是如果我們調(diào)用get方法刻肄，那么在內(nèi)部瓤球，proxy就是將get原封不動的交給了Reflect，如下敏弃。
constproxy?=newProxy(obj,?{
get(target,?property)?{
returnReflect.get(target,?property);
}
})
Reflect和Proxy沒有絕對的關(guān)系卦羡，我們一般將他們兩個放在一起講是為了方便對二者的理解。
那為什么會有Reflect對象呢麦到，其實(shí)他最大的用處就是提供了一套統(tǒng)一操作Object的API绿饵。判斷對象是否存在某一個屬性，可以使用in操作符隅要，但是不夠優(yōu)雅，還可以使用Reflect.has(obj, name); 刪除一個屬性可以使用delete董济，也可以使用Reflect.deleteProperty(obj, name); 獲取所有屬性名可以使用Object.keys, 也可以使用Reflect.ownKeys(obj); 我們更推薦使用Reflect的API來操作對象步清，因?yàn)樗攀俏磥怼?/p>
14.解析 get 參數(shù)
通過replace方法獲取url中的參數(shù)鍵值對，可以快速解析get參數(shù)虏肾。
constq?=?{};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
15.解析連接 url
可以通過創(chuàng)建a標(biāo)簽廓啊，給a標(biāo)簽賦值href屬性的方式，獲取到協(xié)議封豪，pathname谴轮，origin等location對象上的屬性。
//?創(chuàng)建a標(biāo)簽
constaEle?=document.createElement('a');
//?給a標(biāo)簽賦值href路徑
aEle.href?='/test.html';
//?訪問aEle中的屬性
aEle.protocol;//?獲取協(xié)議
aEle.pathname;//?獲取path
aEle.origin;
aEle.host;
aEle.search;
