SDWebImage-源码分析与仿写(五)

作者: 潇潇潇潇潇潇潇 | 来源:发表于2016-10-24 17:41 被阅读361次

前言

阅读优秀的开源项目是提高编程能力的有效手段，我们能够从中开拓思维、拓宽视野，学习到很多不同的设计思想以及最佳实践。阅读他人代码很重要，但动手仿写、练习却也是很有必要的，它能进一步加深我们对项目的理解，将这些东西内化为自己的知识和能力。然而真正做起来却很不容易，开源项目阅读起来还是比较困难，需要一些技术基础和耐心。
本系列将对一些著名的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的底层实现原理。
阅读和仿写这个类库的实现也让我受益匪浅，我也会在今后继续用这种方式阅读和仿写其它的著名类库，希望大家多多支持。
如果觉得我的这篇文章对你有帮助，请在下方点个赞支持一下，谢谢!

SDWebImage-源码分析与仿写(五)

前言

SDWebImage

实现原理

ZCJSimpleWebImage

ZCJWebImageDownloader

ZCJWebImageDownloadOperation

ZCJWebImageCache

ZCJWebImageManager

UIImageView+ZCJWebImage

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS源码解读学习

iOS 开发每天分享优质文章

iOS 高级开发

IOS

首页投稿（暂停使用，暂停投稿）

iOS开发

SDWebImage-源码分析与仿写(五)

前言

SDWebImage

实现原理

ZCJSimpleWebImage

ZCJWebImageDownloader

ZCJWebImageDownloadOperation

ZCJWebImageCache

ZCJWebImageManager

UIImageView+ZCJWebImage

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS源码 解读学习

iOS 开发每天分享优质文章

iOS 高级开发

IOS

首页投稿（暂停使用，暂停投稿）

iOS开发

iOS源码解读学习