1. css 一行文本超出...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行文本超出顯示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 根據(jù)實際情況修改
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à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: 5px solid #transparent;
border-top-color: red;
}
6.解決 ios audio 無法自動播放拾氓、循環(huán)播放的問題
ios 手機(jī)在使用 audio 或者 video 播放的時候，個別機(jī)型無法實現(xiàn)自動播放底哥，可使用下面的代碼 hack咙鞍。
// 解決ios audio無法自動播放、循環(huán)播放的問題
var music = document.getElementById('video');
var state = 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: 元素不存在，從 dom 中刪除
opacity-0: 元素透明度將為 0孵奶，但元素仍然存在疲酌，綁定的事件仍舊有效仍可觸發(fā)執(zhí)行。
visibility-hidden：元素隱藏了袁，但元素仍舊存在朗恳，頁面中無法觸發(fā)該元素的事件。
9.前端工程化
一提到前端工程化很多人想到的都是 webpack早像，這是不對的僻肖，webpack 僅僅是前端工程化中的一環(huán)。在整個工程化過程中他幫我們解決了絕大多數(shù)的問題卢鹦，但并沒有解決所有問題。
前端工程化是通過工具提升效率，降低成本的一種手段冀自。
近些年被廣泛的關(guān)注和探討揉稚，究其原因主要是因為現(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ù)幾乎是無所不能的全面覆蓋含末。
在這些表象的背后呢猜拾，實際上是行業(yè)對開發(fā)人員的要求發(fā)生了天翻地覆的變化，以往前端寫 demo佣盒，套模板挎袜，調(diào)頁面這種刀耕火種的方式已經(jīng)完全不符合當(dāng)下對開發(fā)效率的要求，前端工程化就是在這樣一個背景下被提上臺面肥惭，成為前端工程師必備的手段之一盯仪。
一般來說前端工程包含，項目初始化蜜葱，項目開發(fā)全景，集成，構(gòu)建牵囤，打包蚪燕，測試，部署等流程奔浅。工程化就是以工程的角度來解決這些問題馆纳。比如項目初始化我們一般使用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)狈惫。
<div contenteditable="true"></div>
不過通過這個屬性把標(biāo)簽變?yōu)榭删庉嫚顟B(tài)后只有 input 事件睛蛛，沒有 change 事件。也不能像表單一樣通過 maxlength 控制最大長度。我也忘記我在什么情況下用到過了忆肾，后面想起來再補(bǔ)吧荸频。
11.calc
這是一個 css 屬性，我一般稱之為 css 表達(dá)式客冈⌒翊樱可以計算 css 的值。最有趣的是他可以計算不同單位的差值场仲。很好用的一個功能和悦，缺點是不容易閱讀。接盤俠沒辦法一眼看出 20px 是啥渠缕。
div {
width: calc(25% - 20px);
}
12.Proxy 和 Object.defineProperty 區(qū)別
Proxy 的意思是代理鸽素，我一般教他攔截器，可以攔截對象上的一個操作褐健。用法如下付鹿，通過 new 的方式創(chuàng)建對象，第一個參數(shù)是被攔截的對象蚜迅，第二個參數(shù)是對象操作的描述舵匾。實例化后返回一個新的對象，當(dāng)我們對這個新的對象進(jìn)行操作時就會調(diào)用我們描述中對應(yīng)的方法谁不。
new Proxy(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ù)組方法的方式實現(xiàn)偷溺，這也是 Vue 的實現(xiàn)方式蹋辅，而 Proxy 可以直接監(jiān)視數(shù)組的變化。
const list = [1, 2, 3];
const listproxy = new Proxy(list, {
set(target, property, value) {
target[property] = value;
return true; // 標(biāo)識設(shè)置成功
}
});
list.push(4);
Proxy 是以非入侵的方式監(jiān)管了對象的讀寫挫掏，而 defineProperty 需要按特定的方式定義對象的屬性侦另。
13.Reflect
他是 ES2015 新增的對象，純靜態(tài)對象也就是不能被實例畫尉共，只能通過靜態(tài)方法的方式調(diào)用褒傅，和 Math 對象類似，只能類似 Math.random 的方式調(diào)用袄友。
Reflect 內(nèi)部封裝了一系列對對象的底層操作殿托，一共 14 個，其中 1 個被廢棄剧蚣，還剩下 13 個支竹。
Reflect 的靜態(tài)方法和 Proxy 描述中的方法完全一致旋廷。也就是說 Reflect 成員方法就是 Proxy 處理對象的默認(rèn)實現(xiàn)。
Proxy 對象默認(rèn)的方法就是調(diào)用了 Reflect 內(nèi)部的處理邏輯唾戚，也就是如果我們調(diào)用 get 方法柳洋，那么在內(nèi)部待诅，proxy 就是將 get 原封不動的交給了 Reflect叹坦，如下。
const proxy = new Proxy(obj, {
get(target, property) {
return Reflect.get(target, property);
}
})
Reflect 和 Proxy 沒有絕對的關(guān)系卑雁，我們一般將他們兩個放在一起講是為了方便對二者的理解募书。
那為什么會有 Reflect 對象呢，其實他最大的用處就是提供了一套統(tǒng)一操作 Object 的 API测蹲。判斷對象是否存在某一個屬性莹捡，可以使用 in 操作符，但是不夠優(yōu)雅扣甲，還可以使用Reflect.has(obj, name); 刪除一個屬性可以使用 delete篮赢，也可以使用 Reflect.deleteProperty(obj, name); 獲取所有屬性名可以使用 Object.keys, 也可以使用 Reflect.ownKeys(obj); 我們更推薦使用 Reflect 的 API 來操作對象，因為他才是未來琉挖。
14.解析 get 參數(shù)
通過 replace 方法獲取 url 中的參數(shù)鍵值對启泣，可以快速解析 get 參數(shù)。
const q = {};
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)簽
const aEle = document.createElement('a');
// 給a標(biāo)簽賦值href路徑
aEle.href = '/test.html';
// 訪問aEle中的屬性
aEle.protocol; // 獲取協(xié)議
aEle.pathname; // 獲取path
aEle.origin;
aEle.host;
aEle.search;
