你會用到的 15個前端小知識
作者：隱冬
https://juejin.cn/post/6898168495591292942
1. 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 手機容器滾動條滑動不流暢
overflow:?auto;
-webkit-overflow-scrolling:?touch;
4.修改滾動條樣式
隱藏?div?元素的滾動條
div::-webkit-scrollbar?{
????display:?none;
}
div::-webkit-scrollbar?滾動條整體部分div::-webkit-scrollbar-thumb?滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條div::-webkit-scrollbar-track?滾動條的軌道（里面裝有?Thumbdiv::-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 寫出一個三角形角標
元素寬高設(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?手機在使用?audio?或者?video?播放的時候，個別機型無法實現(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ù)雜，作為當下互聯(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)完全不符合當下對開發(fā)效率的要求，前端工程化就是在這樣一個背景下被提上臺面，成為前端工程師必備的手段之一。
一般來說前端工程包含，項目初始化，項目開發(fā)，集成，構(gòu)建，打包，測試，部署等流程。工程化就是以工程的角度來解決這些問題。比如項目初始化我們一般使用npm init, 創(chuàng)建頁面模板使用 plop，我們喜歡使用 ES6+開發(fā)，但是需要通過 babel 編碼成 ES5，持續(xù)集成的時候我們使用 git，但是為了保持開發(fā)規(guī)范我們引入了 ESLint，部署一般使用 ci/cd 或者 jenkins 等等。
前端工程化是一個比較大的話題，后面我們會單開話題來講。
10.contenteditable
html?中大部分標簽都是不可以編輯的，但是添加了?contenteditable?屬性之后，標簽會變成可編輯狀態(tài)。
<div?contenteditable="true">div>
不過通過這個屬性把標簽變?yōu)榭删庉嫚顟B(tài)后只有?input?事件，沒有?change?事件。也不能像表單一樣通過?maxlength?控制最大長度。我也忘記我在什么情況下用到過了，后面想起來再補吧。
11.calc
這是一個?css?屬性，我一般稱之為?css?表達式。可以計算?css?的值。最有趣的是他可以計算不同單位的差值。很好用的一個功能，缺點是不容易閱讀。接盤俠沒辦法一眼看出?20px?是啥。
div?{
????width:?calc(25%?-?20px);
}
12.Proxy 和 Object.defineProperty 區(qū)別
Proxy?的意思是代理，我一般教他攔截器，可以攔截對象上的一個操作。用法如下，通過?new?的方式創(chuàng)建對象，第一個參數(shù)是被攔截的對象，第二個參數(shù)是對象操作的描述。實例化后返回一個新的對象，當我們對這個新的對象進行操作時就會調(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;?//?標識設(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?處理對象的默認實現(xiàn)。
Proxy?對象默認的方法就是調(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?標簽，給?a?標簽賦值?href?屬性的方式，獲取到協(xié)議，pathname，origin?等?location?對象上的屬性。
//?創(chuàng)建a標簽
const?aEle?=?document.createElement('a');
//?給a標簽賦值href路徑
aEle.href?=?'/test.html';
//?訪問aEle中的屬性
aEle.protocol;?//?獲取協(xié)議
aEle.pathname;?//?獲取path
aEle.origin;
aEle.host;
aEle.search;推薦閱讀