終于，再看了多遍SDWebImage源碼和多次debug之后，寫出了迷你版本YQWebImage。這一次終于不再出現(xiàn)掉幀和內存暴漲的問題了。
額，怎么說呢，這次也是一個比較好的契機，公司比較閑，空閑時間多，剛好在寫圖片展示器，就想著寫個圖片下載緩存器來配合他。平常用的都是SDWebImage，也沒仔細看他的源碼，這次也能好好研究一下。
效果
下載圖片
從磁盤取圖片
下載圖片內存情況
磁盤取內存情況
項目結構
其中，YQDisplayPhotoContainerView類來自上一篇文章自造小輪子：圖片展示器（類似微博首頁）。YQWebImage文件就是本次輪子的全部。data文件夾內是本demo的數(shù)據(jù)來源。
Category
UIImageView+YQAdd
UIImageView+YQAdd目的只是提供一個接口，方便使用者調用。用過SDWebImage一定不會陌生。
/**
通過url設置圖片（來源：網(wǎng)絡或本地）
@param url 圖片的url
@param placeholderImage 占位圖片
@param completedBlock 完成回調
*/
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholderImage completedBlock:(YQImageDownloadCompletedBlock)completedBlock;
UIImage+Decode
UIImage+Decode完全來自SDWebImage，在圖片從網(wǎng)絡或者本地獲取之后調用，將圖片編碼，再呈現(xiàn)到界面上。我發(fā)現(xiàn)如果不用該方法，從網(wǎng)絡下載圖片會使得內存暴漲，本地也一樣，還會嚴重掉幀。因此我也把它放進來了。
Class
YQWebImageManager
YQWebImageManager繼承NSObject，功能為管理下載圖片和本地獲取圖片操作。相當于只要執(zhí)行YQWebImageManager對象的addOperationWithURL方法，就會異步去獲得圖片再回調。
/**
添加操作
@param url 圖片的url
@param completedBlock 完成后回調
*/
- (void)addOperationWithURL:(NSURL *)url completed:(YQImageDownloadCompletedBlock)completedBlock;
/**
取消操作
@param url 圖片的url
*/
- (void)cancleOpeartionWithURL:(NSURL *)url;
YQImageCacheManager
YQImageCacheManager繼承NSObject，作用為異步查詢和保存圖片。
/**
保存圖片到緩存和本地 異步執(zhí)行
@param image 圖片
@param imageData 數(shù)據(jù)
@param key memory中cache的key
@param completedBlock 完成后回調
*/
- (void)storeImage:(UIImage *)image imageData:(NSData *)imageData forKey:(NSString *)key completion:(void (^)())completedBlock;
/**
查詢緩存或本地是否有圖片 異步執(zhí)行
@param key memory中cache的key
@param completedBlock 完成后回調
*/
- (NSOperation *)queryCacheOperationForKey:(NSString *)key complete:(void (^)(UIImage *image))completedBlock;
YQImageDownloadOperation
YQImageDownloadOperation繼承NSOperation,在- (void)main方法中下載圖片后返回。
/**
初始化一個操作 異步執(zhí)行
@param url 圖片的url
@param complete 完成后回調
*/
- (instancetype)initWithURL:(NSURL *)url complete:(void (^)(UIImage *image))complete;
思路&代碼
其實，思路可以說和SDWebImage一模一樣。
首先通過分類UIImageView+YQAdd的- (void)setImageWithURL方法，設置圖片。
在- (void)setImageWithURL中，使用YQWebImageManager添加一個獲圖操作。當然需要把之前的操作移除。
NSString *lastKey = [self getURLKey];
[[YQWebImageManager shareManager] cancleOpeartionWithURL:[NSURL URLWithString:lastKey]];
[[YQWebImageManager shareManager] addOperationWithURL:url completed:^(UIImage *image, NSError *error, NSURL *imageURL) {
self.image = image;
if (completedBlock) completedBlock(image, nil, url);
}];
[self setURLKey:url.absoluteString];
- (NSString *)getURLKey方法為通過runtime獲得urlKey屬性。
- (void)setURLKey:(NSString *)urlStr方法為通過runtime設置urlKey屬性。
// 獲取urlkey
- (NSString *)getURLKey
{
return objc_getAssociatedObject(self, &urlKey);
}
// 設置urlkey
- (void)setURLKey:(NSString *)urlStr
{
objc_setAssociatedObject(self, &urlKey, urlStr, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
也就是說，每當給一個imageView對象設置圖片時，就會先獲得上一次保存的urlKey，然后不管urlKey對應的這個操作完成與否，都取消掉。然后重新添加操作并且設置新的urlKey。這樣做的目的也很簡單，當快速滑動tableView的時候，如果不取消上一次，操作就會越來越多。在網(wǎng)絡不穩(wěn)定的情況下，也許后設置的圖片比早設置的圖片先獲取到，那么圖片顯示的圖片將出錯。
然后，進入- (void)addOperationWithURL:(NSURL *)url completed:(YQImageDownloadCompletedBlock)completedBlock方法，看看如何添加操作。
在這之前要說說方法里用到的YQCombinedOperation類。
這個類就是把本地獲取操作和下載操作結合成同一個操作，這樣便于管理。
這個類遵循<YQWebImageOperationProtocol>協(xié)議，也就需要實現(xiàn)- (void)cancel方法。
@protocol YQWebImageOperationProtocol <NSObject>
@required
- (void)cancel;
@end
@interface YQCombinedOperation : NSObject <YQWebImageOperationProtocol>
@property (nonatomic, assign, getter = isCancelled) BOOL cancelled;
@property (nonatomic, strong) NSOperation *cacheOperation;
@property (nonatomic, strong) YQImageDownloadOperation *downloadOperation;
@end
@implementation YQCombinedOperation
- (void)cancel
{
self.cancelled = YES;
if (self.cacheOperation) {
[self.cacheOperation cancel];
self.cacheOperation = nil;
}
if (self.downloadOperation) {
[self.downloadOperation cancel];
self.downloadOperation = nil;
}
}
@end
可以看到，- (void)cancel方法中也是將兩個子操作一個個取消，沒啥特別的。
下面直接把添加操作的代碼放上來。
- (void)addOperationWithURL:(NSURL *)url completed:(YQImageDownloadCompletedBlock)completedBlock
{
__block YQCombinedOperation *operation = [YQCombinedOperation new];
__weak YQCombinedOperation *weakOperation = operation;
// 設置本地獲取的操作，完成后執(zhí)行回調
operation.cacheOperation = [[YQImageCacheManager shareManager] queryCacheOperationForKey:url.absoluteString complete:^(UIImage *image) {
// 完成了，如果有圖片就直接把圖片傳回去并返回，也就是不需要下載了
if (image && completedBlock) {
completedBlock(image, nil, url);
return;
}
// 如果沒有圖片 需要下載了 使用自定義的Operation 在main中寫下載方法
YQImageDownloadOperation *operation = [[YQImageDownloadOperation alloc] initWithURL:url complete:^(UIImage *image) {
// 獲得圖片后 傳遞圖片
if (completedBlock) completedBlock(image, nil, url);
// 移除操作
[self.operations removeObjectForKey:url.absoluteString];
}];
// 添加到隊列中，開始異步下載
[self.queue addOperation:operation];
// 設置結合操作的下載操作
weakOperation.downloadOperation = operation;
}];
// 添加到字典 便于取消
[self.operations setObject:operation forKey:url.absoluteString];
}
// 取消操作
- (void)cancleOpeartionWithURL:(NSURL *)url
{
// 從字典取出操作 取消
YQCombinedOperation *operation = self.operations[url.absoluteString];
if (operation && [operation respondsToSelector:@selector(cancel)]) {
[operation cancel];
[self.operations removeObjectForKey:url.absoluteString];
}
}
到現(xiàn)在，思路還是很清晰的。下面進入到YQImageCacheManager去看看本地圖片的存取代碼。
異步查詢并獲得本地圖片：
- (NSOperation *)queryCacheOperationForKey:(NSString *)key complete:(void (^)(UIImage *))completedBlock
{
// 條件先判斷一下
if (!key) {
if (completedBlock) {
completedBlock(nil);
}
return nil;
}
// 從緩存中取呀
UIImage *image = [self imageFromMemoryCacheForKey:key];
if (image) {
if (completedBlock) {
completedBlock(image);
}
return nil;
}
// 緩存中沒有呀 異步去磁盤
NSOperation *operation = [NSOperation new];
dispatch_async(self.ioQueue, ^{ // 異步執(zhí)行
if (operation.isCancelled) {
return;
}
@autoreleasepool {
UIImage *diskImage = [self diskImageForKey:key];
if (diskImage) {
[self.imageCache setObject:diskImage forKey:key];
}
if (completedBlock) {
dispatch_async(dispatch_get_main_queue(), ^{
completedBlock(diskImage);
});
}
}
});
return operation;
}
異步保存圖片到本地和緩存
- (void)storeImage:(UIImage *)image imageData:(NSData *)imageData forKey:(NSString *)key completion:(void (^)())completedBlock
{
if (!image || !key) {
if (completedBlock) {
completedBlock();
}
return;
}
// 緩存
[self.imageCache setObject:image forKey:key];
dispatch_async(self.ioQueue, ^{
@autoreleasepool {
if (![self diskImageForKey:key]) {
[imageData writeToFile:[self getFilePathWithURLStr:key] atomically:YES];
}
}
if (completedBlock) {
dispatch_async(dispatch_get_main_queue(), ^{
completedBlock();
});
}
});
}
so easy啊。但是要提一下這個異步取圖片的操作。從代碼中看是創(chuàng)建NSOperation后，使用GCD來異步操作。而在GCD中，又通過判斷if (operation.isCancelled)來決定是否結束本次異步操作。
其實這里也可以通過NSOperation來實現(xiàn)，但是使用GCD更加簡便。
最后來看YQImageDownloadOperation，主要看- (void)main方法
- (void)main
{
if (self.url == nil) {
return;
}
// 判斷是否被取消了
if (self.isCancelled) {
return;
}
// 簡單的下載
NSData *data = [NSData dataWithContentsOfURL:self.url];
UIImage *image = [UIImage imageWithData:data];
image = [UIImage decodedImageWithImage:image];
// 保存下來
[[YQImageCacheManager shareManager] storeImage:image imageData:data forKey:self.url.absoluteString completion:^{
}];
if (self.isCancelled) {
return;
}
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
self.downloadCompleteBlcok(image);
}];
}
同樣的，思路也很清晰，首先判斷操作是否被取消，然后下載圖片并保存，最后主線程返回圖片。
以上就是全部思路，我把它一層層分解開來，再分析應該會便于理解。其實SD也是這樣的思路，只是他考慮的更多，功能也更加強大。
代碼地址
最后
本次輪子的思路來源SDWebImage，本次輪子的數(shù)據(jù)文件來自YYKit。
