JSPatch热修复入门指南和js断点调试
背景
是否有过这样的经历：新版本上线后发现有个严重的bug，可能会导致crash率激增，可能会使网络请求无法发出，这时能做的只是赶紧修复bug然后提交等待漫长的AppStore审核，再盼望用户快点升级，付出巨大的人力和时间成本，才能完成此次bug的修复。
一开始我以为JSPatch是React-Native中抽取出来的，后来发现和React-Native完全没关系。这个项目和JSPatch平台，oc转换工具等是原作者一个人写的，大神就是大神。
使用JSPatch可以解决这样的问题，只需在项目中引入JSPatch，就可以在发现bug时下发JS脚本补丁，替换原生方法，无需更新APP即时修复bug。
例子
首先拷贝 JSPatch/目录下的三个文件 JSEngine.m/ JSEngine.h/ JSPatch.js到项目里即可。demo下载地址：JSPatchDemo
//
// ViewController.m
// TestJSPatch
//
// Created by wuwei on 16/7/20.
// Copyright © 2016年 wuwei. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(nonatomic,strong)UITableView* mytableView;
@property(nonatomic,strong)NSArray *dataSource;
@end
@implementation ViewController
- (void)viewDidLoad
{
UITableView* tv = [[UITableView alloc]initWithFrame:self.view.bounds
style:UITableViewStylePlain];
self.view.backgroundColor = [UIColor clearColor];
self.mytableView = tv;
self.mytableView.delegate = self;
self.mytableView.dataSource = self;
[self.view addSubview:self.mytableView];
self.dataSource = @[@"aaaa",@"bbbbb"];
}
#pragma mark -- UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 3;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString* i= @"cell";
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:i];
if (cell == nil ) {
cell =[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:i];
}
cell.textLabel.text = [NSString stringWithFormat:@"第%li行",(long)indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// cell有三行，当我点击第三行的时候肯定会数组越界导致 crash
// 还好我在JS里弥补了这个bug，详情请看JS里的处理
NSString *content = self.dataSource[indexPath.row];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil message:content delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
[alert show];
}
@end
//demo.js
//用 defineClass()
// 定义 Objective-C 的类，对类和实例方法进行动态替换。
defineClass("ViewController", {
//instance method definitions
tableView_didSelectRowAtIndexPath: function(tableView, indexPath) {
var row = indexPath.row()
if (self.dataSource().count() > row) { // 加上判断越界的逻辑
var alertView = require('UIAlertView').alloc().init();
alertView.setTitle('Alert');
alertView.setMessage('数组下标没有越界');
alertView.addButtonWithTitle('OK');
alertView.show();
}else{
var alertView = require('UIAlertView').alloc().init();
alertView.setTitle('Alert');
alertView.setMessage('数组下标越界');
alertView.addButtonWithTitle('OK');
alertView.show();
}
}
}, {});
//AppDelegate use
// 执行本地js文件
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[JPEngine startEngine];
NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
[JPEngine evaluateScript:script];
return YES;
}
现在点击第3行时，不会崩溃了。因为didSelectRowAtIndexPath函数被js里面的函数取代了。
当然，真正在项目中应该是从网络拉取，动态修改
// 从网络拉回js脚本执行
[NSURLConnection sendAsynchronousRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://cnbang.net/test.js"]] queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
NSString *script = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
[JPEngine evaluateScript:script];
}];
原理
JSPatch用iOS内置的JavaScriptCore.framework作为JS引擎，但没有用它JSExport的特性进行JS-OC函数互调，而是通过Objective-C Runtime，从JS传递要调用的类名函数名到Objective-C，再使用NSInvocation动态调用对应的OC方法。
有兴趣的可以看作者原著:JSPatch 实现原理详解
demo下载地址：JSPatchDemo
与React Native的异同
JSPatch可以动态打补丁，自由修改APP里的代码，理论上还可以完全用JSPatch实现一个业务模块，甚至整个APP，跟wax一样，但不推荐这么做，若想动态为APP添加模块，目前React Native给出了很好的方案，解决了上述三个问题：
JS/OC不会频繁通信，会在事件触发时批量传递，提高效率。（详见React Native通信机制详解）
开发过程无需考虑OC的感受，遵从React框架的思想进行纯JS开发就行，剩下的事情React Native帮你处理好了。
React Native连IDE都准备好了。
工具
JSPatchX (XCode 代码补全插件)
JSPatch Convertor (OC->JS 代码自动转换工具)JSPatch平台
JSPatch平台
JS 断点调试
在 iOS8 下，JSPatch 支持使用 Safari 自带的调试工具对 JS 脚本进行断点调试：
F7C514EB-81D8-40A1-9865-AE8B3FDFBCCD.png
启动调试工具
首先需要开启 Safari 调试菜单：Safari -> 偏好设置 -> 高级 -> 勾选[在菜单栏中显示“开发”菜单]
接着启动Safari -> 开发 -> 选择你的机器 -> JSContext
并且点击：显示扩展创建器
即可开始调试。
2DFE40A0-726A-47C4-A7DA-A5F5ABEC12FD.png
连接真机调试时，需要打开真机的web检查器：设置 -> Safari -> 高级 -> Web检查器
资源列表
资源列表列出了 JSPatch 所有执行中的脚本文件，点开文件后可以对其进行断点调试。
通过 [JPEngine evaluateScript:script]
接口执行的脚本，在资源列表里都表示为 main.js
。
通过 [JPEngine evaluateScriptWithPath:filePath]
接口执行的脚本，在资源列表里会以原文件名表示。
如果你都看到这里了，请给我点个赞吧，你的喜欢是我坚持原创的不竭动力。
