04. WebApp2.0时代启程:跨平台的JSPatch

    xiaoxiao2026-04-13  5

    紧接上回,Cocos2d-JS通过JSBinding从C++API到JSAPI,完成了H5的跨平台加速,这一回,我们一起来见证一下JSPatch的跨平台实现,为JS语言增加消息转发机制,无需修改js脚本,让下面这段代码可以正确地运行起来:

    var controller = UIViewController.alloc().init();

    而不是让app翻译成:

    UIViewController.__c('alloc')().__c('init')();

    JSPatch依赖JavaScriptCore作为运行环境,在iOS7.0之后越来越受到终端开发者的欢迎,我们简单地分析JSPatch的技术框架和原理,来引出SpiderMonkey在Patch上的lazy加载机制:

    1. JSPatch通过JS动态调用OC的代码

    使用反射机制`

    Class class = NSClassFromString("UIViewController"); id viewController = [[class alloc] init]; SEL selector = NSSelectorFromString("viewDidLoad"); [viewController performSelector:selector];

    `使用runtime机制动态注册类,并添加函数`

    Class superCls = NSClassFromString(superClassName); cls = objc_allocateClassPair(superCls, className.UTF8String, 0); objc_registerClassPair(cls); class_addMethod(cls, @selector(ORIGforwardInvocation:), originalForwardImp, "v@:@");

    `替换掉掉原有的实现,增加JS拦截`

    IMP originalImp = class_respondsToSelector(cls, selector) ? class_getMethodImplementation(cls, selector) : NULL; IMP msgForwardIMP = _objc_msgForward; class_replaceMethod(cls, selector, msgForwardIMP, typeDescription);

    `通过require增加全局变量`

    var _require = function(clsName) { if (!global[clsName]) { global[clsName] = { __isCls: 1, __clsName: clsName; }; } return global[clsName] }

    `

    修改JS脚本,通过正则替换JS的表达式:

    UIView.alloc().init(); 替换后 UIView.__c('alloc')().__c('init')();

    2. 因为JS语言没有转发机制,无法用懒加载机制,来动态的改版语言的调用,因此,JSPatch绕了很大一个弯,使用runtime替换了Objective-C的函数,动态注册新的类和函数,新增加了一些JSAPI,尽可能的让JS的写法更贴近Native方式,降低Native开发者对JSPatch的门槛,然而并没有像wax框架一样,让脚本的写法更自然。

    问题的核心是,JS能否拥有API的转发机制,通过运行时动态加载和调用,打开JSClass,查看描述信息:

    查看JSResolveOp方法的说明:`解决在一个Obj对象上的懒加载属性,这些属性按照需求映射在Native对象;JS会首先在Obj上查找该属性,如果没有找到,则调用该方法解析该属性;如果解析成功,JS引擎将再次调用Obj.ID,如果没有找到,会提交给它的父类解析;JSNewResolveOp提供了更便宜的方式来解决延迟属性;`

    3. 我们看一下我们将采用的技术架构:

    当SpiderMonkey遇到UIVIew的时候,会触发全局global对象的属性查找,如果没有找到,交给JSResolveOp方法处理,这里我们重载的JSResolveOp方法: bool AJContext::Resolve(JSContext *cx, HandleObject handle, HandleId handId, MutableHandleObject retval) { char* name = JS_EncodeStringToUTF8(cx, RootedString(cx, JSID_TO_STRING(handId))); Class clazz = objc_getClass(name); if (clazz) { AJContext* nactx = (AJContext*)JS_GetContextPrivate(cx); RootedObject proxy(cx, JS_NewObject(cx, &AJProxy::Clazz, RootedObject(cx, nactx->prototypeProxy()), NullPtr())); JS_SetPrivate(proxy, new AJProxy(false, clazz)); JS_DefinePropertyById(cx, handle, handId, proxy, 0); retval.set(handle.get()); } return true; } 这里我们只是使用JSObject的空的代理,我们将所有数据保存在一个Native的对象中: class AJProxy { public: void* prt; bool isObject; char* className public: GetterAndSetterMethods.... } 调用对象的init方法: bool AJProxy::NewResolve(JSContext *cx, JS::HandleObject handle, JS::HandleId handId, JS::MutableHandleObject retval) { const char* name = JS_EncodeStringToUTF8(cx, RootedString(cx, JSID_TO_STRING(handId))); fprintf(stderr, "%s\n", name); AJProxy* proxy = (AJProxy*)JS_GetPrivate(handle); if (proxy->isObject()) { //...处理对象方法 } else { // ...处理类方法 id clazz = (id)proxy->target(); id object = objc_msgSend(clazz, sel_registerName(name)); AJContext* nactx = (AJContext*)JS_GetContextPrivate(cx); RootedObject proxy(cx, JS_NewObject(cx, &AJProxy::Clazz, RootedObject(cx, nactx->prototypeProxy()), NullPtr())); JS_SetPrivate(proxy, new AJProxy(true, object)); JS_DefineFunction(cx, handle, name, NewFunction, 0, 0); retval.set(handle.get()); } return true; }

    4. 至此,一个跨平台的JSPatch的Demo写完了。

    需要补充的地方也很多,比如继承、类型转换等,作者很喜欢SpiderMonkey、C++,这种兼容iOS和Android的事情,还需要很多很多的工作。这里我们主要讲得时SpiderMonkey,通过这个小巧的JsVM,我们可以重新改写很多JS的不擅长的地方,毕竟js的开发者要比lua、wax、swift多很多。相信不需要多久,就会有人写出跨平台的JSPatch,使用JS开发的同学会越来越多。

    (总结)想要了解的更多,就要深入底层,下一站,我们带来OpenGL ES2.0 与JS的混合开发。

    最新回复(0)