<meta charset="utf-8">
1. css 一行文本超出…
2.多行文本超出顯示…
3.IOS 手機(jī)容器滾動條滑動不流暢
4.修改滾動條樣式
隱藏 div 元素的滾動條
5.使用 css 寫出一個(gè)三角形角標(biāo)
元素寬高設(shè)置為 0斗忌,通過 border 屬性來設(shè)置,讓其它三個(gè)方向的 border 顏色為透明或者和背景色保持一致旺聚,剩余一條 border 的顏色設(shè)置為需要的顏色织阳。
6.解決 ios audio 無法自動播放、循環(huán)播放的問題
ios 手機(jī)在使用 audio 或者 video 播放的時(shí)候砰粹,個(gè)別機(jī)型無法實(shí)現(xiàn)自動播放唧躲,可使用下面的代碼 hack。
7.水平垂直居中
我一般只使用兩種方式 定位 或者 flex碱璃,我覺得夠用了弄痹。
父級控制子集居中
8.隱藏頁面元素
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)摹蘑。
不過通過這個(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 是啥。
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)的方法。
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ù)組的變化斗幼。
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壹粟,如下拜隧。
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ù)貌矿。
15.解析連接 url
可以通過創(chuàng)建 a 標(biāo)簽炭菌,給 a 標(biāo)簽賦值 href 屬性的方式,獲取到協(xié)議逛漫,pathname黑低,origin 等 location 對象上的屬性。