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是个非常古老的框架了，已经无人维护，使用此框架的项目也比较少，里面可能埋有一些深坑，希望通过以上的分析大家能够了解其中的细节，为解决以后可能出现的交互问题打下坚实的基础。
