- css 一行文本超出...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行文本超出顯示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
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: 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 的值玖像。最有趣的是他可以計算不同單位的差值。很好用的一個功能齐饮，缺點(diǎn)是不容易閱讀捐寥。接盤俠沒辦法一眼看出 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;
