关于iOS中JS与本地交互的方案优化与实现

优化由来

开发中或多或少都会碰到网页中js与原生代码的交互内容，当然处理的方式也有很多种，比如拦截、JavaScriptCore 等进行内容的交互，而这次想记录的主要就通过JavaScriptCore进行交互的方案。

image.png

如上图所示,通常通过JavaScriptCore进行内容的交互主要分为三步：

  1. 继承JSExport协议，将需要交互的方法声明在协议里
  2. 创建JSContext所对应的交互对象，该对象实现第一步中的协议方法
  3. 通过JSContext进行对象的注入，完成JS调用方法的映射关系

所以实现下来就变成了如下的样子：

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSExportDelegate<JSExport>

- (void)requestData;

//分享到盆友圈
JSExportAs(shareWX,- (void)shareWX:(NSString *)imgurl withLink:(NSString *)link title:(NSString *)title desc:(NSString *)desc);
//分享到微信
JSExportAs(shareWXCircle,- (void)shareWXCircle:(NSString *)imgurl withLink:(NSString *)link title:(NSString *)title desc:(NSString *)desc);

//是否隐藏分享按钮
JSExportAs(hideShare, - (void)hideShare:(NSInteger)status);

//分享图片，保存至本地
JSExportAs(shareImage, - (void)shareImage:(NSString *)backGroundImg headerImg:(NSString *)headerImg nickName:(NSString *)nickName QRLink:(NSString *)qrLink);

@end

@interface JSExportApi : NSObject<JSExportDelegate>
    
@property (nonatomic,weak) JSContext *context;

@property (nonatomic,weak) UIWebView *webView;

@property (nonatomic,weak) GCCommonController *vc;
//请求的正文内容的ID
@property (nonatomic,copy) NSString *requestID;
//请求的正文的api接口
@property (nonatomic,copy) NSString *webContentApi;

//数据请求成功
@property (nonatomic,copy)  void (^requestSuccessBlock)();

- (void)requestData;
    
@end

紧接着，在使用的时候通过如下的方式进行注入

- (void)fillJSContent{
    
    //注入 js内容
    JSContext *context = [self valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    JSExportApi *jsObject = [JSExportApi new]; 
    jsObject.context = context;
    jsObject.webView = self;
    [context setObject:jsObject forKeyedSubscript:@"app"];
    
}

这样基本也就基本满足了相关的需求内容，如果按照这样的形式开发下去，会有很多问题，如下：

  1. 随着业务的增加，继承自JSExport的协议中声明的方法会越来越多，有些业务压根不需要的一些功能也一并加入到了交互中，臃肿问题很明显
  2. 由于业务代码的入侵，会使当前的交互模块与各个业务模块之间变得高度耦合，随着耦合性的增加，后期维护起来也会愈发麻烦
  3. 深受js方法定义的影响，后续各个方法的改动以及增加的成本变得很高

优化方案

显然这些问题会产生一个严重的后果，随着js交互相关业务的增加，业务代码的入侵造成各个业务模块对交互模块的高度耦合，让项目的后续迭代以及维护变得愈发困难。对此，我们有必要设计一个关于js与本地代码交互的通用模块，保证后续的交互的正常进行，并且当前的交互模块不与任何的业务模块存在耦合关系，有着类似于依赖倒置的设计原则（业务模块依赖js交互模块，而js交互模块与任何业务模块不产生任何依赖关系），同时要把后续迭代中的代码改动成本降到最低。基于这些特点，就有了js交互的优化方案的方向。

image.png

如图所示，按照优化思想，需要将各个业务模块内容分离出将要设计的js交互模块，对于模块的设计有着如下特点：

  1. 具有封装性，不受后续新增交互内容引入的影响
  2. 具有业务分流作用，将业务的处理分离到各个业务模块中处理
  3. 具有独立性，不存在业务模块的依赖关系

为了保证其封装性以及后续js内容的引入让其不受影响，需要去设计一个统一的入口来处理各种交互内容的添加。如图：

image.png

如果能在js的交互中统一的使用一个方法进行处理，那么实际上第一个封装性特点就满足了，所以此时有两种方案去设计这样一个入口处理方法：

  1. 在后台设计js交互的过程中让他们统一一个调用接口方法
  2. 如果第一步协商不了的话，只能通过自己本地js代码注入转换来实现了

对于第二种方案，我们需要进行本地js方法包装了，在设计方法包装的时候，我们需要注意以下几点：

  1. 对于js原始方法的调用转换成对统一入口处理方法postMsg()的调用
  2. 转换的最终的目的运行环境仍是js的运行环境，即context环境下
  3. js包装完成之后的注入时机

对于第二点需要强调一点的是，context是js运行的环境，也就是说在js运行的时候，是通过context环境中的代码进行执行的，所以注入的js代码实际上是之前js定义的某些方法内容的实现的补充（context中可能只存在方法的调用，但是没有方法实体，此时注入方法实体之后，context就能够正常调用了）。所以对于第三点一定要保证js调用某个方法之前已经将该方法的实现注入到context中才能够保证其调用的正常。

在设计方法包装的时候，我们需要注意以下几点

  • 原始方法的名字的包装
  • 原始方法的参数的包装
/*
例如JS调用一个app.showMessage()方法
本地设计的统一的入口方法为postMessage(methodName,parameter)
通过包装转换到统一的入口方法进行调用就变成了如下内容：
func showMessage(){
   app.postMessage(methodName:'showMessage',parameter:{"":""});
}
所以重点放在了包装的过程上
*/

- (NSMutableString *)setupSignalJsMethod:(NSString *)kMethodName parameter:(NSString *)kParameter{
    
    //在此拿到对应的参数来组装实现对应的js方法内容
    NSMutableString *signalJsMethod = [@"" mutableCopy];
    NSMutableString *parameterTransfrom = [@"" mutableCopy];
    
    if (parameter.length > 0) {
        
        NSArray *parameterArray = [kParameter componentsSeparatedByString:@","];
        NSLog(@"参数数组：%@",parameterArray);
        [parameterTransfrom appendString:@"{"];
        NSLog(@"处理：%@",parameterArray);
        for (NSString *tempParameter in parameterArray) {
            NSLog(@"Linshi:%@",tempParameter);
            [parameterTransfrom appendString:[NSString stringWithFormat:@"'%@':%@,",tempParameter,tempParameter]];
        }
        
        [parameterTransfrom replaceCharactersInRange:NSMakeRange(parameterTransfrom.length-1 , 1) withString:@""];
        [parameterTransfrom appendString:@"}"];
        NSLog(@"获取的参数：%@",parameterTransfrom);
    }else{
        parameterTransfrom = [@"{}" mutableCopy];
    }
   
   [signalJsMethod appendString:[NSString stringWithFormat:@"app.%@ = function(%@){\n",kMethodName,kParameter]];   
   [signalJsMethod appendString:[NSString stringWithFormat:@"\t app.postJSMessage({%@:'%@', %@:%@});",kJsMethodName,kMethodName,kJsMethodParameter,parameterTransfrom]];
   
   [signalJsMethod appendString:@"\t}\n\n"];
   
    return signalJsMethod; 
}

由于正常函数的调用是通过函数名字与参数的内容进行调用的，所以针对于这两个必要内容，可以在设计JSExportApiObj的时候添加对于原始context环境中调用方法的包装、解析、转换js的调用到统一的入口postmessage()来进行处理(该设计思想用到了设计模式中的外观模式)。

如此一来，JSExportManager就变成了：

image.png

对于方法的添加以及定义我们可以新建一个管理类用于管理所有的js交互方法以及内容，如下所示：

image.png

这里声明了两个字典属性主要目的是为了存储js交互中所添加的方法实现、以及方法参数等函数信息。postMsg(method,parameter)统一入口则用来处理需要调用的方法，类似于一个方法路由，通过字典来找到对应存储的执行体进行方法的调用。

为了方便注入我们可以为UIWebView添加一个分类，来保证通用功能的封装以及功能接口的提供。

image.png

所以不知不觉就添加了三个类用于支撑js交互相关的内容，分别是
JSManager、JSExportObj、UIWebView + JSBridge。它们之间的关系如下图所示：

image.png

分类JSBridge负责提供js交互方法的声明以及js代码的注入，而JSManager类主要负责由js调用方法的包装，包装完成之后通过unitAllInjectMethod()返回包装后的js实现代码给bridge,目的是让bridge将包装后的js实现代码放到context环境中，从而保证js的方法调用转换为统一的postMsg()的调用，进而统一的交由JSEXportApi中的PostMsg()方法去进行处理。最后的方法的本地执行实际上是通过JSExportApiObj中的PostMsg()来进行方法路由索引最终执行的。

概要代码实现

/*
 *js交互方法用于处理所有的关于js交互的内容
 */
- (void)postJSMessage:(id)parameter{
    
    if ([parameter isKindOfClass:[NSDictionary class]]) {
        
        NSString *methodName = [parameter objectForKey:kJsMethodName];
        NSDictionary *methodParameter = [parameter objectForKey:kJsMethodParameter];
        
        
        NSLog(@"执行交互:%@",methodParameter);
        
        if (methodName) {
            GC_JsMethodBlock localBlock = [self.manager.jsMethodDic objectForKey:methodName];
            if (localBlock) {
                
                dispatch_async(dispatch_get_main_queue(), ^{
                    localBlock(methodParameter);
                });
                
            }
            
        }
        
    }
    
    
    
}

/*
 在此组装js方法，目的是将当前的js方法转换成统一的一个js入口方法进行处理
 app.showToast(message) 组装成
 app.showToast = showToast(message){
    app.postJsMessage(methodName:'showToast', parameter:'message');
 }
*/
- (NSMutableString *)transfromToInjectJSCode{
    
    NSLog(@"包装开始");
    NSMutableString *jsImplementMethod = [@"" mutableCopy];
    
    NSDictionary *allMethodKeys = [[self.manager.jsMethodDic allKeys] copy];
    
    for (NSString *kMethodName in allMethodKeys) {
        NSLog(@"当前的keyName:%@",kMethodName);
        [jsImplementMethod appendString:[self setupSignalJsMethod:kMethodName]];
    }
    
    NSLog(@"result:%@-----",jsImplementMethod);
    
    return jsImplementMethod;
    
}

- (NSMutableString *)setupSignalJsMethod:(NSString *)kMethodName{
    
    //在此拿到对应的参数来组装实现对应的js方法内容
    NSMutableString *signalJsMethod = [@"" mutableCopy];
    NSMutableString *parameterTransfrom = [@"" mutableCopy];
    
    NSString *parameter = [self.manager.jsParameterDic objectForKey:kMethodName];
    
    if (parameter.length > 0) {
        
        NSArray *parameterArray = [parameter componentsSeparatedByString:@","];
        NSLog(@"参数数组：%@",parameterArray);
        [parameterTransfrom appendString:@"{"];
        NSLog(@"处理：%@",parameterArray);
        for (NSString *tempParameter in parameterArray) {
            NSLog(@"Linshi:%@",tempParameter);
            [parameterTransfrom appendString:[NSString stringWithFormat:@"'%@':%@,",tempParameter,tempParameter]];
        }
        
        [parameterTransfrom replaceCharactersInRange:NSMakeRange(parameterTransfrom.length-1 , 1) withString:@""];
        [parameterTransfrom appendString:@"}"];
        NSLog(@"获取的参数：%@",parameterTransfrom);
    }else{
        parameterTransfrom = [@"{}" mutableCopy];
    }
    
   
    if (parameter) {
        [signalJsMethod appendString:[NSString stringWithFormat:@"app.%@ = function(%@){\n",kMethodName,parameter]];
        [signalJsMethod appendString:[NSString stringWithFormat:@"\t app.postJSMessage({%@:'%@', %@:%@});",kJsMethodName,kMethodName,kJsMethodParameter,parameterTransfrom]];
        [signalJsMethod appendString:@"\t}\n\n"];
    }
    
    NSLog(@"transFormResult:%@",signalJsMethod);
    
    return signalJsMethod;
    
}

/*
 *js交互方法用于处理所有的关于js交互的内容
 */
- (void)postJSMessage:(id)parameter{
    
    if ([parameter isKindOfClass:[NSDictionary class]]) {
        
        NSString *methodName = [parameter objectForKey:kJsMethodName];
        NSDictionary *methodParameter = [parameter objectForKey:kJsMethodParameter];
        
        
        NSLog(@"执行交互:%@",methodParameter);
        
        if (methodName) {
            GC_JsMethodBlock localBlock = [self.manager.jsMethodDic objectForKey:methodName];
            if (localBlock) {
                
                dispatch_async(dispatch_get_main_queue(), ^{
                    localBlock(methodParameter);
                });
                
            }
            
        }
        
    }
    
}


- (void)cfgJsMethod:(NSString *)kJsMethodName withParameterFormatter:(NSString *)parameterStr withMethodBlock:(GC_JsMethodBlock)block{
    
    [self.jsMethodDic setObject:block forKey:kJsMethodName];
    [self.jsParameterDic setObject:parameterStr forKey:kJsMethodName];
    
}

最后

这样设计最终的效果是：

[self.webView cfgJsMethod:@"shareWX" withParameterFormatter:@"imgurl,link,title,desc" withMethodBlock:^(NSDictionary *parameter) {
        
        NSString *imgurl = parameter[@"imgurl"];
        NSString *link = parameter[@"link"];
        NSString *title = parameter[@"title"];
        NSString *desc = parameter[@"desc"];
         //完成业务逻辑的执行内容
         
    }];

其实在设计Manager的时候我们可以将一些通用能力的功能提前加入到js交互中，比如系统弹窗、系统提示等等内容。而对于各个业务板块的逻辑的内容就放在各个业务模块中进行处理以避免js交互层的业务代码的入侵。

最后该JS交互方案的思想还要感谢博主@翻炒吧蛋滚饭的提示与建议,由衷感谢。

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