你會用到的 15 個前端小知識

css滿滿的乾貨： https://lhammer.cn/You-need-t...

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(/(<sup>1</sup>+)=(<sup>2</sup>+)/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; // 獲取path
aEle.origin;
aEle.host;
aEle.search;`

---

1. ?&= ↩
2. & ↩