his是一個(gè)關(guān)鍵字，表示執(zhí)行當(dāng)前函數(shù)的對(duì)象
function fn(){
console.log(this); //window
console.log(typeof this); //object
}
fn();
- 嚴(yán)格模式下，this指向undefiend
"use strict";
function fn(){
console.log(this); //undefined
}
fn();
文章目錄
0.官方文檔：
1.webpack概述：
2.webpack的基本使用：
3.在項(xiàng)目中安裝和配置 webpack：
4.配置自定義打包的自定義入口和出口：
4.配置自動(dòng)打包功能：
5.配置生成預(yù)覽頁(yè)面功能：
6.配置自動(dòng)打包相關(guān)參數(shù)：
7.webpack 中的加載器：
8.loader加載器的基本使用：
9.Vue單文件組件：
10.webpack 打包發(fā)布：
11.以上所有配置 webpack.config.js 截圖
1.webpack概述：
webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具(打包工具) ,可以解決當(dāng)前web開發(fā)中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問(wèn)題、性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開發(fā)效率和項(xiàng)目的可維護(hù)性
2.webpack的基本使用：
2.1：打開終端運(yùn)行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）
2.3：如果需要引入 jquery 庫(kù) 終端運(yùn)行以下命令npm install jquery -S 安裝 jquery
自己在src文件夾中創(chuàng)建 index.js 引入下載的jquery包import $ from 'jquery'
3.在項(xiàng)目中安裝和配置 webpack：
3.1：終端運(yùn)行 npm install webpack-cli -D 命令，安裝webpack相關(guān)的包
這里要注意一個(gè)問(wèn)題 : package.json 和 package-lock.json 文件里的名字默認(rèn)為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現(xiàn)無(wú)法安裝的問(wèn)題
具體可點(diǎn)擊這里 Webpack依賴包安裝問(wèn)題解決方案
3.2：在項(xiàng)目根目錄中 ，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建議選擇 development （打包速度快，體積大），項(xiàng)目上線是才改成 production (如果選擇production會(huì)進(jìn)行代碼的壓縮和混淆，打包速度慢，體積小)
3.4：在package.json中的 script節(jié)點(diǎn) 新增一個(gè)dev腳本 值為 webpack ，就可以實(shí)現(xiàn)打包功能
在終端運(yùn)行命令：npm run dev 就可以打包 默認(rèn)打包成main.js在 dist文件夾中
在src自己新建的index.html 中引入打包后的 js
屬性描述符就是一個(gè)屬性除了屬性名與屬性值之外的其他相關(guān)信息
通過(guò)Object.getOwnPropertyDescriptor(對(duì)象, 屬性名)可以得到一個(gè)對(duì)象的某個(gè)屬性的屬性描述符
let obj = {
a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
通過(guò)Object.getOwnPropertyDescriptors(對(duì)象)可以得到某個(gè)對(duì)象的所有屬性描述符
let obj = {
a: 1,
b: 2
}
console.log(Object.getOwnPropertyDescriptors(obj));
// {
// a: {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
// b: {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }
// }
接下來(lái),說(shuō)一說(shuō)每一個(gè)屬性描述符的作用
不多逼逼
當(dāng)我們?cè)O(shè)置configurable為false以后,再去修改屬性描述符的話,會(huì)報(bào)錯(cuò)
let obj = {
a: 1,
b: 2
}
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: false
})
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: true
})
// Uncaught TypeError: Cannot redefine property: a
// at Function.defineProperty (<anonymous>)
當(dāng)設(shè)置一個(gè)屬性的enumerable為false時(shí),該屬性不可被forin循環(huán)
但是不影響forof循環(huán),因?yàn)閒orof循環(huán)看有沒(méi)有Symbol(Symbol.iterator)
forin循環(huán)的是屬性名,forof循環(huán)的是屬性值
不用看時(shí)間，你沒(méi)有穿越，現(xiàn)在是 2020 年，不是 2000 年。這復(fù)古的字體設(shè)計(jì)和這帶有年代感的落日背景，以及悠揚(yáng)壯闊的背景音樂(lè)，甚至讓我以為是在看二十年前新年晚會(huì)的演出視頻。
△ 視頻鏈接：https://v.youku.com/v_show/id_XNDYzNTE2MzgxNg==.html
不得了，不得了，恒大足球場(chǎng)的宣傳視頻甚至登上了央視的廣告舞臺(tái)，展示給了全國(guó)觀眾，壕氣十足，花開富貴，這絢爛的煙花背景，讓我瞬間夢(mèng)回三十年前。
建筑不僅外表華麗，其實(shí)文化內(nèi)涵還很深厚，與中老年表情包冥冥之中有了一個(gè)巧妙的對(duì)應(yīng)，蘊(yùn)含著給你帶來(lái)好運(yùn)，祝你平安健康。
據(jù)網(wǎng)友考據(jù)，設(shè)計(jì)理念可能來(lái)自于一盆多肉，為了更加貼近人民群眾的生活，讓人們時(shí)時(shí)感受到自然的美妙。
還有網(wǎng)友幻想出最終建設(shè)完成時(shí)的終極形態(tài)，積極對(duì)建筑進(jìn)行了自己的解讀和創(chuàng)作，看這廣泛的聯(lián)合角色設(shè)計(jì)，佛祖、紅孩兒；這跨越多個(gè)時(shí)代的風(fēng)格雜糅，上個(gè)世紀(jì)的吉祥如意、這個(gè)世紀(jì)的游戲建模；涵蓋多個(gè)領(lǐng)域的蓮花主題，植物、彩燈，應(yīng)有盡有，真是妙??！
什么？你覺得不好看嗎？這可是恒大總裁許家印從 9 種蓮花寶座設(shè)計(jì)方案中精挑細(xì)選出來(lái)的一個(gè)！九種不同的蓮花設(shè)計(jì)方案，深淺不同的粉紅色，看不出有多大不同的開合程度，微微不一樣的花瓣設(shè)計(jì)，供你瞪大雙眼選擇。
你問(wèn)：可以阻止這個(gè)色彩絢麗的建筑修建起來(lái)么？來(lái)晚了，蓮花寶座已經(jīng)于 4 月 16 日開始修建，屆時(shí)會(huì)成為世界規(guī)模最大的頂尖專業(yè)足球場(chǎng)。開心一點(diǎn)，說(shuō)不定以后能在中國(guó)看世界杯了呢。
既然是世界規(guī)模最大的頂尖足球場(chǎng)！為什么不修好看一點(diǎn)？這什么設(shè)計(jì)師，這種紅配綠，亮瞎人眼的設(shè)計(jì)是哪個(gè)沙雕公司設(shè)計(jì)的？許老板這么有錢，怎么不請(qǐng)好一點(diǎn)的設(shè)計(jì)師呢。廣州這么時(shí)尚的城市配上這樣的土味建筑，真是令人頭大。其實(shí)，你可能罵錯(cuò)人了。背后的設(shè)計(jì)公司可是 Gensler，現(xiàn)在世界上數(shù)一數(shù)二的的設(shè)計(jì)團(tuán)隊(duì)。這不是變魔術(shù)，設(shè)計(jì)出上面土味十足的建筑和下面高級(jí)感撲面而來(lái)的建筑的就是一個(gè)團(tuán)隊(duì)。
上海中心大廈（右一），憑借其獨(dú)特的造型和樓高，榮獲諸多大獎(jiǎng)，成為上海地標(biāo)性的建筑之一。
還有菲律賓金融中心大廈，與周圍的建筑對(duì)比起來(lái)，科技感和現(xiàn)代感十足，在 CBD 群中獨(dú)占鰲頭。
又或者是在波士頓起到樞紐作用的綜合體建筑設(shè)計(jì)，一眼望去稱霸整個(gè)地區(qū)。
這怎么看，都不像是一個(gè)團(tuán)隊(duì)設(shè)計(jì)出來(lái)的作品。蓮花球場(chǎng)和高級(jí)感相關(guān)在哪里？這不是隨隨便便一個(gè)設(shè)計(jì)師都可以設(shè)計(jì)出來(lái)的么？其實(shí)，這也不是許老板第一次這么偏愛蓮花了，看看?；◢u項(xiàng)目就知道了，網(wǎng)友調(diào)侃說(shuō)到，果然設(shè)計(jì)師還是敗給了金錢。
不過(guò)同樣是以蓮花為設(shè)計(jì)元素，印度的蓮花寺怎么看起來(lái)就這么高端優(yōu)雅呢？與蓮花球場(chǎng)「土味建筑」不同的是，蓮花寺廣受好評(píng)，被稱為新德里的「悉尼歌劇院」。
類似蓮花球場(chǎng)這樣的案例在中國(guó)還有很多。之前被評(píng)為 2017 年中國(guó)最丑陋的十大建筑之一的廣州圓大廈，由意大利米蘭設(shè)計(jì)師 Joseph di Pasquale 設(shè)計(jì)，他在采訪中說(shuō)到：「中國(guó)改變了他，讓他知道了文化如何融于建筑，如何更好地滿足客戶的欲望。」其實(shí)建筑的寓意「雙環(huán)玉璧」是很好的，但是最終的效果不盡人意，建筑類似于黃金的外表顏色，被網(wǎng)友們吐槽，稱其為「土豪圓」。
不過(guò)設(shè)計(jì)這個(gè)事情，有時(shí)候也很難去用單純的美丑判別。例如設(shè)計(jì)出臺(tái)北 101 大廈的李祖原老師，在同年設(shè)計(jì)出的沈陽(yáng)方圓大廈，是參考銅錢的形狀設(shè)計(jì)而成。在 2000 年威尼斯世界建筑設(shè)計(jì)展覽會(huì)上被稱贊為是「世界上最具創(chuàng)意性和革命性的完美建筑」，但在 2012 年卻被 CNN 旗下的生活旅游網(wǎng)評(píng)選為全球最丑的十大建筑之一。
你以為這就結(jié)束了嗎？別走，奇葩建筑還有很多，中國(guó)各個(gè)省都互不相讓。首先我們從南看起，海南三亞的「美麗之冠」，就是后面那些像樹一樣的建筑，一模一樣的樓不知道為什么要修建九個(gè)。
往北走，我們來(lái)到了官方宣傳視頻里寫到的「不來(lái)萬(wàn)家麗，枉來(lái)中國(guó)行」，之中的世界最大建筑「長(zhǎng)沙萬(wàn)家麗」。這棟同樣金碧輝煌、中西結(jié)合的建筑讓你深刻體會(huì)到一句話「有錢就是可以為所欲為」。不論是美是丑是否合適，只要是自己喜歡的元素，通通都堆砌在一棟建筑里。
接著我們來(lái)到了山東的文成城堡，沈騰的《西虹市首富》取景地，看看這個(gè)豪華程度，一晃神還以為自己來(lái)到了歐洲。
最后我們來(lái)到河北，學(xué)習(xí)魔法不需要出國(guó)，直接來(lái)河北美術(shù)學(xué)院，一個(gè)被戲稱為「霍格沃茨華北分?！沟拿佬g(shù)帝國(guó)，由于其仿照魔法學(xué)院進(jìn)行的設(shè)計(jì)，在中國(guó)眾多美院中獨(dú)樹一幟。
以上這些奇葩建筑的盤點(diǎn)，均來(lái)自于 B 站 up 主史里芬 Schlieffen，一個(gè)被長(zhǎng)沙萬(wàn)家麗老板黃總盛情邀請(qǐng)?jiān)俅误w驗(yàn)萬(wàn)家麗的男人。盤點(diǎn)中國(guó)奇葩建筑，現(xiàn)代青年當(dāng)仁不讓。想要了解中國(guó)建筑底層設(shè)計(jì)的朋友，可以前去品鑒和觀賞，不要怪我用丑陋和土味蒙蔽了你們的雙眼。押韻的解說(shuō)詞，第一視角的全方位建筑講解，你值得擁有。
主頁(yè)鏈接：https://space.bilibili.com/323733137/
這樣的建筑作品很新鮮但是確實(shí)不美觀。且不說(shuō)中國(guó)其實(shí)有很多好的設(shè)計(jì)師，為什么和國(guó)外知名設(shè)計(jì)團(tuán)隊(duì)合作，做出來(lái)的作品依舊差強(qiáng)人意呢？難不成是我們的審美水平真的已經(jīng)淪落成這個(gè)地步了？如果哪天全民都覺得這樣的建筑是美的，都欣賞這樣的建筑，那我們整個(gè)社會(huì)才算是陷入了「惡趣味審美」之中，就真正完蛋了。標(biāo)榜著以「蓮花綻放」這一美好寓意為核心的蓮花球場(chǎng)設(shè)計(jì)，何嘗不是披著虛偽外衣的土味建筑設(shè)計(jì)呢？美能夠讓人感到幸福，反過(guò)來(lái)，丑則使人感到不適。
對(duì)于蓮花寶座外形的足球場(chǎng)設(shè)計(jì)，我想開了，畢竟我不是亞洲第五富，眾位設(shè)計(jì)師，你們是怎樣看待的呢？
文章來(lái)源：優(yōu)設(shè)
feed 單詞釋義：v. 喂養(yǎng)；進(jìn)食；為……提供充足的食物；施肥；為（某人）提供（信息、主意等）；
n. 飼料；飼養(yǎng)；（尤指給動(dòng)物或嬰兒）喂食；進(jìn)食；（計(jì)算機(jī)的）訂閱源
形象來(lái)講，如今新浪微博、微信朋友圈、抖音、今日頭條、小紅書、Facebook、QQ 空間等等內(nèi)容平臺(tái)每時(shí)每刻都在不斷投喂給我們賴以維系健康生活（廢柴生活）的精神食糧——信息內(nèi)容。而這些信息組合起來(lái)的格式便是 feed。
1. Feed
feed 是一種信息格式，平臺(tái)通過(guò)它將資訊傳遞給用戶。feed 是信息聚合的最小單元，每一條狀態(tài)或者消息都是 Feed，比如朋友圈中的一個(gè)動(dòng)態(tài)就是一個(gè)Feed，微博中的一條微博就是一個(gè) Feed。
2. Feed流
feed 流即持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。每個(gè)人的朋友圈，微博關(guān)注頁(yè)，頭條新聞等等都是一個(gè) Feed 流。
Feed 源于早期的 RSS（Really Simple Syndication ）
RSS（簡(jiǎn)易信息聚合）：將用戶主動(dòng)訂閱的若干消息源組合在一起形成內(nèi)容（aggregator），幫助用戶持續(xù)地獲取的訂閱源內(nèi)容。對(duì)用戶而言，聚合器是專門用來(lái)訂閱網(wǎng)站的軟件，一般亦稱為 RSS 閱讀器、feed 閱讀器、新聞閱讀器等。用戶選擇訂閱多個(gè)訂閱源，網(wǎng)站提供 feed 網(wǎng)址 ，用戶將 feed 網(wǎng)址登記到聚合器里，在聚合器里形成聚合頁(yè)，用戶便能持續(xù)地獲取的訂閱源內(nèi)容。
在早期的 Web 時(shí)代，訂閱源一般是新聞網(wǎng)站以及博客。用戶主動(dòng)訂閱感興趣的多個(gè)訂閱源，訂閱器幫用戶及時(shí)更新訂閱源信息，然后按照 timeline 時(shí)間順序展示出來(lái)。這樣，用戶可以通過(guò)訂閱器獲取即時(shí)信息，而不用每天都檢查各個(gè)訂閱源是否有更新。
轉(zhuǎn)折出現(xiàn)在 2006 年，F(xiàn)acebook 宣布了一項(xiàng)新的首頁(yè)形式「News Feed」，這一形式打破了傳統(tǒng) RSS 的訂閱方式。News Feed 可以看做一個(gè)新型聚合器，訂閱源不僅僅是某個(gè)網(wǎng)址、某個(gè)新聞網(wǎng)站或者某個(gè)內(nèi)容，而是生產(chǎn)內(nèi)容的人或者團(tuán)體，而內(nèi)容即是好友或關(guān)注對(duì)象的動(dòng)態(tài)（發(fā)布的內(nèi)容以及其他的社交行為）。News Feed 的出現(xiàn)使得 RSS 被迫淡出歷史舞臺(tái)。News Feed 發(fā)展至今已經(jīng)拓展出多種多樣的模式和呈現(xiàn)方式。
推模式：每當(dāng)用戶發(fā)帖，對(duì)所有粉絲推送一條該用戶的動(dòng)態(tài)消息記錄。需要考慮的是如果一個(gè)粉絲量級(jí)非常大的用戶（大 V），發(fā)布一條動(dòng)態(tài)那么需要在每個(gè)粉絲頁(yè)推送一條動(dòng)態(tài)，多個(gè)大 V 級(jí)別用戶同時(shí)發(fā)帖對(duì)數(shù)據(jù)的存儲(chǔ)負(fù)荷是非常大的。
拉模式：每當(dāng)請(qǐng)求好友動(dòng)態(tài)，拉取用戶所有關(guān)注者的最近動(dòng)態(tài)，然后匯總排序。如果用戶同時(shí)關(guān)注非常多的用戶，那么查詢這類型的用戶的關(guān)注列表也是很大的數(shù)據(jù)成本。
推拉模式：在線推，離線拉；定時(shí)推，離線拉。
除了關(guān)注 feed 流的主要模式之外，feed 流的排序方式也值得一提：
Timeline：按發(fā)布的時(shí)間順序排序，先發(fā)布的先看到，后發(fā)布的排列在最頂端，類似于微信朋友圈等。這也是一種最常見的形式。產(chǎn)品如果選擇 Timeline 類型，那么就是認(rèn)為 feed 流中的 feed 不多，但是每個(gè) feed 都很重要，都需要用戶看到。
Rank：按某個(gè)非時(shí)間的因子排序，一般是按照用戶的喜好度排序，用戶最喜歡的排在最前面，次喜歡的排在后面。這種一般假定用戶可能看到的 Feed 非常多，而用戶花費(fèi)在這里的時(shí)間有限，那么就為用戶選擇出用戶最想看的 Top N 結(jié)果，場(chǎng)景的應(yīng)用場(chǎng)景有微博、頭條新聞推薦類、商品、視頻推薦等。
目前 feed 流的主流排序方式不再嚴(yán)格按照 timeline，而是廣泛使用智能 feed 排序。
智能排序基于趨勢(shì) trending、熱門 hot、用戶生產(chǎn) UGC 、編輯推薦 PGC、相似 Similarity 等等因素綜合考慮，隨著技術(shù)的進(jìn)步，智能算法將會(huì)更加懂得用戶的喜好。新的 feed 流不再需要用戶主動(dòng)訂閱或者搜索，只要監(jiān)測(cè)我們的瀏覽時(shí)長(zhǎng)、點(diǎn)贊分享等動(dòng)作，或者建立用戶畫像類別，就可以主動(dòng)推薦我們感興趣的內(nèi)容。它對(duì)我們了如指掌，給我們想了解的，讓我們不停刷新沉溺于其中。就現(xiàn)在 feed 流中的廣告，女性用戶對(duì)化妝品的喜好，男性用戶對(duì)車的偏愛，臨時(shí)借錢的窘迫，這些暖廣告已經(jīng)不再像牛皮癬一樣惹人討厭，甚至變成了一顆我們?cè)敢獬韵碌陌怖?
可以有以下大致分類：
feed 作為信息聚合的最小單元，每一個(gè) feed 都會(huì)具備相應(yīng)的內(nèi)容。其中包括發(fā)布的時(shí)間、發(fā)布者、文字內(nèi)容、圖片內(nèi)容，還包含點(diǎn)贊、轉(zhuǎn)發(fā)、評(píng)論、關(guān)注等操作、根據(jù)應(yīng)用場(chǎng)景、業(yè)務(wù)目標(biāo)不同，其表現(xiàn)方式也大有不同，任何表現(xiàn)形式都應(yīng)該是為了更好地呈現(xiàn)功能及內(nèi)容。
新聞資訊類產(chǎn)品和社交互動(dòng)類產(chǎn)品 feed 元素大體相同，區(qū)別在于新聞資訊類產(chǎn)品通常著重展現(xiàn)新聞內(nèi)容，標(biāo)題，簡(jiǎn)介，匹配的圖片等，而發(fā)布時(shí)間和發(fā)布作者等會(huì)在單個(gè) feed 的底部出現(xiàn)。在圖文兼?zhèn)涞呐虐娌季种?，左文右圖適合文字內(nèi)容類比如文章或者知乎、豆瓣等長(zhǎng)答案評(píng)論等，圖片是輔助信息支撐文字內(nèi)容。左圖右文圖片更加吸引人的注意通常出現(xiàn)在商品信息比如什么值得買。
社交互動(dòng)類產(chǎn)品，其最終目的是發(fā)現(xiàn)和拓展社交關(guān)系，融入相應(yīng)的社交圈。而這時(shí)候社交拓展的基本單位人或者團(tuán)體發(fā)揮著至關(guān)重要的作用。所以我們可以發(fā)現(xiàn)，通常的社交互動(dòng)軟件都會(huì)將發(fā)布者頭像放在上部展示的位置，也會(huì)在底部突出點(diǎn)贊，評(píng)論，分享等互動(dòng)操作。
視頻直播類產(chǎn)品與前兩者相異，頁(yè)面的大部分空間留給視頻內(nèi)容的展示，一般一屏只承載一個(gè) feed 信息單元，內(nèi)容等提示元素在左側(cè)呈現(xiàn)，除回復(fù)評(píng)論等操作元素列在右側(cè)。
feed 中各元素的位置關(guān)系、所占比例與產(chǎn)品自身定位密切相關(guān)。如微博作為泛社交應(yīng)用產(chǎn)品，社交關(guān)系主要建立在內(nèi)容上，社交關(guān)系質(zhì)量較弱，多為單向傳播，注重的是傳播的速度和內(nèi)容公開。所以其 feed 的呈現(xiàn)方式發(fā)布者與發(fā)布內(nèi)容不做明顯的設(shè)計(jì)排布區(qū)分。以卡片間隔的形式在 feed 與 feed 之間做區(qū)隔。評(píng)論頁(yè)面在下一層級(jí)。
微信是作為一個(gè)社交工具，社交關(guān)系質(zhì)量較強(qiáng)，多為雙向關(guān)系，注重的是私人內(nèi)容的交流和互動(dòng)，信息的傳播速度不快，但受眾信息消化率很高。所以將發(fā)布者頭像與發(fā)布內(nèi)容做出較明顯區(qū)分，feed 與 feed 之間因?yàn)橐呀?jīng)有了頭像元素這一明顯區(qū)別要素，僅用分割線做區(qū)隔。且注重評(píng)論區(qū)域的互動(dòng)與展示。
無(wú)論怎樣的設(shè)計(jì)布局方式，遵循的核心思想始終是根據(jù)場(chǎng)景需求、業(yè)務(wù)目標(biāo)去發(fā)展深化設(shè)計(jì)方案。每一個(gè)設(shè)計(jì)點(diǎn)都要有足夠的支撐，多問(wèn)問(wèn)自己為什么這么設(shè)計(jì)，解決了用戶什么樣的問(wèn)題？還有沒(méi)有更好的替代方案？而不是這樣設(shè)計(jì)是不是新穎，出奇制勝。
文章來(lái)源：優(yōu)設(shè) 作者：Nicole
性能優(yōu)化(網(wǎng)絡(luò)方向)
web應(yīng)用無(wú)非是兩臺(tái)主機(jī)之間互相傳輸數(shù)據(jù)包的一個(gè)過(guò)程; 如何減少傳輸過(guò)程的耗時(shí)就是網(wǎng)絡(luò)方向優(yōu)化的重點(diǎn), 優(yōu)化出發(fā)點(diǎn)從第一篇文章中說(shuō)起
DNS解析過(guò)程的優(yōu)化
當(dāng)瀏覽器從第三方服務(wù)跨域請(qǐng)求資源的時(shí)候,在瀏覽器發(fā)起請(qǐng)求之前,這個(gè)第三方的跨域域名需要被解析為一個(gè)IP地址,這個(gè)過(guò)程就是DNS解析;
DNS緩存可以用來(lái)減少這個(gè)過(guò)程的耗時(shí),DNS解析可能會(huì)增加請(qǐng)求的延遲,對(duì)于那些需要請(qǐng)求許多第三方的資源的網(wǎng)站而言,DNS解析的耗時(shí)延遲可能會(huì)大大降低網(wǎng)頁(yè)加載性能。
dns-prefetch
當(dāng)站點(diǎn)引用跨域域上的資源時(shí),都應(yīng)在<head>元素中放置dns-prefetch提示,但是要記住一些注意事項(xiàng)。首先,dns-prefetch僅對(duì)跨域域上的DNS查找有效,因此請(qǐng)避免將其用于您當(dāng)前訪問(wèn)的站點(diǎn)
<link rel="dns-prefetch" >
preconnect
由于dns-prefetch僅執(zhí)行DNS查找,但preconnect會(huì)建立與服務(wù)器的連接。如果站點(diǎn)是通過(guò)HTTPS服務(wù)的,則此過(guò)程包括DNS解析,建立TCP連接以及執(zhí)行TLS握手。將兩者結(jié)合起來(lái)可提供機(jī)會(huì),進(jìn)一步減少跨源請(qǐng)求的感知延遲
<!-- 注意順序, precontent和dns-prefetch的兼容性 -->
<link rel="preconnect" crossorigin>
<link rel="dns-prefetch" >
TCP傳輸階段優(yōu)化
這個(gè)前端方面好像能做的有限, 我們都知道 http協(xié)議 是基于 tcp的;
升級(jí)http協(xié)議版本可以考慮下, 比如把 http/1.0 -> http/1.1 -> http/2;
這個(gè)需要我們?cè)趹?yīng)用服務(wù)器上配置(nginx, Apache等), 不做概述了, 另外還需要客戶端和服務(wù)器都支持哦, 目前還沒(méi)開發(fā)出穩(wěn)定版本,好多只支持https,不過(guò)也不遠(yuǎn)了...
http2 的優(yōu)勢(shì)
# 1.多路復(fù)用: 同一個(gè)tcp連接傳輸多個(gè)資源
這樣可以突破統(tǒng)一域名下只允許有限個(gè)tcp同時(shí)連接,
這樣http1.1所做的減少請(qǐng)求數(shù)優(yōu)化就沒(méi)有太大必要了
如多張小圖合成一張大圖(雪碧圖),合并js和css文件
# 2.報(bào)文頭壓縮和二進(jìn)制編碼: 減少傳輸體積
http1 中第一次請(qǐng)求有完整的http報(bào)文頭部,第二次請(qǐng)求的也是;
http2 中第一次請(qǐng)求有完整的http報(bào)文頭部,第二次請(qǐng)求只會(huì)攜帶 path 字段;
這樣就大大減少了發(fā)送的量。這個(gè)的實(shí)現(xiàn)要求客戶端和服務(wù)同時(shí)維護(hù)一個(gè)報(bào)文頭表。
# 3.Server Push
http2可以讓服務(wù)先把其它很可能客戶端會(huì)請(qǐng)求的資源(比如圖片)先push發(fā)給你,
不用等到請(qǐng)求的時(shí)候再發(fā)送,這樣可以提高頁(yè)面整體的加載速度
但目前支持性不太好...emm...
總的來(lái)說(shuō), 在 c 端業(yè)務(wù)下不會(huì)太普及, 畢竟需要軟件支持才行...
http 請(qǐng)求響應(yīng)階段優(yōu)化
為了讓數(shù)據(jù)包傳輸?shù)母? 我們可以從兩個(gè)方面入手: 請(qǐng)求的數(shù)據(jù)包大小(服務(wù)器), 請(qǐng)求數(shù)據(jù)包的頻率(客戶端)
減少請(qǐng)求文件的大小
請(qǐng)求文件對(duì)應(yīng)的是我們項(xiàng)目完成后,打包所指的靜態(tài)資源文件(會(huì)被部署到服務(wù)器), 文件越小, 傳輸?shù)臄?shù)據(jù)包也會(huì)相對(duì)較小, 講道理也會(huì)更快到達(dá)客戶端
how to reduce a package size?
目前我們都會(huì)使用打包工具了(比如webpack, rollup, glup 等), 如何使用工具來(lái)減小包的體積呢? 這邊建議您去官網(wǎng)文檔呢...當(dāng)然這里列舉一下常用的手段(webpack 的), 但是注意要插件版本更新哦
JS文件壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
// 允許并發(fā)
parallel: true,
// 開啟緩存
cache: true,
compress: {
// 刪除所有的console語(yǔ)句
drop_console: true,
// 把使用多次的靜態(tài)值自動(dòng)定義為變量
reduce_vars: true,
},
output: {
// 不保留注釋
comment: false,
// 使輸出的代碼盡可能緊湊
beautify: false
}
})
]
}
CSS 文件壓縮
// optimize-css-assets-webpack-plugin
plugins: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
}),
];
html 文件壓縮
// html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false,
},
}),
];
source map 文件關(guān)閉
tree shaking
1.代碼不會(huì)被執(zhí)行,不可到達(dá),比如 if(false){// 這里邊的代碼}
2.代碼執(zhí)行的結(jié)果不會(huì)被用到
3.代碼只會(huì)影響死變量（只寫不讀）
4.方法不能有副作用
// 原理相關(guān): 以后在研究
利用 ES6 模塊的特點(diǎn):
只能作為模塊頂層的語(yǔ)句出現(xiàn)
import 的模塊名只能是字符串常量
import binding 是 immutable 的
代碼擦除: uglify 階段刪除無(wú)用代碼
scope hoisting(作用域提升)
分析出模塊之間的依賴關(guān)系,盡可能的把打散的模塊合并到一個(gè)函數(shù)中去,但前提是不能造成代碼冗余
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
module.exports = {
resolve: {
// 針對(duì) Npm 中的第三方模塊優(yōu)先采用 jsnext:main 中指向的 ES6 模塊化語(yǔ)法的文件
mainFields: ['jsnext:main', 'browser', 'main']
},
plugins: [
// 開啟 Scope Hoisting
new ModuleConcatenationPlugin(),
],
};
項(xiàng)目中使用按需加載,懶加載(路由,組件級(jí))
const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import(/* webpackChunkName: "foo" */ './Foo.vue') }
{ path: '/bar', component: () => import(/* webpackChunkName: "bar" */ './Bar.vue') }
]
})
開啟 gizp 壓縮
有時(shí)候啟用也會(huì)消耗服務(wù)器性能, 看情況使用吧
暫時(shí)先提這么些吧...后續(xù)想到了再加
減少請(qǐng)求頻率
因?yàn)橥挥蛎?tcp 連接數(shù)的限制導(dǎo)致過(guò)多的請(qǐng)求會(huì)排隊(duì)阻塞, 所以我們需要盡量控制請(qǐng)求的數(shù)量和頻率
常見措施
將靜態(tài)資源的內(nèi)聯(lián)到HTML中
這樣這些資源無(wú)需從服務(wù)器獲取, 但可能影響到渲染進(jìn)程...
<!-- 1.小圖片內(nèi)聯(lián) base64 (url-loader) -->
<!-- 2.css內(nèi)聯(lián) -->
<!-- 3.js內(nèi)聯(lián) -->
<script>
${require('raw-loader!babel-loader!./node_modules/lib-flexible/flexible.js')}
</script>
利用各級(jí)緩存(下一篇存儲(chǔ)方面介紹)
通常都是在服務(wù)端做相關(guān)配置, 但你要知道
我們可以利用http緩存(瀏覽器端)來(lái)減少和攔截二次請(qǐng)求, 當(dāng)然一般都是在服務(wù)端設(shè)置的;
服務(wù)器端也可以設(shè)置緩存(redis等), 減少數(shù)據(jù)查詢的時(shí)間同樣可以縮短整個(gè)請(qǐng)求時(shí)間
利用本地存儲(chǔ)
我們可以將常用不變的信息存在本地(cookie,storage API 等);
判斷存在就不去請(qǐng)求相關(guān)的接口, 或者定期去請(qǐng)求也是可以的
花錢買 CDN 加速
CDN 又叫內(nèi)容分發(fā)網(wǎng)絡(luò)，通過(guò)把資源部署到世界各地，用戶在訪問(wèn)時(shí)按照就近原則從離用戶最近的服務(wù)器獲取資源，從而加速資源的獲取速度。 CDN 其實(shí)是通過(guò)優(yōu)化物理鏈路層傳輸過(guò)程中的網(wǎng)速有限、丟包等問(wèn)題來(lái)提升網(wǎng)速的...
購(gòu)買 cdn 服務(wù)器;
然后把網(wǎng)頁(yè)的靜態(tài)資源上傳到 CDN 服務(wù)上去,
在請(qǐng)求這些靜態(tài)資源的時(shí)候需要通過(guò) CDN 服務(wù)提供的 URL 地址去訪問(wèn);
# 注意, cdn 緩存導(dǎo)致的新版本發(fā)布后不生效的問(wèn)題
所以打包的時(shí)候常在文件后面加上 hash 值
然后在 HTML 文件中的資源引入地址也需要換成 CDN 服務(wù)提供的地址
/alicdn/xx12dsa311.js
# 利用不同域名的 cdn 去存放資源, (tcp連接限制)
webpack 構(gòu)建時(shí)添加 cdn
// 靜態(tài)資源的導(dǎo)入 URL 需要變成指向 CDN 服務(wù)的絕對(duì)路徑的 URL 而不是相對(duì)于 HTML 文件的 URL。
// 靜態(tài)資源的文件名稱需要帶上有文件內(nèi)容算出來(lái)的 Hash 值，以防止被緩存。
// 不同類型的資源放到不同域名的 CDN 服務(wù)上去，以防止資源的并行加載被阻塞。
module.exports = {
// 省略 entry 配置...
output: {
// 給輸出的 JavaScript 文件名稱加上 Hash 值
filename: '[name]_[chunkhash:8].js',
path: path.resolve(__dirname, './dist'),
// 指定存放 JavaScript 文件的 CDN 目錄 URL
publicPath: '//js.cdn.com/id/',
},
module: {
rules: [
{
// 增加對(duì) CSS 文件的支持
test: /\.css$/,
// 提取出 Chunk 中的 CSS 代碼到單獨(dú)的文件中
use: ExtractTextPlugin.extract({
// 壓縮 CSS 代碼
use: ['css-loader?minimize'],
// 指定存放 CSS 中導(dǎo)入的資源（例如圖片）的 CDN 目錄 URL
publicPath: '//img.cdn.com/id/'
}),
},
{
// 增加對(duì) PNG 文件的支持
test: /\.png$/,
// 給輸出的 PNG 文件名稱加上 Hash 值
use: ['file-loader?name=[name]_[hash:8].[ext]'],
},
// 省略其它 Loader 配置...
]
},
plugins: [
// 使用 WebPlugin 自動(dòng)生成 HTML
new WebPlugin({
// HTML 模版文件所在的文件路徑
template: './template.html',
// 輸出的 HTML 的文件名稱
filename: 'index.html',
// 指定存放 CSS 文件的 CDN 目錄 URL
stylePublicPath: '//css.cdn.com/id/',
}),
new ExtractTextPlugin({
// 給輸出的 CSS 文件名稱加上 Hash 值
filename: `[name]_[contenthash:8].css`,
}),
// 省略代碼壓縮插件配置...
],
};
/*
以上代碼中最核心的部分是通過(guò) publicPath 參數(shù)設(shè)置存放靜態(tài)資源的 CDN 目錄 URL,
為了讓不同類型的資源輸出到不同的 CDN，需要分別在:
output.publicPath 中設(shè)置 JavaScript 的地址。
css-loader.publicPath 中設(shè)置被 CSS 導(dǎo)入的資源的的地址。
WebPlugin.stylePublicPath 中設(shè)置 CSS 文件的地址。
設(shè)置好 publicPath 后，WebPlugin 在生成 HTML 文件和 css-loader 轉(zhuǎn)換 CSS 代碼時(shí)，會(huì)考慮到配置中的 publicPath，用對(duì)應(yīng)的線上地址替換原來(lái)的相對(duì)地址。
*/
參考
DNS MDN]
webpack 文檔
深入淺出 Webpack
Scope Hoisting
IOS下的webview頁(yè)面，內(nèi)嵌iframe元素，將其樣式指定為寬高100%：
.iframe { width: 100%; height: 100%;
}在安卓下運(yùn)行均無(wú)問(wèn)題，但是在IOS下會(huì)出現(xiàn)異常。
具體表現(xiàn)為iframe頁(yè)面內(nèi)的子元素一旦超出原先的邊界，只要能影響到html元素的寬高，就會(huì)自動(dòng)撐開iframe，即使html元素設(shè)置了overflow:hidden也沒(méi)用。
比如一個(gè)body元素下的彈層需要從下往上滑動(dòng)進(jìn)場(chǎng)，這個(gè)彈層的位置就會(huì)導(dǎo)致html高度的變化，因此頁(yè)面底部的tabbar就會(huì)在彈層運(yùn)動(dòng)期間先消失再出現(xiàn)。
解決方法就是使用具體的寬高數(shù)值鎖定iframe元素：
function onLoadIFrame (index) { // 修復(fù)IOS下輪播圖初始化瞬間會(huì)讓iframe寬度自行擴(kuò)大問(wèn)題 if (this.ENV.isIOS) { const iframe = this.$el.querySelector('#iframe' + index)
iframe.style.width = iframe.clientWidth + 'px' iframe.style.height = iframe.clientHeight + 'px' }
}在了解了javascript的語(yǔ)言基礎(chǔ)和特性后
javascript真正大放光彩的地方來(lái)了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文檔對(duì)象模型。
是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTML或者XML）的標(biāo)準(zhǔn)編程接口；W3C已經(jīng)定義了一系列DOM接口，通過(guò)這些DOM接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式。
簡(jiǎn)單的說(shuō)就是一套操作文檔內(nèi)容的方法。
需要注意的是，我們需要把DOM當(dāng)作一個(gè)整體，不能分割看待，即DOM（文檔對(duì)象模型）是一套操作文檔內(nèi)容的方法。
DOM把以上內(nèi)容看作都是對(duì)象
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
1、獲取DOM四種基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的兩種解析：
1. getElementById()：
參數(shù)：元素的ID值。 （元素節(jié)點(diǎn)簡(jiǎn)稱元素）
返回值：一個(gè)有指定ID的元素對(duì)象（元素是對(duì)象）
注：這個(gè)方法是與document對(duì)象相關(guān)聯(lián)，只能由document對(duì)象調(diào)用。
用法：document.getElementById(Id)
例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="time">2020-04-16</div>
<script>
// 1. 因?yàn)槲覀兾臋n頁(yè)面從上往下加載，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
// 2. get 獲得 element 元素 by 通過(guò) 駝峰命名法
// 3. 參數(shù) id是大小寫敏感的字符串
// 4. 返回的是一個(gè)元素對(duì)象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
</html>
看一下控制臺(tái)打印的是什么
可以看到 console.log(timer)打印出來(lái)的是整個(gè)div標(biāo)簽
timer類型是個(gè)對(duì)象
2. getElementsByTagName():
參數(shù)：元素名
返回值：一個(gè)對(duì)象數(shù)組。這個(gè)數(shù)組里每個(gè)元素都是對(duì)象，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里給定標(biāo)簽的一個(gè)元素。
注：這個(gè)方法可和一般元素關(guān)聯(lián)。這個(gè)方法允許我們把通配符當(dāng)作它的參數(shù)，返回在某份html文檔里總共有多少個(gè)元素節(jié)點(diǎn)。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基礎(chǔ)
3.1 事件概述
JavaScript使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而事件是可以被JavaScript偵測(cè)到的行為。
簡(jiǎn)單理解：觸發(fā)——>響應(yīng)機(jī)制
網(wǎng)頁(yè)中每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件，例如，我們可以在用戶點(diǎn)擊某按鈕產(chǎn)生一個(gè)事件，然后去執(zhí)行某些操作
3.2 事件三要素
事件源 、事件類型、事件處理程序，我們也稱為事件三要素
(1) 事件源 事件被觸發(fā)的對(duì)象 誰(shuí)
(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤按下
(3) 事件處理程序 通過(guò)一個(gè)函數(shù)賦值的方式 完成
代碼實(shí)例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 點(diǎn)擊一個(gè)按鈕，彈出對(duì)話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發(fā)的對(duì)象 誰(shuí) 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤按下
//(3) 事件處理程序 通過(guò)一個(gè)函數(shù)賦值的方式 完成
btn.onclick = function() {
alert('點(diǎn)秋香');
}
</script>
</body>
</html>
運(yùn)行結(jié)果
1、獲取事件源
2、注冊(cè)事件（綁定事件）
3、添加事件處理程序（采取函數(shù)賦值形式）
代碼實(shí)戰(zhàn)
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 執(zhí)行事件步驟
// 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊(cè)事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
</html>
常用的DOM事件
onclick事件---當(dāng)用戶點(diǎn)擊時(shí)執(zhí)行
onload事件---當(dāng)用戶進(jìn)入時(shí)執(zhí)行
onunload事件---用用戶離開時(shí)執(zhí)行
onmouseover事件---當(dāng)用戶鼠標(biāo)指針移入時(shí)執(zhí)行
onmouseout事件---當(dāng)用戶鼠標(biāo)指針移出時(shí)執(zhí)行
onmousedown事件---當(dāng)用戶鼠標(biāo)摁下時(shí)執(zhí)行
onmouseup事件---當(dāng)用戶鼠標(biāo)松開時(shí)執(zhí)行
————————————————
版權(quán)聲明：本文為CSDN博主「那是我吶」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42402867/article/details/105567787
文章目錄
繼承性的描述：
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父類的屬性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依舊是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我這里體現(xiàn)了層疊性呀</p>
</body>
</html>
使用結(jié)論
由于內(nèi)容有限，但是結(jié)論是一定的，所以我直接給出結(jié)論：
若多個(gè)選擇器定義的樣式不沖突，則元素應(yīng)用所有選擇器定義的樣式。
若多個(gè)選擇器定義的樣式發(fā)生沖突（比如：同時(shí)定義了字體顏色屬性），則CSS按照選擇器的優(yōu)先級(jí)，讓元素應(yīng)用優(yōu)先級(jí)搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級(jí)從高到低為：行內(nèi)樣式–>ID樣式–>類樣式–>標(biāo)記樣式。
如若想直接定義使用哪個(gè)樣式，不考慮優(yōu)先級(jí)的話，則使用!important，把這個(gè)加在樣式后面就行了。
優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一個(gè)元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。層疊性和選擇器的圈中有很大的關(guān)系。
優(yōu)先級(jí)的使用說(shuō)明
權(quán)重分析：
內(nèi)聯(lián)樣式：如：style=""，權(quán)重為1000。
ID選擇器，如：#content，權(quán)重為100。
類，偽類和屬性選擇器，如.content，權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)重為1。
繼承樣式，權(quán)重為0。
將基本選擇器的權(quán)重相加之和，就是權(quán)重大小，值越大，權(quán)重越高。
計(jì)算權(quán)重方法
數(shù)標(biāo)簽：先數(shù)權(quán)重最高的標(biāo)簽，然后數(shù)第二高權(quán)重的標(biāo)簽，以此類推，就會(huì)生成一個(gè)數(shù)組，里面包含四個(gè)數(shù)字。
比如（0，0，0，0）分別對(duì)應(yīng)（行內(nèi)式個(gè)數(shù)，id選擇器個(gè)數(shù)，類選擇器個(gè)數(shù)，標(biāo)簽選擇器個(gè)數(shù)）
然后兩個(gè)選擇器通過(guò)對(duì)別四個(gè)數(shù)字的大小，確定權(quán)重關(guān)系。
例：
#box ul li a.cur有1個(gè)id標(biāo)簽，1個(gè)類，3個(gè)標(biāo)簽，那么4個(gè)0就是（0，1，1，3）
.nav ul .active .cur有0個(gè)id，3個(gè)類，1個(gè)標(biāo)簽，那么4個(gè)0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我們來(lái)試一下優(yōu)先級(jí)</p>
</body>
</html>
先推測(cè)一波，因?yàn)榍懊嬷v到了ID選擇器的權(quán)重是大于類選擇器的，所以這里顏色應(yīng)該為red。
效果如下：
推測(cè)正確！優(yōu)先級(jí)GET！
今天講一下使用vant Swipe 輪播控件過(guò)程中遇到的問(wèn)題
主要是使用swiper自定義的大小的時(shí)候，寬度適應(yīng)不同分辨率的移動(dòng)設(shè)備
適應(yīng)寬度的同時(shí)還需控件的正常使用
先看一下需要實(shí)現(xiàn)的功能，
一個(gè)簡(jiǎn)單的輪播圖，但是每個(gè)輪播的寬度需要低于100%，使第二個(gè)輪播的van-swipe-item可以展示到第一個(gè)位置一部分
這時(shí)我們?cè)偃ant的文檔查看一下控件
剛好有一個(gè)自定義控件大小的可以使用，完美解決了我們的問(wèn)題
當(dāng)我們使用控件之后
<van-swipe :loop="false" @change="onChange" :width="350">
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請(qǐng)請(qǐng)假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請(qǐng)</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item ><div class="swipe1"></div></van-swipe-item>
<van-swipe-item ><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
發(fā)現(xiàn)功能可以使用，但是再 iPhone8/7 plus 以及iPhone5/se 等分辨率下出現(xiàn)了寬度固定而不適應(yīng)的情況，
簡(jiǎn)單來(lái)說(shuō)，我們把van-swipe-item寬度控制在了80% 第二個(gè)van-swipe-item自然可以展示出來(lái)一部分
但是當(dāng)滑到第二頁(yè)的時(shí)候 由于第一頁(yè)的寬度還是80% 所以就出現(xiàn)了這樣的情況，所以我打算采用
動(dòng)態(tài)的改變 滑動(dòng)到第幾頁(yè)的時(shí)候 把當(dāng)頁(yè)的寬度變?yōu)?0% 其他頁(yè)保持不變，
于是
<van-swipe :loop="false" @change="onChange" >
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請(qǐng)請(qǐng)假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請(qǐng)</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item v-bind:id="item1"><div class="swipe1"></div></van-swipe-item>
<van-swipe-item v-bind:id="item2"><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
首先 我們?yōu)槊總€(gè)swipe-item添加id
data(){
return {
android: true,
ios: true,
iphoneX: true,
current: 0,
item0:'item0',
item1:'item1',
item2:'item2',
}
},
mounted(){
},
methods: {
onChange(index){
console.log('當(dāng)前 Swipe 索引：' + index);
if(index==1){
var div =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==2){
var div1 =document.getElementById("item1").style.setProperty('width', '10rem', 'important');
var div0 =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==0){
var div =document.getElementById("item2");
var div0 =document.getElementById("item0").style.setProperty('width', '9.3333333rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
}
},
此外，監(jiān)聽滑動(dòng)事件，根據(jù)滑動(dòng)到第幾頁(yè) 更改當(dāng)前頁(yè)面的寬度，
這樣就解決了
蘭蘭設(shè)計(jì)：前端達(dá)人
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com