原文

終於，再看了多遍SDWebImage源碼和多次debug之後，寫出了迷你版本YQWebImage。這一次終於不再出現掉幀和內存暴漲的問題了。

額，怎麼說呢，這次也是一個比較好的契機，公司比較閒，空閒時間多，剛好在寫圖片展示器，就想著寫個圖片下載緩存器來配合他。平常用的都是SDWebImage，也沒仔細看他的源碼，這次也能好好研究一下。

效果

下載圖片

從磁盤取圖片

下載圖片內存情況

磁盤取內存情況

項目結構

其中，YQDisplayPhotoContainerView類來自上一篇文章自造小輪子：圖片展示器（類似微博首頁）。YQWebImage文件就是本次輪子的全部。data文件夾內是本demo的數據來源。

Category

UIImageView+YQAdd

UIImageView+YQAdd目的只是提供一個接口，方便使用者調用。用過SDWebImage一定不會陌生。

/**
 通過url設置圖片（來源：網絡或本地）
 
 @param url 圖片的url
 @param placeholderImage 占位圖片
 @param completedBlock 完成回調
 */
- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholderImage completedBlock:(YQImageDownloadCompletedBlock)completedBlock;

UIImage+Decode

UIImage+Decode完全來自SDWebImage，在圖片從網絡或者本地獲取之後調用，將圖片編碼，再呈現到界面上。我發現如果不用該方法，從網絡下載圖片會使得內存暴漲，本地也一樣，還會嚴重掉幀。因此我也把它放進來了。

Class

YQWebImageManager

YQWebImageManager繼承NSObject，功能為管理下載圖片和本地獲取圖片操作。相當於只要執行YQWebImageManager對象的addOperationWithURL方法，就會異步去獲得圖片再回調。

/**
 添加操作
 
 @param url 圖片的url
 @param completedBlock 完成後回調
 */
- (void)addOperationWithURL:(NSURL *)url completed:(YQImageDownloadCompletedBlock)completedBlock;

/**
 取消操作
 
 @param url 圖片的url
 */
- (void)cancleOpeartionWithURL:(NSURL *)url;

YQImageCacheManager

YQImageCacheManager繼承NSObject，作用為異步查詢和保存圖片。

/**
 保存圖片到緩存和本地 異步執行
 
 @param image 圖片
 @param imageData 數據
 @param key memory中cache的key
 @param completedBlock 完成後回調
 */
- (void)storeImage:(UIImage *)image imageData:(NSData *)imageData forKey:(NSString *)key completion:(void (^)())completedBlock;

/**
 查詢緩存或本地是否有圖片 異步執行
 
 @param key memory中cache的key
 @param completedBlock 完成後回調
 */
- (NSOperation *)queryCacheOperationForKey:(NSString *)key complete:(void (^)(UIImage *image))completedBlock;

YQImageDownloadOperation

YQImageDownloadOperation繼承NSOperation,在- (void)main方法中下載圖片後返回。

/**
 初始化一個操作 異步執行
 
 @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的時候，如果不取消上一次，操作就會越來越多。在網絡不穩定的情況下，也許後設置的圖片比早設置的圖片先獲取到，那麼圖片顯示的圖片將出錯。

然後，進入- (void)addOperationWithURL:(NSURL *)url completed:(YQImageDownloadCompletedBlock)completedBlock方法，看看如何添加操作。

在這之前要說說方法裡用到的YQCombinedOperation類。

這個類就是把本地獲取操作和下載操作結合成同一個操作，這樣便於管理。

這個類遵循協議，也就需要實現- (void)cancel方法。

@protocol YQWebImageOperationProtocol @required
- (void)cancel;
@end

@interface YQCombinedOperation : NSObject  @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;
    
    // 設置本地獲取的操作，完成後執行回調
    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];
    }
}

到現在，思路還是很清晰的。下面進入到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, ^{ // 異步執行
        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啊。但是要提一下這個異步取圖片的操作。從代碼中看是創建NSOperation後，使用GCD來異步操作。而在GCD中，又通過判斷if (operation.isCancelled)來決定是否結束本次異步操作。

其實這裡也可以通過NSOperation來實現，但是使用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:^{
        1
    }];
    
    if (self.isCancelled) {
        return;
    }
    
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        self.downloadCompleteBlcok(image);
    }];
}

同樣的，思路也很清晰，首先判斷操作是否被取消，然後下載圖片並保存，最後主線程返回圖片。

以上就是全部思路，我把它一層層分解開來，再分析應該會便於理解。其實SD也是這樣的思路，只是他考慮的更多，功能也更加強大。

代碼地址

GitHub:YQWebImage

最後

本次輪子的思路來源SDWebImage，本次輪子的數據文件來自YYKit。