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:5pxsolid#transparent;
border-top-color:red;
}

6.解決 ios audio 無法自動播放、迴圈播放的問題

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

//解決iosaudio無法自動播放、迴圈播放的問題
varmusic=document.getElementById('video');
varstate=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.前端工程化

10.contenteditable

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

<divcontenteditable="true"></div>

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

11.calc

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

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

12.Proxy 和 Object.defineProperty 區別

Proxy的意思是代理，我一般教他攔截器，可以攔截物件上的一個操作。用法如下，通過new的方式建立物件，第一個引數是被攔截的物件，第二個引數是物件操作的描述。例項化後返回一個新的物件，當我們對這個新的物件進行操作時就會呼叫我們描述中對應的方法。

newProxy(target,{
get(target,property){

},
set(target,property){

},
deleteProperty(target,property){

}
})

Proxy區別於Object.definedProperty。

Object.defineProperty只能監聽到屬性的讀寫，而Proxy除讀寫外還可以監聽屬性的刪除，方法的呼叫等。

通常情況下我們想要監視陣列的變化，基本要依靠重寫陣列方法的方式實現，這也是 Vue 的實現方式，而Proxy可以直接監視陣列的變化。

constlist=[1,2,3];
constlistproxy=newProxy(list,{
set(target,property,value){
target[property]=value;
returntrue;//標識設定成功
}
});

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，如下。

constproxy=newProxy(obj,{
get(target,property){
returnReflect.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引數。

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

15.解析連線 url

可以通過建立a標籤，給a標籤賦值href屬性的方式，獲取到協議，pathname，origin等location物件上的屬性。

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