JockeyJS——优秀的WebView与JS交互开源库使用和解析-白红宇

前言

在Android上，对于JS交互，往往是通过系统原生提供的@JavascriptInterface这种方式进行交互的，而本人在项目的应该也是使用这种方式。最近听朋友提到一个库——JockeyJS，封装了JS交互逻辑，通过少量的接口让开发者只需要关注Java和JS之间的方法调用。我对它避开@JavascriptInterface的实现比较感兴趣，后来发现JockeyJS有于Java和JS之间的方法调用和回调有着不错的封装，于是便有了分析JockeyJS一文。

一、JockeyJS基本使用

JockeyJS是几年前的库了，虽然是比较久的库，但放到现在仍然可用。

首先，需要在h5页面上引用项目中的jockey.js

接下来在客户端进行配置，JockeyJS主要通过on(String type, JockeyHandler ... handler)和send(String type, WebView toWebView, Object withPayload, JockeyCallback complete) 两个方法来实现Java与JS之间的交互。

on(String type, JockeyHandler ... handler)这一接口让我们可以在Java上提供给JS需要调用的方法，类似于@JavascriptInterface的功能，type是我们提供的方法名，handler中的回调是我们运行的代码。

jockey.on("useJavaMethod", new JockeyHandler() {	@Override	protected void doPerform(Map
    
      payload) {		// do something	}});复制代码

send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)用于Java调用JS方法，type是调用的方法名，toWebView是调用的webView，withPayload是参数，会转成json传递，complete是调用成功后的回调。

jockey.send("useJsFuntion", webView, null, new JockeyCallback() {	@Override	public void call() {		// secceed to use js function	}});复制代码

二、JockeyJS原理解析

参考JockeyJS提供的demo，在JockeyJS生效前，需要进行以下设置

jockey = JockeyImpl.getDefault();jockey.configure(webView);setJockeyEvents();复制代码

JockeyImpl.getDefault()这里提供了对Jockey接口的默认实现，也就是对于JS交互这一核心功能的实现。

jockey.configure(webView)向JockeyJS传入webView，JockeyJS会对webView进行setJavaScriptEnabled(boolean)和setWebViewClient(WebViewClient)的设置。

setJockeyEvents()即一系列的on(String type, JockeyHandler ... handler)操作，添加可供调用的Java方法。

这样的话我们主要关注JockeyImpl.getDefault()的实现。

public static Jockey getDefault() {	return new DefaultJockeyImpl();}复制代码

可见该方法返回的是DefaultJockeyImpl。跟进DefaultJockeyImpl，发现该类也是继承了JockeyImpl类的，我们先来看DefaultJockeyImpl实现。主要看send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)。

1. Java调用JS的实现

public void send(String type, WebView toWebView, Object withPayload, JockeyCallback complete) {	int messageId = messageCount;	if (complete != null) {		add(messageId, complete);	}	if (withPayload != null) {		withPayload = gson.toJson(withPayload);	}	String url = String.format("javascript:Jockey.trigger(\"%s\", %d, %s)",			type, messageId, withPayload);	toWebView.loadUrl(url);	++messageCount;}复制代码

该方法中有一个messageId，这个messageId是做什么用的放在之后再解析。withPayload这个容易理解，是用来传递参数的。接下来，webView进行loadUrl(String url)，这个url是send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)方法的关键。url的格式是javascript:Jockey.trigger(\"%s\", %d, %s)，即调用了Html的window.Jockey.trigger(type, messageId, json)方法，JS会通过type去匹配相对应的函数并且调用，JS层的具体实现这里不讲。

在和JS交互的业务中，往往需要在调用完JS函数后有一个回调，以便通知我们该函数运行完成，可以继续后续操作。JockeyJS已经集成了这一逻辑。当调用send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)时，会将一个自增的messageId和一个JockeyCallback一一对应保存在_callbacks变量中，Java层将messageId和函数名一起传给JS，JS在运行完相关函数后，会使用该messageId通知Java（通知方式见JS调用Java的实现），Java层的JackeyJS通过messageId找到JockeyCallback并调用来完成回调。这一层逻辑不暴露给开发者，开发者只需要关心JockeyCallback的实现，大大方便了回调的处理。

2. JS调用Java的实现

JS调用Java不通过@JavascriptInterface，那是怎么调用的呢？通过JockeyImpl类可以找到，JockeyJS对webView设置了自己的JockeyWebViewClient，JockeyWebViewClient的特别之处在于重写了shouldOverrideUrlLoading(WebView view, String url)方法。

public boolean shouldOverrideUrlLoading(WebView view, String url) {	...	if (isJockeyScheme(uri)) {		processUri(view, uri);		return true;	}	...}复制代码

这里isJockeyScheme(uri)对url进行了判断：

public boolean isJockeyScheme(URI uri) {	return uri.getScheme().equals("jockey") && !uri.getQuery().equals("");}复制代码

当url的scheme为jockey时，即url是以jockey://xxx这种格式存在时，JockeyJS会对该url进行拦截，交给应用自己处理，调用processUri(WebView view, URI uri)。

public void processUri(WebView view, URI uri)		throws HostValidationException {	String[] parts = uri.getPath().replaceAll("^\\/", "").split("/");	String host = uri.getHost();	JockeyWebViewPayload payload = checkPayload(_gson.fromJson(			uri.getQuery(), JockeyWebViewPayload.class));	if (parts.length > 0) {		if (host.equals("event")) {			getImplementation().triggerEventFromWebView(view, payload);		} else if (host.equals("callback")) {			getImplementation().triggerCallbackForMessage(					Integer.parseInt(parts[0]));		}	}}复制代码

JockeyJS从url中取出host和parts，判断host为"event"时，JockeyJS调用getImplementation().triggerEventFromWebView：

protected void triggerEventFromWebView(final WebView webView,		JockeyWebViewPayload envelope) {	final int messageId = envelope.id;	String type = envelope.type;	if (this.handles(type)) {		JockeyHandler handler = _listeners.get(type);		handler.perform(envelope.payload, new OnCompletedListener() {			@Override			public void onCompleted() {				_handler.post(new Runnable() {					@Override					public void run() {						triggerCallbackOnWebView(webView, messageId);					}				});			}		});	}}复制代码

JockeyJS通过envelope.type从_listeners拿到对应的JockeyHandler，这些JockeyHandler就是我们初始化JockeyJS时通过on(String type, JockeyHandler ... handler)加入的。接着perform(Map<Object, Object> payload, OnCompletedListener listener)调用doPerform(Map<Object, Object> payload)：

protected void doPerform(Map
    
      payload) {	for (JockeyHandler handler : _handlers)		handler.perform(payload, this._accumulator);}复制代码

可以看到是对我们注册的JockeyHandler进行调用，这样便实现了JS对Java方法的调用。

单单到这一步还没完成JockeyJS的这一调用流程，接下来成JockeyJS会在doPerform(Map<Object, Object> payload)完成后，通过triggerCallbackOnWebView(webView, messageId)回调JS，通知JS层方法已执行完毕，由JS去执行后续操作。

triggerCallbackOnWebView(webView, messageId)的实现类似于send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)，在此就不赘述。

回到host的判断，还有一种host为"callback"的情况，此时JockeyJS会调用getImplementation().triggerCallbackForMessage(int messageId)：

protected void triggerCallbackForMessage(int messageId) {	try {		JockeyCallback complete = _callbacks.get(messageId, _DEFAULT);		complete.call();	} catch (Exception e) {		e.printStackTrace();	}	_callbacks.remove(messageId);}复制代码

很简单，该方法是通知messageId从_callbacks中取出JockeyCallback并调用，即在上文中提到的send(String type, WebView toWebView, Object withPayload, JockeyCallback complete)接收JS回调的实现。

三、总结

JockeyJS无疑是封装良好的用于JS交互的库，不仅仅适用于Android，也兼容iOS平台。通过webView.loadUrl("javascript:xxx")和shouldOverrideUrlLoading(WebView view, String url)方法达到Java和JS的相互调用，并封装了回调逻辑，大大方便业务的开发。当然，随着项目业务需求的增加，JockeyJS还是有可以优化的空间，但是JockeyJS的整体封装值得参考，特别是对于初始项目，可以在JS交互上少走一点弯路。感兴趣的同学也可以继续阅读JockeyJS在JS层和iOS层的代码实现。