JSPatch使用小记

hotfix的作用众所周知，Android和iOS都有各自的技术，但是相比Android的当天发布来说（如果你们的项目不需要灰度），iOS热更新的意义更加重大。因为iOS审核周期长不说，而且运气不好会遇到各种被拒，即使申请快速审核，也必须满足二者之一：能够准确的告诉苹果复现crash的步骤，或者在特殊节日附近。可能你费劲周折的提心吊胆和那么多天其实也就是在某个类中加三行代码。

1.简单介绍

在没有JSPatch之前，可能有人会使用过JSCocoa。但是有着一系列复杂问题，比如源码已经多年没有维护，代码规模巨大，不支持ARM64。如果想使用还需要升级libffi，并且尝试兼容ARM64，想编译通过都很困难。

JSPatch的出现基本解决了上述所有问题。在一个项目中接入JSPatch的成本很低，需要动点脑筋的可能就是如何合理的提交和下载。

关于JSPatch的原理作者的博客已经说的很清楚，本文不再说明，本文主要说的时一些接入操作相关。

2.仓库设置

js文件肯定不能随便往后台某个文件夹一放就让前端去下载了，虽然使用方便但是在App或者版本较多时容易混乱。建议专门搭建一个远端仓库，仓库里主要就是文件夹和js文件，当需要提交js文件时，从主干迁出一个分支，在合适的地方新建文件夹并添加js文件，然后给主干提Pull Request，这应该是一个麻烦但是规范的流程。文件夹结构参考下图:

第三层文件夹里，可以用版本名称也可以使用build号。之后在发请求下载的时候应该是需要拼上项目appname，version等参数。

3.安全策略

安全相关工作如果没有做好，最惨的情况是人家可以通过js文件调用你的任何OC方法，我们肯定不能允许此类事情发生。一般在js文件提交到仓库以后后端应该对这一段js代码进行 md5或者更高手段的编码，并将这段编码与文件存在一起，上图中得meta.json里存的就是这一段编码。之后在发请求的返回值的结构应该是大致如下：

 ? 
 { 
 data: { 
 isUpdate:  true , 
 content: "require( 'MTPoiFeedbackM' ) 
      defineClass( 'MTFeedbackRankCell' ,{ 
              setPoiFeedback:function(poiFeedback){ 
                  self .ORIGsetPoiFeedback(poiFeedback) 
                  var temColor = require( 'UIColor' ).lightGrayColor(); 
                  self .detailLbl().setTextColor(temColor); 
              } 
 })", 
 code:  "9c944f39e57f2e50bdb85deb878cc0f798efb9b0" 
 } 
 } 

就是首先有个字段告诉我们较上次下载的js文件是否有更新。如果为true再检测下方返回的code与内容编码后得到的code是否相同。当然这个内容也可以不直接返回而是返回一个下载的url也是完全可以的。

4.更新频率

我之前看到很多人把使用js和下载js的代码都放在了didFinishLaunchingWithOptions：这个方法。我觉得有所不妥，因为如果这个app用户一直放在手机的后台（比如微信），并且也没出现内存警告的话，这个方法应该一直不会调用。我建议的是：使用js文件的代码放在didFinishLaunchingWithOptions：而下载js文件的代码放在applicationDidBecomeActive: 因为这个方法在程序启动和后台回到前台时都会调用。并且我建议设置一个间隔时间，根据一些数据和权衡之后我们采用的是间隔时间设为1小时。也就是说每次来到这个方法时，先要检测是距离上次发请求的时间间隔是否超过1小时，超过则发请求，否则跳过。

5.接入流程

接入的方式很简单，作者也提供了Demo程序，大致就分为几步：

①在General 的 LinkFrameworks and Libraries里面添加javascriptcore.framework

这个库里主要用于js与oc语言的桥接，比如一些数据类型间的相互转化。

②podfile添加 pod ’JSPatch’ 并pod install

③在代码中添加使用js和下载js的代码

这里作者也给出了示例，使用和下载

 ? 
 [JPEngine startEngine]; 
 NSString *sourcePath = [[ NSBundle mainBundle] pathForResource:@ "demo" ofType:@ "js" ]; 
 NSString *script = [ NSString stringWithContentsOfFile:sourcePath encoding: NSUTF8StringEncoding error: nil ]; 
 [JPEngine evaluateScript:script]; 

 ? 
 [ 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]; 
 }]; 

但是如果你是企业级app，肯定不能直接使用这么朴素的方式，肯定至少也要封装一个manager之类的。我们公司的源码不会在这里贴出来，但是提供一个建立这个manager大概的思路：

6.JSPatch语法

这里是作者列出的语法总结：作者原文不用刻意去看，在写的过程中逐渐就熟悉了。

下面给出一段示例代码解决两个简单的bug。

①假设有一个按钮我们默认应该是让他不可点击的，但是之前忘了设置。

OC代码

 ? 
 - ( void )viewWillAppear:( BOOL )animated 
 { 
      [ super viewWillAppear:animated]; 
      self .confirm.enabled =  NO ; 
 } 

jspatch

 ? 
 defineClass( 'MTBRegisterPage' ,{ 
              viewWillAppear: function(animated) { 
              self . super ().viewWillAppear(animated); 
              self .confirm().setEnabled( NO ); 
              } 
 }) 

②假设有一个列表页有特殊情况临时想叫我们由黑色改成灰色，并展示一个弹窗

OC代码

 ? 
 - ( void )setDealFeedback:(MTDealFeedbackM *)dealFeedback 
 { 
      // ------先调用原来的方法，旧代码保留 
      self .detailLbl.textColor = [UIColor lightGrayColor]; 
      UIAlertView *temAlertView = [[UIAlertView alloc]initWithTitle:@ "提示" message:@ "已购物品用灰色展示" delegate: self cancelButtonTitle:@ "OK" otherButtonTitles: nil ,  nil ]; 
      [temAlertView show]; 
    
 } 

jsPatch

 ? 
 require( 'MTPoiFeedbackM' ) 
 defineClass( 'MTFeedbackRankCell' ,{ 
              setPoiFeedback:function(poiFeedback){ 
              self .ORIGsetPoiFeedback(poiFeedback) 
              var temColor = require( 'UIColor' ).lightGrayColor(); 
              self .detailLbl().setTextColor(temColor); 
              var temAlertView = require( 'UIAlertView' ).alloc(). 
 initWithTitle_message_delegate_cancelButtonTitle_otherButtonTitles( "提示" , "已购物品用灰色展示" ,  self ,  "OK" , null); 
              temAlertView.show() 
              } 
 }) 