EasyJsWebView的源码分析

作者: 哈布福禄克 | 来源:发表于2019-11-17 16:00 被阅读0次

1、iOS端（js -> native interface）

安卓，iOS，h5的统一性也能让开发者只用关心交互的接口即可。因此便引出了EasyJSWebView的第三方的框架，下面从该框架的使用出发，分析框架的具体实现。

实现分析：

iOS端虽然也可以通过JSContext注入全局的方法但是达不到与安卓端统一

iOS端可以通过拦截h5请求的url，通过url的格式区分类或方法，但是这样不够直观，也达不到与安卓端统一

2、EasyJsWebView使用

native端

@interface MyJSInterface : NSObject
- (void) test;
- (void) testWithParam: (NSString*) param;
- (void) testWithTwoParam: (NSString*) param AndParam2: (NSString*) param2;
- (NSString*) testWithRet;
@end
// 注入
MyJSInterface* interface = [MyJSInterface new];
[self.myWebView addJavascriptInterfaces:interface WithName:@"MyJSTest"];
[interface release];

js端

MyJSTest.test();
MyJSTest.testWithParam("ha:ha");
MyJSTest.testWithTwoParamAndParam2("haha1", "haha2");
var str = MyJSTest.testWithRet();

3、EasyJsWebView具体实现

3.1、EasyJsWebView初始化

- (id)init{
    self = [super init];
    if (self) {
        [self initEasyJS];
    }
    return self;
}

- (void) initEasyJS{
    self.proxyDelegate = [[EasyJSWebViewProxyDelegate alloc] init];
    self.delegate = self.proxyDelegate;
}

- (void) setDelegate:(id<UIWebViewDelegate>)delegate{
    if (delegate != self.proxyDelegate){
        self.proxyDelegate.realDelegate = delegate;
    }else{
        [super setDelegate:delegate]; 
    }
}

初始化设置webView的delegate,实际的webView的回调的在EasyJSWebViewProxyDelegate中实现，因此我们主要关注EasyJSWebViewProxyDelegate中的webView的回调的实现即可。

3.2、EasyJSWebViewProxyDelegate webView回调实现

3.2.1、webViewDidStartLoad回调实现

NSMutableString* injection = [[NSMutableString alloc] init];
    
//inject the javascript interface
for(id key in self.javascriptInterfaces) {
    NSObject* interface = [self.javascriptInterfaces objectForKey:key];
    
    [injection appendString:@"EasyJS.inject(\""];
    [injection appendString:key];
    [injection appendString:@"\", ["];
    
    unsigned int mc = 0;
    Class cls = object_getClass(interface);
    Method * mlist = class_copyMethodList(cls, &mc);
    for (int i = 0; i < mc; i++){
        [injection appendString:@"\""];
        [injection appendString:[NSString stringWithUTF8String:sel_getName(method_getName(mlist[i]))]];
        [injection appendString:@"\""];
        
        if (i != mc - 1){
            [injection appendString:@", "];
        }
    }
    
    free(mlist);
    
    [injection appendString:@"]);"];
    
    
    NSString* js = INJECT_JS;
    //inject the basic functions first
    [webView stringByEvaluatingJavaScriptFromString:js];
    //inject the function interface
    [webView stringByEvaluatingJavaScriptFromString:injection];
}

遍历注入的接口的列表key

通过key获取注入类的实例

通过类的实例获取实例方法的列表

依次拼接需要执行js函数的代码

EasyJS对象的加载，执行EasyJS.inject方法

例子：参考Demo调试结果如下

EasyJS.inject("MyJSTest", 
[
   "test",
   "testWithParam:", 
   "testWithTwoParam:AndParam2:", 
   "testWithFuncParam:",
   "testWithFuncParam2:", 
   "testWithRet"
]);

3.2.2、EasyJS对象

代码片段一：

inject: function (obj, methods){
    window[obj] = {};
    var jsObj = window[obj];
    
    for (var i = 0, l = methods.length; i < l; i++){
        (function (){
            var method = methods[i];
            var jsMethod = method.replace(new RegExp(":", "g"), "");
            jsObj[jsMethod] = function (){
                return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
            };
        })();
    }
}

遍历注入的类的实例方法的列表，通过一个全局的window[obj]的字典维护对应方法的具体实现。下面我们具体看看EasyJS.call方法的实现。
代码片段二：

call: function (obj, functionName, args){
    var formattedArgs = [];
    for (var i = 0, l = args.length; i < l; i++){
        if (typeof args[i] == "function"){
            formattedArgs.push("f");
            var cbID = "__cb" + (+new Date);
            EasyJS.__callbacks[cbID] = args[i];
            formattedArgs.push(cbID);
        }else{
            formattedArgs.push("s");
            formattedArgs.push(encodeURIComponent(args[i]));
        }
    }
    
    var argStr = (formattedArgs.length > 0 ? ":" + encodeURIComponent(formattedArgs.join(":")) : "");
    alert(argStr);
    var iframe = document.createElement("IFRAME");
    iframe.setAttribute("src", "easy-js:" + obj + ":" + encodeURIComponent(functionName) + argStr);
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
    
    var ret = EasyJS.retValue;
    EasyJS.retValue = undefined;
    
    if (ret){
        return decodeURIComponent(ret);
    }
},

这段代码做了三件事：

1.分别针对参数function类型与其他类型区分处理

2.创建一个IFRAME标签元素,设置src

3.将新建的IFRAME添加到root元素上

修改IFRAME的src默认会触发webView的回调的执行，因此便有了下面方法shouldStartLoadWithRequest的拦截。

3.3、shouldStartLoadWithRequest回调实现

代码片段一：

NSArray *components = [requestString componentsSeparatedByString:@":"];
//NSLog(@"req: %@", requestString);
    
NSString* obj = (NSString*)[components objectAtIndex:1];
NSString* method = [(NSString*)[components objectAtIndex:2]
                    stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    
NSObject* interface = [javascriptInterfaces objectForKey:obj];
    
// execute the interfacing method
SEL selector = NSSelectorFromString(method);
NSMethodSignature* sig = [[interface class] instanceMethodSignatureForSelector:selector];
NSInvocation* invoker = [NSInvocation invocationWithMethodSignature:sig];
invoker.selector = selector;
invoker.target = interface;
    
NSMutableArray* args = [[NSMutableArray alloc] init];
    
if ([components count] > 3){
    NSString *argsAsString = [(NSString*)[components objectAtIndex:3]
                              stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    
    NSArray* formattedArgs = [argsAsString componentsSeparatedByString:@":"];
    for (int i = 0, j = 0, l = [formattedArgs count]; i < l; i+=2, j++){
        NSString* type = ((NSString*) [formattedArgs objectAtIndex:i]);
        NSString* argStr = ((NSString*) [formattedArgs objectAtIndex:i + 1]);
        
        if ([@"f" isEqualToString:type]){
            EasyJSDataFunction* func = [[EasyJSDataFunction alloc] initWithWebView:(EasyJSWebView *)webView];
            func.funcID = argStr;
            [args addObject:func];
            [invoker setArgument:&func atIndex:(j + 2)];
        }else if ([@"s" isEqualToString:type]){
            NSString* arg = [argStr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [args addObject:arg];
            [invoker setArgument:&arg atIndex:(j + 2)];
        }
    }
}
[invoker invoke];

1.拆分拦截到的requestString拆分obj,method,formattedArgs三个部分

2.获取类实例方法的签名，新建一个NSInvocation实例，指定实例与方法

3.invoker设置参数，然后执行invoke，注意参数中function类型的区分，以下4中会分析回调function的处理过程。

代码片段二：

if ([sig methodReturnLength] > 0){
    NSString* retValue;
    [invoker getReturnValue:&retValue];
    
    if (retValue == NULL || retValue == nil){
        [webView stringByEvaluatingJavaScriptFromString:@"EasyJS.retValue=null;"];
    }else{
        retValue = (NSString *)CFBridgingRelease(CFURLCreateStringByAddingPercentEscapes(NULL,(CFStringRef) retValue, NULL, (CFStringRef)@"!*'();:@&=+$,/?%#[]", kCFStringEncodingUTF8));
        [webView stringByEvaluatingJavaScriptFromString:[@"" stringByAppendingFormat:@"EasyJS.retValue=\"%@\";", retValue]];
    }
}

获取invoker执行的结果通过webView执行js代码返回结果值。

4、EasyJSDataFunction 与 invokeCallback

以下主要分析EasyJsWebView是如何处理回调方法参数的。
代码片段一：

if (typeof args[i] == "function"){
    formattedArgs.push("f");
    var cbID = "__cb" + (+new Date);
    EasyJS.__callbacks[cbID] = args[i];
    formattedArgs.push(cbID);
}

js端call方法这样处理function参数，EasyJS对象一个全局的__callbacks字典存储方法实现对象
代码片段二：

if ([@"f" isEqualToString:type]){
    EasyJSDataFunction* func = [[EasyJSDataFunction alloc] initWithWebView:(EasyJSWebView *)webView];
    func.funcID = argStr;
    [args addObject:func];
    [invoker setArgument:&func atIndex:(j + 2)];
}

native端拦截到请求，执行方法
代码片段三：

- (NSString*) executeWithParams: (NSArray*) params{
    NSMutableString* injection = [[NSMutableString alloc] init];
    
    [injection appendFormat:@"EasyJS.invokeCallback(\"%@\", %@", self.funcID, self.removeAfterExecute ? @"true" : @"false"];
    
    if (params){
        for (int i = 0, l = params.count; i < l; i++){
            NSString* arg = [params objectAtIndex:i];
            NSString* encodedArg = (NSString*) CFURLCreateStringByAddingPercentEscapes(NULL, (CFStringRef)arg, NULL, (CFStringRef) @"!*'();:@&=+$,/?%#[]", kCFStringEncodingUTF8);
            
            [injection appendFormat:@", \"%@\"", encodedArg];
        }
    }
    
    [injection appendString:@");"];
    
    if (self.webView){
        return [self.webView stringByEvaluatingJavaScriptFromString:injection];
    }else{
        return nil;
    }
}

回调方法执行，将回调方法执行参数解析封装js函数字符串，注意前两个参数第一个表示js函数的唯一ID方便js端找到该函数对象，第二个表示第一次回调完成是否移除该回调执行的函数对象的bool值，然后webView主动执行，这样就完成个整个的回调过程。

例子：Demo回调执行语句调试

EasyJS.invokeCallback("__cb1462445698745", true, "bla%3B%11basdfla");

EasyJsWebView的源码分析

1、iOS端（js -> native interface）

2、EasyJsWebView使用

3、EasyJsWebView具体实现

3.1、EasyJsWebView初始化

3.2、EasyJSWebViewProxyDelegate webView回调实现

3.2.1、webViewDidStartLoad回调实现

3.2.2、EasyJS对象

3.3、shouldStartLoadWithRequest回调实现

4、EasyJSDataFunction 与 invokeCallback

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读