前端常用小知識

<meta charset="utf-8">

1. css 一行文本超出…

image

2.多行文本超出顯示…

image

3.IOS 手機(jī)容器滾動條滑動不流暢

image

4.修改滾動條樣式

隱藏 div 元素的滾動條

image
image

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

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

image

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

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

image

7.水平垂直居中

我一般只使用兩種方式 定位 或者 flex碱璃,我覺得夠用了弄痹。

image

父級控制子集居中

image

8.隱藏頁面元素

image

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,移動 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)摹蘑。

image

不過通過這個(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 是啥。

image

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)的方法。

image

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ù)組的變化斗幼。

image

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 原封不動的交給了 Reflect壹粟,如下拜隧。

image

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ù)貌矿。

image

15.解析連接 url

可以通過創(chuàng)建 a 標(biāo)簽炭菌,給 a 標(biāo)簽賦值 href 屬性的方式,獲取到協(xié)議逛漫,pathname黑低,origin 等 location 對象上的屬性。

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市克握,隨后出現(xiàn)的幾起案子蕾管,更是在濱河造成了極大的恐慌,老刑警劉巖菩暗,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掰曾,死亡現(xiàn)場離奇詭異,居然都是意外死亡停团,警方通過查閱死者的電腦和手機(jī)旷坦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來佑稠,“玉大人秒梅,你說我怎么就攤上這事∩嘟海” “怎么了捆蜀?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長幔嫂。 經(jīng)常有香客問我辆它,道長,這世上最難降的妖魔是什么履恩? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任娩井,我火速辦了婚禮,結(jié)果婚禮上似袁,老公的妹妹穿的比我還像新娘洞辣。我一直安慰自己,他們只是感情好昙衅,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布扬霜。 她就那樣靜靜地躺著,像睡著了一般而涉。 火紅的嫁衣襯著肌膚如雪著瓶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天啼县,我揣著相機(jī)與錄音材原,去河邊找鬼。 笑死季眷,一個(gè)胖子當(dāng)著我的面吹牛余蟹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播子刮,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼威酒,長吁一口氣:“原來是場噩夢啊……” “哼窑睁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起葵孤,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤担钮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后尤仍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體箫津,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年宰啦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苏遥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绑莺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惕耕,到底是詐尸還是另有隱情纺裁,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布司澎,位于F島的核電站欺缘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏挤安。R本人自食惡果不足惜谚殊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蛤铜。 院中可真熱鬧嫩絮,春花似錦、人聲如沸围肥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽穆刻。三九已至置尔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間氢伟,已是汗流浹背榜轿。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留朵锣,地道東北人谬盐。 一個(gè)月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像诚些,于是被迫代替她去往敵國和親设褐。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容