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的底层实现原理。
阅读和仿写这个类库的实现也让我受益匪浅，我也会在今后继续用这种方式阅读和仿写其它的著名类库，希望大家多多支持。
如果觉得我的这篇文章对你有帮助，请在下方点个赞支持一下，谢谢!

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容