前言
閱讀優秀的開源項目是提高編程能力的有效手段，我們能夠從中開拓思維、拓寬視野，學習到很多不同的設計思想以及最佳實踐。閱讀他人代碼很重要，但動手仿寫、練習卻也是很有必要的，它能進一步加深我們對項目的理解，將這些東西內化為自己的知識和能力。然而真正做起來卻很不容易，開源項目閱讀起來還是比較困難，需要一些技術基礎和耐心。
本系列將對一些著名的iOS開源類庫進行深入閱讀及分析，并仿寫這些類庫的基本實現，加深我們對底層實現的理解和認識，提升我們iOS開發的編程技能。
SDWebImage
SDWebImage是一個異步加載圖片的框架。它支持異步圖片下載，異步圖片緩存，下載進度監控，GIF動畫圖片以及WebP格式支持。它使用簡單，功能強大，極大地提高了網絡圖片處理的效率，是iOS項目中必不可少的第三方庫之一。
SDWebImage在Github的地址： https://github.com/rs/SDWebImage
實現原理
SDWebImage為UIImageView，UIButton 提供了分類支持，這個分類有個接口方法 sd_setImageWithURL:
，該方法會從SDWebImageManager中調用 loadImageWithURL:options:progress:completed:
方法獲取圖片。這個manager獲取圖片分為兩個過程，首先在緩存類SDWebImageCache中查找是否有對應的緩存，它以url為key先在內存中查找，如果未找到則在磁盤中利用MD5處理過的key繼續查找。
如果仍未查找到對應圖片，說明緩存中不存在該圖片，需要從網絡中下載。manager對象會調用SDWebImageDownloader類的 downloadImageWithURL:...
方法下載圖片。這個方法會在執行的過程中調用另一個方法 addProgressCallback:andCompletedBlock:fotURL:createCallback:
來存儲下載過程中和下載完成后的回調, 當回調塊是第一次添加的時候, 方法會實例化一個 NSMutableURLRequest 和 SDWebImageDownloaderOperation, 并將后者加入 downloader 持有的下載隊列開始圖片的異步下載。
而在圖片下載完成之后, 就會在主線程設置 image 屬性, 完成整個圖像的異步下載和配置。
ZCJSimpleWebImage
參照SDWebImage，我們動手仿寫一個demo。這個demo只包括SDWebImage的基本實現過程，不會涵蓋所有的功能，重點在于理解和掌握作者的實現思路，同時避免代碼過于復雜，難以理解。
這個demo ZCJSimpleWebImage提供以下基本功能，代碼結構如下：
UIImageView ZCJWebImage：入口封裝，提供對外的獲取圖片接口，回調取到的圖片。
ZCJWebImageManager：管理圖片下載和緩存，記錄哪些圖片有緩存，哪些圖片需要下載，回調SDWebImageDownloader和SDWebImageCache的結果。
ZCJWebImageDownloader：從網絡中下載圖片。
ZCJWebImageOperation：圖片下載操作。
ZCJWebImageCache：URL作為key，在內存和磁盤中存儲和讀取圖片。
ZCJWebImageDownloader
ZCJWebImageDownloader是個單例類，對外提供downloadImageWith:urlStr:completeBlock: 方法從網絡上下載圖片。這個方法首先創建一個回調block，用于生成圖片下載操作ZCJWebImageDownloadOperation。
- (void)downloadImageWith:(NSString *)urlStr completeBlock:(ZCJWebImageDownCompleteBlock)completeBlock {
if (!urlStr) {
if (completeBlock) {
completeBlock(nil, nil, YES);
}
return;
}
//創建圖片下載操作類，配置后放入downloadQueue隊列中，并設置操作的優先級
ZCJWebImageDownloadOperation*(^createDownloaderOperation)() = ^(){
NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:urlStr] cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:15];
request.HTTPShouldUsePipelining = YES;
ZCJWebImageDownloadOperation *operation = [[ZCJWebImageDownloadOperation alloc] initWithRequest:request];
operation.queuePriority = NSURLSessionTaskPriorityHigh;
[self.downloadQueue addOperation:operation];
//將新操作作為原隊列最后一個操作的依賴
[self.lastOperation addDependency:operation];
self.lastOperation = operation;
return operation;
};
[self addCompletedBlock:completeBlock forUrl:urlStr createCallback:createDownloaderOperation];
}
設置下載完成后的回調
- (void)addCompletedBlock:(ZCJWebImageDownCompleteBlock)completeBlock forUrl:(NSString *)urlStr createCallback:( ZCJWebImageDownloadOperation*(^)())createCallback {
//保證同一時間只有一個線程在運行
dispatch_barrier_sync(self.barrierQueue, ^{
ZCJWebImageDownloadOperation *operation = self.URLoperations[urlStr];
if (!operation) {
operation = createCallback();
self.URLoperations[urlStr] = operation;
__weak ZCJWebImageDownloadOperation *wo = operation;
operation.completionBlock = ^{
ZCJWebImageDownloadOperation *so = wo;
if (!so) {
return;
}
if (self.URLoperations[urlStr] == so) {
[self.URLoperations removeObjectForKey:urlStr];
}
};
[operation addCompletedBlock:completeBlock];
}
});
}
ZCJWebImageDownloadOperation
ZCJWebImageDownloadOperation是圖片下載操作類，繼承自NSOperation。我們重寫了start方法，創建下載所使用的NSURLSession對象。
-(void)start {
@synchronized (self) {
if (self.isCancelled) {
self.isFinished = YES;
[self reset];
return;
}
NSURLSession *session = self.unownedSession;
if (!session) {
NSURLSessionConfiguration *sessionConfig = [NSURLSessionConfiguration defaultSessionConfiguration];
sessionConfig.timeoutIntervalForRequest = 15;
self.ownSession = [NSURLSession sessionWithConfiguration:sessionConfig delegate:self delegateQueue:nil];
session = self.ownSession;
}
self.dataTask = [session dataTaskWithRequest:self.request];
self.isExecuting = YES;
}
[self.dataTask resume];
if (!self.dataTask) {
NSLog(@quot;Connection can't be initialized:quot;);
}
}
將回調方法添加到操作字典中，拿到圖片數據后回調給上層
- (void)addCompletedBlock:(ZCJWebImageDownCompleteBlock)completeBlock;
{
NSMutableDictionary *dic = [NSMutableDictionary new];
if (completeBlock) {
[dic setObject:completeBlock forKey:kCompletedBlock];
}
dispatch_barrier_async(_barrierQueue, ^{
[self.callbackBlocks addObject:dic];
});
}
NSURLSession接收到圖片數據，讀取callbackBlocks中的回調block，將圖片傳到上層
#pragma mark NSURLSessionTaskDelegate
- (void)URLSession:(NSURLSession *)session
dataTask:(NSURLSessionDataTask *)dataTask
didReceiveResponse:(NSURLResponse *)response
completionHandler:(void (^)(NSURLSessionResponseDisposition disposition))completionHandler {
if (![response respondsToSelector:@selector(statusCode)] || (((NSHTTPURLResponse *)response).statusCode lt; 400 ((NSHTTPURLResponse *)response).statusCode != 304)) {
NSInteger expected = response.expectedContentLength gt; 0 ? (NSInteger)response.expectedContentLength : 0;
self.imageData = [[NSMutableData alloc] initWithCapacity:expected];
}
if (completionHandler) {
completionHandler(NSURLSessionResponseAllow);
}
}
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
[self.imageData appendData:data];
}
- (void)URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task didCompleteWithError:(NSError *)error {
if (error) {
NSLog(@quot;Task data error:%@quot;, [error description]);
//[self callCompletionBlocksWithError:error];
} else {
if ([self callbackForKey:kCompletedBlock].count gt; 0) {
if (self.imageData) {
UIImage *image = [UIImage imageWithData:self.imageData];
if (CGSizeEqualToSize(image.size, CGSizeZero)) {
//[self callCompletionBlocksWithError:[NSError errorWithDomain:SDWebImageErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : @quot;Downloaded image has 0 pixelsquot;}]];
} else {
[self callCompletionBlocksWithImage:image imageData:self.imageData error:nil finished:YES];
}
} else {
//[self callCompletionBlocksWithError:[NSError errorWithDomain:SDWebImageErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : @quot;Image data is nilquot;}]];
}
}
}
[self done];
}
- (void)callCompletionBlocksWithImage:(nullable UIImage *)image
imageData:(nullable NSData *)imageData
error:(nullable NSError *)error
finished:(BOOL)finished {
NSArraylt;idgt; *completionBlocks = [self callbackForKey:kCompletedBlock];
//dispatch_main_async_safe(^{
for (ZCJWebImageDownCompleteBlock completedBlock in completionBlocks) {
completedBlock(image, error, finished);
}
//});
}
ZCJWebImageCache
ZCJWebImageCache圖片緩存類，分為內存緩存和磁盤緩存，內存緩存基于NSCache類實現，磁盤緩存使用URL作為key，存儲到文件系統上。這里簡單起見，只實現了存儲和讀取方法，也沒有使用異步方式。關于緩存，有興趣的可以看看我的另一篇文章，詳細介紹PINCache緩存機制： http://www.jianshu.com/p/cc784065bcbc
-(void)storeImage:(UIImage *)image forKey:(NSString *)key {
if (!image || !key) {
return;
}
[self.memCache setObject:image forKey:key];
dispatch_sync(_ioQueue, ^{
NSData *imageData = UIImagePNGRepresentation(image);
if (![_fileManager fileExistsAtPath:_diskCachePath]) {
[_fileManager createDirectoryAtPath:_diskCachePath withIntermediateDirectories:YES attributes:nil error:nil];
}
NSString *imagePath = [_diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
[_fileManager createFileAtPath:imagePath contents:imageData attributes:nil];
});
}
-(UIImage *)imageFromCacheForKey:(NSString *)key
{
if (!key) {
return nil;
}
UIImage *img = [self.memCache objectForKey:key];
if (img) {
return img;
}
NSString *imagePath = [_diskCachePath stringByAppendingPathComponent:[self cachedFileNameForKey:key]];
if ([_fileManager fileExistsAtPath:imagePath]) {
NSData *data = [NSData dataWithContentsOfFile:imagePath];
if (data) {
img = [UIImage imageWithData:data];
return img;
}
}
return nil;
}
ZCJWebImageManager
ZCJWebImageManager也是個單例類，管理圖片下載ZCJWebImageDownloader和緩存ZCJWebImageCache。在它的接口方法中，首先從緩存中讀取圖片，取不到則從網絡上下載
-(void)loadImageWithUrl:(NSString *)urlStr completeBlock:(ZCJWebImageCompleteBlock)completeBlock {
if (!urlStr) {
completeBlock(nil,nil,NO);
return;
}
UIImage *image = [self.cache imageFromCacheForKey:urlStr];
if (!image) {
[self.downloader downloadImageWith:urlStr completeBlock:^(UIImage *image, NSError *error, BOOL isFinished) {
if (image !error isFinished) {
//[self.cache storeImage:image forKey:urlStr];
completeBlock(image, error, isFinished);
} else {
completeBlock(image, error, isFinished);
}
}];
}
else {
completeBlock(image, nil, YES);
}
}
UIImageView ZCJWebImage
UIImageView ZCJWebImage為UIImageView提供了簡單的入口封裝，它從類中獲取圖片，然后將圖片在主線程中配置到UIImageView上
- (void)zcj_setImageUrlWith:(NSString *)urlStr placeholderImage:(UIImage *)placeholder;
{
if (!urlStr) {
return;
}
if (placeholder) {
self.image = placeholder;
}
__weak __typeof(self)wself = self;
[[ZCJWebImageManager sharedManager] loadImageWithUrl:urlStr completeBlock:^(UIImage *image, NSError *error, BOOL isFinished) {
__strong __typeof (wself) sself = wself;
dispatch_sync(dispatch_get_main_queue(), ^{
if (image !error isFinished) {
UIImageView *imageView = (UIImageView *)sself;
imageView.image = image;
imageView.backgroundColor = [UIColor redColor];
[sself setNeedsLayout];
} else {
}
});
}];
}
demo的源碼已上傳到github上，地址： https://github.com/superzcj/ZCJSimpleWebImage
總結
SDWebImage是一個很棒的圖片加載類庫，它提供了很簡便的接口和使用方法，對使用者很友好。內部大量使用多線程和block回調，代碼不是那么容易理解，本文仿照SDWebImage編寫demo，模擬基本實現過程，希望能幫助大家理解和掌握SDWebImage的底層實現原理。
閱讀和仿寫這個類庫的實現也讓我受益匪淺，我也會在今后繼續用這種方式閱讀和仿寫其它的著名類庫，希望大家多多支持。
如果覺得我的這篇文章對你有幫助，請在下方點個贊支持一下，謝謝!
Tags: SDWebImage 源碼分析
文章來源：http://www.jianshu.com/p/ba4e10a00569