你應該知道的前端小知識

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  滾動條的軌道（裏面裝有Thumb）

div::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，容許經過點擊微調小方塊的位置。

div::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）

div::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處

div::-webkit-resizer 兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

注意此方案有兼容性問題，通常須要隱藏滾動條時我都是用一個色塊經過定位蓋上去，或者將子級元素調大，父級元素使用overflow-hidden截掉滾動條部分。暴力且直接。

5.使用css寫出一個三角形角標

元素寬高設置爲0，經過border屬性來設置，讓其它三個方向的border顏色爲透明或者和背景色保持一致，剩餘一條border的顏色設置爲須要的顏色。

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

6.解決ios audio沒法自動播放、循環播放的問題

ios手機在使用audio或者video播放的時候，個別機型沒法實現自動播放，可以使用下面的代碼hack。

// 解決ios audio沒法自動播放、循環播放的問題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);
//循環播放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，但元素仍然存在，綁定的事件仍舊有效仍可觸發執行。

visibility-hidden：元素隱藏，但元素仍舊存在，頁面中沒法觸發該元素的事件。

9.前端工程化

一提到前端工程化不少人想到的都是webpack，這是不對的，webpack僅僅是前端工程化中的一環。在整個工程化過程當中他幫咱們解決了絕大多數的問題，但並無解決全部問題。

前端工程化是經過工具提高效率，下降成本的一種手段。

近些年被普遍的關注和探討，究其緣由主要是由於現代化前端應用功能要求不斷提升，業務邏輯日益複雜，做爲當下互聯網時代惟一不可或缺的技術，前端能夠說是佔據了整個開發行業的半壁江山。從傳統的網站，到如今的H5,移動App,桌面應用，以及小程序。前端技術幾乎是無所不能的全面覆蓋

在這些表象的背後呢，其實是行業對開發人員的要求發生了天翻地覆的變化，以往前端寫demo，套模板，調頁面這種刀耕火種的方式已經徹底不符合當下對開發效率的要求，前端工程化就是在這樣一個背景下被提上臺面，成爲前端工程師必備的手段之一。

通常來講前端工程包含，項目初始化，項目開發，集成，構建，打包，測試，部署等流程。工程化就是以工程的角度來解決這些問題。好比項目初始化咱們通常使用npm init, 建立頁面模板使用plop，咱們喜歡使用ES6+開發，可是須要經過babel編碼成ES5，持續集成的時候咱們使用git，可是爲了保持開發規範咱們引入了ESLint，部署通常使用ci/cd或者jenkins等等。

前端工程化是一個比較大的話題，後面咱們會單開話題來說。

10.contenteditable

html中大部分標籤都是不能夠編輯的，可是添加了contenteditable屬性以後，標籤會變成可編輯狀態。

<div contenteditable="true"></div>

不過經過這個屬性把標籤變爲可編輯狀態後只有input事件，沒有change事件。也不能像表單同樣經過maxlength控制最大長度。我也忘記我在什麼狀況下用到過了，後面想起來再補吧。

11.calc

這是一個css屬性，我通常稱之爲css表達式。能夠計算css的值。最有趣的是他能夠計算不一樣單位的差值。很好用的一個功能，缺點是不容易閱讀。接盤俠沒辦法一眼看出20px是啥。

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

12.Proxy和Object.defineProperty區別

Proxy的意思是代理，我通常教他攔截器，能夠攔截對象上的一個操做。用法以下，經過new的方式建立對象，第一個參數是被攔截的對象，第二個參數是對象操做的描述。實例化後返回一個新的對象，當咱們對這個新的對象進行操做時就會調用咱們描述中對應的方法。

new Proxy(target, {    get(target, property) {
    },    set(target, property) {
    },    deleteProperty(target, property) {
    }})

Proxy區別於Object.definedProperty。

Object.defineProperty只能監聽到屬性的讀寫，而Proxy除讀寫外還能夠監聽屬性的刪除，方法的調用等。

一般狀況下咱們想要監視數組的變化，基本要依靠重寫數組方法的方式實現，這也是Vue的實現方式，而Proxy能夠直接監視數組的變化。

const list = [1, 2, 3];const listproxy = new Proxy(list, {    set(target, property, value) {        target[property] = value;        return true; // 標識設置成功    }});
list.push(4);

Proxy是以非***的方式監管了對象的讀寫，而defineProperty須要按特定的方式定義對象的屬性。

13.Reflect

他是ES2015新增的對象，純靜態對象也就是不能被實例畫，只能經過靜態方法的方式調用，和Math對象相似，只能相似Math.random()的方式調用。

Reflect內部封裝了一系列對對象的底層操做，一共14個，其中1個被廢棄，還剩下13個。

Reflect的靜態方法和Proxy描述中的方法徹底一致。也就是說Reflect成員方法就是Proxy處理對象的默認實現。

Proxy對象默認的方法就是調用了Reflect內部的處理邏輯，也就是若是咱們調用get方法，那麼在內部，proxy就是將get原封不動的交給了Reflect，以下。

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

Reflect和Proxy沒有絕對的關係，咱們通常將他們兩個放在一塊兒講是爲了方便對兩者的理解。

那爲何會有Reflect對象呢，其實他最大的用處就是提供了一套統一操做Object的API。

判斷對象是否存在某一個屬性，可使用in操做符，可是不夠優雅，還可使用Reflect.has(obj, name); 刪除一個屬性可使用delete，也可使用Reflect.deleteProperty(obj, name); 獲取全部屬性名可使用Object.keys, 也可使用Reflect.ownKeys(obj); 咱們更推薦使用Reflect的API來操做對象，由於他纔是將來。

14.解析get參數

經過replace方法獲取url中的參數鍵值對，能夠快速解析get參數。

const q = {};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);console.log(q);

15.解析鏈接url

能夠經過建立a標籤，給a標籤賦值href屬性的方式，獲取到協議，pathname，origin等location對象上的屬性。

// 建立a標籤const aEle = document.createElement('a');// 給a標籤賦值href路徑aEle.href = '/test.html';// 訪問aEle中的屬性aEle.protocol; // 獲取協議aEle.pathname; // 獲取pathaEle.origin;aEle.host;aEle.search;...

未完待續...

https://juejin.cn/post/6898168495591292942