EasyJSWebView原理分析

Posted qmmq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyJSWebView原理分析相关的知识,希望对你有一定的参考价值。

概述

ios6之前,native只能调用webiew里的js代码,官方没有提供js调用native方法的接口。到了iOS7,官方提供了JSContext用来与js交互,native和js可以双向调用。iOS8之后,提供了WKWebview,开放了很多接口来处理H5和native之间的交互,H5与native之间的交互更加的便利了。为了兼容各个版本的js与native的交互,大多数app都没有使用官方提供的与js与native交互的方法,而是使用第三方框架,通过拦截URL的方式实现交互。现在比较流行的一个交互框架是WebViewjavascriptBridge,一直有人维护。而目前财富宝iOS中使用的交互框架是EasyJSWebView,此框架是一个非常老的框架,已经无人维护了,最近一次维护是5年前。财富宝iOS也还没使用WKWebView,使用的是老的UIWebVeiw,下面我们就分析一下在UIWebVeiw中此框架实现js跟native交互的原理。

具体分析

我们先来熟悉一下native中跟js关系比较密切的方法。

当UIWebview在加载一个url的时候,ios系统提供了几个方法,使得我们可以介入加载过程做我们想做的事情,其中两个比较重要的方法是:

1.-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

}

这个方法的语言是oc,不熟悉oc的同学看起来比较费劲,我们改造一下变成与js类似的方法就是

function webViewshouldStartLoad(webView,request,navigationType){

}

为了下面表述方便,我们将此方法称为方法1。这个方法可以理解为是一个钩子函数,当UIWebVeiw将要加载一个url时就会调用此方法,并把要加载的url作为入参(方法里的request)传给此函数,其实就是在将要加载一个url时询问我们是否允许加载此url,如果我们在函数体里返回YES,则UIWebView就加载此url,如果我们返回NO,则UIWebView就不加载此url。

2.-(void)webViewDidFinishLoad:(UIWebView *)webView{

}

用js的写法就是

function webViewDidFinishLoad(webView){

}

为了下面表述方便,我们将此方法称为方法2。这个方法是在html加载完成之后触发。

为什么说这两个方法重要呢,因为js要调用native的方法主要就是利用这两个方法来实现。我们上面说到过,为了兼容各个版本,第三方框架主要是通过拦截url的方式实现,简单来说就是当js想调用native某个方法时,就先按照约定好的格式生成一个url,把方法名和参数拼到url里,然后让webView加载这个url,一旦加载某个url,方法1就会被调用,我们在方法1里就可以捕获这个url,然后对这个url进行解析,取出方法名和参数,利用取到的信息生成native方法并执行,就完成了js对native方法的调用。这就是大概的思路,但是还需要处理很多细节,比如返回值怎么获取,回调函数怎么执行等等。

3.-(NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

用js的写法是

stringByEvaluatingJavaScriptFromString(script)

为了下面表述方便,我们将此方法称为方法3。这个方法的入参是一段js脚本,native可以调用此方法来执行js代码,并返回js执行后的返回值。

native和js的交互基本就是依赖于上面3个方法进行。下面我们就来具体的剖析一下EasyJSWebView框架的具体实现。

第一步,利用native方法3执行一段js脚本,脚本代码如下:
 
window.EasyJS = {
    __callbacks: {},//用于保存回调函数
    invokeCallback: function (cbID, removeAfterExecute){
        var args = Array.prototype.slice.call(arguments);
        args.shift();
        args.shift();
        for (var i = 0, l = args.length; i < l; i++){
            args[i] = decodeURIComponent(args[i]);
        }
        //取出对应函数
        var cb = EasyJS.__callbacks[cbID];
        if (removeAfterExecute){
            EasyJS.__callbacks[cbID] = undefined;
        }
        return cb.apply(null, args);//执行取出的函数
    },
    call: function (obj, functionName, args){
        var formattedArgs = [];
        //遍历传入的参数
        for (var i = 0, l = args.length; i < l; i++){
            //如果入参是函数,往formattedArgs数组里插入一个f标记
            if (typeof args[i] == "function"){
                formattedArgs.push("f");
                //生成一个唯一标识变量
                var cbID = "__cb" + (+new Date);
                //以此唯一标识变量为键,以传入的函数入参为值保存在__callbacks对象中
                EasyJS.__callbacks[cbID] = args[i];
                //将唯一标识变量页加入formattedArgs数组中,紧跟在f标识之后
                formattedArgs.push(cbID);
            }else{
                //如果入参不是函数,则用s标记,加入formattedArgs数组
                formattedArgs.push("s");
                //把入参紧跟在s后面计入formattedArgs数组
                formattedArgs.push(encodeURIComponent(args[i]));
            }
        }
        //以上处理后生成的formattedArgs数组类似于[f,唯一标识1,s,非函数入参1,s,非函数入参2]
        var argStr = (formattedArgs.length > 0 ? ":" + encodeURIComponent(formattedArgs.join(":")) : "");//处理后生成类似于":f:唯一标识1:s:非函数入参1:s:非函数入参2"的字符串
        var iframe = document.createElement("IFRAME");
        //把方法名和入参转化成一个url赋给iframe的src
        //会生成类似于src="easy-js:Native:showMsg::f:唯一标识1:s:非函数入参1:s:非函数入参2"
        iframe.setAttribute("src", "easy-js:" + obj + ":" + encodeURIComponent(functionName) + argStr);
        document.documentElement.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;
        //执行native方法后如果有返回值会把返回值赋给EasyJS.retValue
        var ret = EasyJS.retValue;
        EasyJS.retValue = undefined;
        if (ret){
            return decodeURIComponent(ret);
        }
    },
    inject: function (obj, methods){
        //给window加一个obj属性
        window[obj] = {};
        var jsObj = window[obj];
        //遍历方法数组,取出方法名
        for (var i = 0, l = methods.length; i < l; i++){
            (function (){
                var method = methods[i];
                //去掉方法名里的冒号(ios的方法名带有冒号)
                var jsMethod = method.replace(new RegExp(":", "g"), "");
                //把去掉冒号之后的方法名作为obj对象的属性,该属性的值是一个调用call函数的函数,call函数的入参是调用inject函数时传进来的obj,遍历到的当前方法名本身(method)
                jsObj[jsMethod] = function (){
                    return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
                };
            })();
        }
    }
};

这段脚本执行后,window对象下面就有了个EasyJS对象,这个对象有inject函数、call函数、invokeCallback函数、__callbacks对象。

inject函数:用来注入native暴露给js调用的方法;

call函数:将js方法转换成一个特定规则的url

invokeCallback函数:回调js方法

__callbacks:保存js的回调函数

第二步,取出所有的native暴露给js调用的方法(比如showMsg:、getInfo、callBack:),生成一段字符串脚本,例如“EasyJS.inject("Native", ["showMsg:","getInfo","callFunction:"])”。

oc的方法如果有参数都是带冒号的,有几个参数就会带几个冒号。

第三步,在方法2中执行脚本EasyJS.inject("Native", ["showMsg:","getInfo","callBack:"]),就会调用window下EasyJS对象中的inject函数,inject函数将native暴露给js的方法注入到window下,然后js就可以通过形如Native.showMsg("这是条消息")这样的方式调用native的方法了。

这里关键是EasyJS对象下的inject函数和call函数。我们先来看inject函数,这个函数接收两个参数,一个obj和一个methods数组,这个函数首先把obj挂到window对象下,然后遍历methods数组,取出里面的方法名,把方法名里的冒号去掉,然后以去掉冒号的方法名为键,它的值是一个调用了EasyJS对象下call函数的函数。把{方法名:函数}这样的键值对加入到obj对象中。以脚本EasyJS.inject("Native", ["showMsg:","getInfo","callFunction:"])为例,执行后将生成这样的对象:

 
window.Native={
    showMsg:function(){
        return EasyJS.call("Native", "showMsg", Array.prototype.slice.call(arguments));
    },
    getInfo:function(){
        return EasyJS.call("Native", "getInfo", Array.prototype.slice.call(arguments));
    },
    callBack:function(){
        return EasyJS.call("Native", "callFunction", Array.prototype.slice.call(arguments));
    }
}
 

call函数是js最终能够调用native函数的关键。我们来具体分析下看call方法都做了什么。call方法会遍历传入的参数,判断入参的类型,如果是函数,标记为f,并生成一个唯一标识串,以这个唯一标识串为键,以对应的函数为值,存入__callbacks对象中。如果非函数,标记为s。最后形成一个类似这样的数组[f,唯一标识1,s,非函数入参1,s,非函数入参2]。然后再对这个数组用冒号分离成一个字符串":f:唯一标识1:s:非函数入参1:s:非函数入参2",最后结合函数名等字符串拼接成最终的url,类似于"easy-js:Native:showMsg:f:唯一标识1:s:非函数入参1:s:非函数入参2",这个url里就携带了方法名和参数,把这个url赋给一个临时生成的iframe的src,触发UIWebView的方法1,在方法1里可以捕获到这个url,对其解析后生成相应的native方法并执行,就可完成native方法的调用。如果native方法执行后有返回值,调用方法3执行EasyJS.retValue=返回值脚本,就可把返回值存到EasyJS对象的retValue变量里,call方法在最后取到这个值再return出来给调用方。

EasyJS对象下的__callbacks对象中存储了需要native回调的js方法,native在方法1中解析url时如果遇到f标识符,就知道需要回调js的方法,会取出跟在f之后的唯一标识符,生成EasyJS.invokeCallback("cbID", "removeAfterExecute")脚本,利用native方法3执行脚本,脚本执行后,EasyJS对象下的invokeCallback函数被调用,函数传入的cbID唯一标识符就可以在__callbacks对象中找到对应的回调函数,执行该函数就可完成对js方法的回调。

总结

通过拦截URL的方式实现js与native交互是业界通用做法,能兼容各种版本。EasyJSWebView是个非常古老的框架了,已经无人维护,使用此框架的项目也比较少,里面可能埋有一些深坑,希望通过以上的分析大家能够了解其中的细节,为解决以后可能出现的交互问题打下坚实的基础。

以上是关于EasyJSWebView原理分析的主要内容,如果未能解决你的问题,请参考以下文章

20179209《Linux内核原理与分析》第十二周作

hashmap冲突的解决方法以及原理分析:

编译原理 实验一 java语言实现对C语言词法分析

编译原理 实验一 java语言实现对C语言词法分析

编译原理--语法制导翻译器

20179223《Linux内核原理与分析》第十一周学习笔记