你會用到的 15 個(gè)前端小知識

作者：，鏈接：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 手機(jī)容器滾動(dòng)條滑動(dòng)不流暢

overflow:?auto;
-webkit-overflow-scrolling:?touch;

4.修改滾動(dòng)條樣式

隱藏 div 元素的滾動(dòng)條

div::-webkit-scrollbar?{
????display:?none;
}

• div::-webkit-scrollbar 滾動(dòng)條整體部分
• div::-webkit-scrollbar-thumb 滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條
• div::-webkit-scrollbar-track 滾動(dòng)條的軌道（里面裝有 Thumb
• div::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置
• div::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去
• div::-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處
• div::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過拖動(dòng)調(diào)整元素大小的小控件注意此方案有兼容性問題，一般需要隱藏滾動(dòng)條時(shí)我都是用一個(gè)色塊通過定位蓋上去，或者將子級元素調(diào)大，父級元素使用 overflow-hidden 截掉滾動(dòng)條部分。暴力且直接。

5.使用 css 寫出一個(gè)三角形角標(biāo)

元素寬高設(shè)置為 0，通過 border 屬性來設(shè)置，讓其它三個(gè)方向的 border 顏色為透明或者和背景色保持一致，剩余一條 border 的顏色設(shè)置為需要的顏色。

div?{
????width:?0;
????height:?0;
????border:?5px?solid?#transparent;
????border-top-color:?red;
}

6.解決 ios audio 無法自動(dòng)播放、循環(huán)播放的問題

ios 手機(jī)在使用 audio 或者 video 播放的時(shí)候，個(gè)別機(jī)型無法實(shí)現(xiàn)自動(dòng)播放，可使用下面的代碼 hack。

//?解決ios?audio無法自動(dòng)播放、循環(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)。在整個(gè)工程化過程中他幫我們解決了絕大多數(shù)的問題，但并沒有解決所有問題。

前端工程化是通過工具提升效率，降低成本的一種手段。

近些年被廣泛的關(guān)注和探討，究其原因主要是因?yàn)楝F(xiàn)代化前端應(yīng)用功能要求不斷提高，業(yè)務(wù)邏輯日益復(fù)雜，作為當(dāng)下互聯(lián)網(wǎng)時(shí)代唯一不可或缺的技術(shù)，前端可以說是占據(jù)了整個(gè)開發(fā)行業(yè)的半壁江山。從傳統(tǒng)的網(wǎng)站，到現(xiàn)在的 H5,移動(dòng) App,桌面應(yīng)用，以及小程序。前端技術(shù)幾乎是無所不能的全面覆蓋。

在這些表象的背后呢，實(shí)際上是行業(yè)對開發(fā)人員的要求發(fā)生了天翻地覆的變化，以往前端寫 demo，套模板，調(diào)頁面這種刀耕火種的方式已經(jīng)完全不符合當(dāng)下對開發(fā)效率的要求，前端工程化就是在這樣一個(gè)背景下被提上臺面，成為前端工程師必備的手段之一。

一般來說前端工程包含，項(xiàng)目初始化，項(xiàng)目開發(fā)，集成，構(gòu)建，打包，測試，部署等流程。工程化就是以工程的角度來解決這些問題。比如項(xiàng)目初始化我們一般使用npm init, 創(chuàng)建頁面模板使用 plop，我們喜歡使用 ES6+開發(fā)，但是需要通過 babel 編碼成 ES5，持續(xù)集成的時(shí)候我們使用 git，但是為了保持開發(fā)規(guī)范我們引入了 ESLint，部署一般使用 ci/cd 或者 jenkins 等等。

前端工程化是一個(gè)比較大的話題，后面我們會單開話題來講。

10.contenteditable

html 中大部分標(biāo)簽都是不可以編輯的，但是添加了 contenteditable 屬性之后，標(biāo)簽會變成可編輯狀態(tài)。

<div?contenteditable="true">div>

不過通過這個(gè)屬性把標(biāo)簽變?yōu)榭删庉嫚顟B(tài)后只有 input 事件，沒有 change 事件。也不能像表單一樣通過 maxlength 控制最大長度。我也忘記我在什么情況下用到過了，后面想起來再補(bǔ)吧。

11.calc

這是一個(gè) css 屬性，我一般稱之為 css 表達(dá)式。可以計(jì)算 css 的值。最有趣的是他可以計(jì)算不同單位的差值。很好用的一個(gè)功能，缺點(diǎn)是不容易閱讀。接盤俠沒辦法一眼看出 20px 是啥。

div?{
????width:?calc(25%?-?20px);
}

12.Proxy 和 Object.defineProperty 區(qū)別

Proxy 的意思是代理，我一般教他攔截器，可以攔截對象上的一個(gè)操作。用法如下，通過 new 的方式創(chuàng)建對象，第一個(gè)參數(shù)是被攔截的對象，第二個(gè)參數(shù)是對象操作的描述。實(shí)例化后返回一個(gè)新的對象，當(dāng)我們對這個(gè)新的對象進(jìn)行操作時(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ù)組方法的方式實(shí)現(xiàn)，這也是 Vue 的實(shí)現(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)對象也就是不能被實(shí)例畫，只能通過靜態(tài)方法的方式調(diào)用，和 Math 對象類似，只能類似 Math.random 的方式調(diào)用。

Reflect 內(nèi)部封裝了一系列對對象的底層操作，一共 14 個(gè)，其中 1 個(gè)被廢棄，還剩下 13 個(gè)。

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 原封不動(dòng)的交給了 Reflect，如下。

const?proxy?=?new?Proxy(obj,?{
????get(target,?property)?{
????????return?Reflect.get(target,?property);
????}
})

Reflect 和 Proxy 沒有絕對的關(guān)系，我們一般將他們兩個(gè)放在一起講是為了方便對二者的理解。

那為什么會有 Reflect 對象呢，其實(shí)他最大的用處就是提供了一套統(tǒng)一操作 Object 的 API。判斷對象是否存在某一個(gè)屬性，可以使用 in 操作符，但是不夠優(yōu)雅，還可以使用Reflect.has(obj, name); 刪除一個(gè)屬性可以使用 delete，也可以使用 Reflect.deleteProperty(obj, name); 獲取所有屬性名可以使用 Object.keys, 也可以使用 Reflect.ownKeys(obj); 我們更推薦使用 Reflect 的 API 來操作對象，因?yàn)樗攀俏磥怼?/p>

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;

1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習(xí)」！
3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持