【W(wǎng)eb技術(shù)】840- 你會(huì)用到的 15個(gè)前端小知識(shí)
作者：隱冬
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)條的軌道（里面裝有?Thumbdiv::-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è)色塊通過定位蓋上去，或者將子級(jí)元素調(diào)大，父級(jí)元素使用?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;
}
父級(jí)控制子集居中
.parent?{
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
8.隱藏頁(yè)面元素
display-none: 元素不存在，從?dom?中刪除opacity-0: 元素透明度將為 0，但元素仍然存在，綁定的事件仍舊有效仍可觸發(fā)執(zhí)行。visibility-hidden：元素隱藏，但元素仍舊存在，頁(yè)面中無法觸發(fā)該元素的事件。
9.前端工程化
一提到前端工程化很多人想到的都是?webpack，這是不對(duì)的，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è)對(duì)開發(fā)人員的要求發(fā)生了天翻地覆的變化，以往前端寫 demo，套模板，調(diào)頁(yè)面這種刀耕火種的方式已經(jīng)完全不符合當(dāng)下對(duì)開發(fā)效率的要求，前端工程化就是在這樣一個(gè)背景下被提上臺(tái)面，成為前端工程師必備的手段之一。
一般來說前端工程包含，項(xiàng)目初始化，項(xiàng)目開發(fā)，集成，構(gòu)建，打包，測(cè)試，部署等流程。工程化就是以工程的角度來解決這些問題。比如項(xiàng)目初始化我們一般使用npm init, 創(chuàng)建頁(yè)面模板使用 plop，我們喜歡使用 ES6+開發(fā)，但是需要通過 babel 編碼成 ES5，持續(xù)集成的時(shí)候我們使用 git，但是為了保持開發(fā)規(guī)范我們引入了 ESLint，部署一般使用 ci/cd 或者 jenkins 等等。
前端工程化是一個(gè)比較大的話題，后面我們會(huì)單開話題來講。
10.contenteditable
html?中大部分標(biāo)簽都是不可以編輯的，但是添加了?contenteditable?屬性之后，標(biāo)簽會(huì)變成可編輯狀態(tài)。
<div?contenteditable="true">div>
不過通過這個(gè)屬性把標(biāo)簽變?yōu)榭删庉嫚顟B(tài)后只有?input?事件，沒有?change?事件。也不能像表單一樣通過?maxlength?控制最大長(zhǎng)度。我也忘記我在什么情況下用到過了，后面想起來再補(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?的意思是代理，我一般教他攔截器，可以攔截對(duì)象上的一個(gè)操作。用法如下，通過?new?的方式創(chuàng)建對(duì)象，第一個(gè)參數(shù)是被攔截的對(duì)象，第二個(gè)參數(shù)是對(duì)象操作的描述。實(shí)例化后返回一個(gè)新的對(duì)象，當(dāng)我們對(duì)這個(gè)新的對(duì)象進(jìn)行操作時(shí)就會(huì)調(diào)用我們描述中對(duì)應(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í)設(shè)置成功
????}
});
list.push(4);
Proxy?是以非入侵的方式監(jiān)管了對(duì)象的讀寫，而?defineProperty?需要按特定的方式定義對(duì)象的屬性。
13.Reflect
他是?ES2015?新增的對(duì)象，純靜態(tài)對(duì)象也就是不能被實(shí)例畫，只能通過靜態(tài)方法的方式調(diào)用，和?Math?對(duì)象類似，只能類似?Math.random?的方式調(diào)用。
Reflect?內(nèi)部封裝了一系列對(duì)對(duì)象的底層操作，一共 14 個(gè)，其中 1 個(gè)被廢棄，還剩下 13 個(gè)。
Reflect?的靜態(tài)方法和?Proxy?描述中的方法完全一致。也就是說?Reflect?成員方法就是?Proxy?處理對(duì)象的默認(rèn)實(shí)現(xiàn)。
Proxy?對(duì)象默認(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?沒有絕對(duì)的關(guān)系，我們一般將他們兩個(gè)放在一起講是為了方便對(duì)二者的理解。
那為什么會(huì)有?Reflect?對(duì)象呢，其實(shí)他最大的用處就是提供了一套統(tǒng)一操作?Object?的?API。判斷對(duì)象是否存在某一個(gè)屬性，可以使用?in?操作符，但是不夠優(yōu)雅，還可以使用Reflect.has(obj, name); 刪除一個(gè)屬性可以使用?delete，也可以使用?Reflect.deleteProperty(obj, name); 獲取所有屬性名可以使用?Object.keys, 也可以使用?Reflect.ownKeys(obj); 我們更推薦使用?Reflect?的?API?來操作對(duì)象，因?yàn)樗攀俏磥怼?/p>
14.解析 get 參數(shù)
通過?replace?方法獲取?url?中的參數(shù)鍵值對(duì)，可以快速解析?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?對(duì)象上的屬性。
//?創(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. JavaScript 重溫系列（22篇全） 2. ECMAScript 重溫系列（10篇全） 3. JavaScript設(shè)計(jì)模式 重溫系列（9篇全） 4.?正則 / 框架 / 算法等 重溫系列（16篇全） 5.?Webpack4 入門（上）||?Webpack4 入門（下） 6.?MobX 入門（上）?||??MobX 入門（下） 7. 100+篇原創(chuàng)系列匯總 回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 100+ 篇原創(chuàng)文章
