作為前端構(gòu)建工具不可或缺的一個(gè)環(huán)節(jié)，自動(dòng)生成css sprites圖片不僅僅能夠減少頻繁的人工操作，還能夠避免多人協(xié)作時(shí)對(duì)同一個(gè)sprites圖片維護(hù)過程中因個(gè)人原因引起的圖片不規(guī)范問題。58到家前端工程化解決方案boi的自動(dòng)css sprites功能基于webpack實(shí)現(xiàn)，本文記錄一下實(shí)現(xiàn)方案的各個(gè)細(xì)節(jié)以及需要注意的地方。
1. 功能需求
css sprites的功能需求簡(jiǎn)單說就是將style中引用的散列小圖標(biāo)合并成一張sprites圖片。從功能角度來講比較單一，從實(shí)現(xiàn)角度來講需要具備以下幾點(diǎn)：
對(duì)style文件進(jìn)行資源依賴分析，能夠得出style中引用的圖片資源；
style文件引用的圖片并非都是圖標(biāo)，其他的比如背景圖等資源不應(yīng)該被sprites合并。所以必須有明確的標(biāo)識(shí)可以區(qū)分圖標(biāo)與非圖標(biāo)資源。
對(duì)于第一點(diǎn)，webpack本身就具備依賴分析的功能，所以無需自行實(shí)現(xiàn)。那么如何設(shè)計(jì)明確的標(biāo)識(shí)以便區(qū)分資源類型呢？
2. 用戶至上的設(shè)計(jì)原則
上文提到的資源標(biāo)識(shí)，我們首先看一下業(yè)內(nèi)的同類產(chǎn)品是如何實(shí)現(xiàn)的。以fis為例，請(qǐng)看以下代碼：
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式