SDWebImage-源码分析与仿写(五)
前言
阅读优秀的开源项目是提高编程能力的有效手段，我们能够从中开拓思维、拓宽视野，学习到很多不同的设计思想以及最佳实践。阅读他人代码很重要，但动手仿写、练习却也是很有必要的，它能进一步加深我们对项目的理解，将这些东西内化为自己的知识和能力。然而真正做起来却很不容易，开源项目阅读起来还是比较困难，需要一些技术基础和耐心。
本系列将对一些著名的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(@"Connection can't be initialized:");
}
}
将回调方法添加到操作字典中，拿到图片数据后回调给上层
- (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 < 400 && ((NSHTTPURLResponse *)response).statusCode != 304)) {
NSInteger expected = response.expectedContentLength > 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(@"Task data error:%@", [error description]);
//[self callCompletionBlocksWithError:error];
} else {
if ([self callbackForKey:kCompletedBlock].count > 0) {
if (self.imageData) {
UIImage *image = [UIImage imageWithData:self.imageData];
if (CGSizeEqualToSize(image.size, CGSizeZero)) {
//[self callCompletionBlocksWithError:[NSError errorWithDomain:SDWebImageErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : @"Downloaded image has 0 pixels"}]];
} else {
[self callCompletionBlocksWithImage:image imageData:self.imageData error:nil finished:YES];
}
} else {
//[self callCompletionBlocksWithError:[NSError errorWithDomain:SDWebImageErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : @"Image data is nil"}]];
}
}
}
[self done];
}
- (void)callCompletionBlocksWithImage:(nullable UIImage *)image
imageData:(nullable NSData *)imageData
error:(nullable NSError *)error
finished:(BOOL)finished {
NSArray<id> *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的底层实现原理。
阅读和仿写这个类库的实现也让我受益匪浅，我也会在今后继续用这种方式阅读和仿写其它的著名类库，希望大家多多支持。
如果觉得我的这篇文章对你有帮助，请在下方点个赞支持一下，谢谢!
