knowledge-kit/Chapter1 - iOS/1.29.md

# JavascriptCore

1. JSCore is a JavaScript wrapper implemented in C/C++ based on WebKit that makes interaction between JavaScript and native code simpler.

- JSContext  
  JSContext represents an instance of a JavaScript execution environment. All JavaScript execution occurs inside a context. JSContext is also used to manage the lifecycle of JavaScript objects in the VM.

- JSValue  
  JSValue is used to receive the return results from JSContext execution. A JSValue can be any JavaScript type (primitive, object, function, etc.).

- JSManagedValue  
  JSManagedValue is a wrapper around JSValue that helps resolve retain-cycle issues between JS and Objective-C. The most common use is to safely reference a JSValue stored on the heap. If a JSValue is stored on the heap incorrectly, it can easily create retain cycles that prevent JSContext from being released properly.

- JSExport  
  A protocol used to expose native objects to JS; the exposed object can point to itself and to other objects.

- JSVirtualMachine  
  Manages the JS object space and needed resources.

2. Native calling JS

- Load JS code
      (JSValue *)evaluateScript:(NSString *)script;

- Call JS function
      JSValue *callback = self.context[@"sayHi"];
      [callback callWithArguments:@[@"Hangzhou Xiao Liu"]];

3. JS calling Native

- Implement via a block. Then call the method directly from JS. Note: inside the block do not directly use externally defined JSContext or JSValue; pass them as parameters or obtain them via + (JSContext *)currentContext; otherwise it may cause retain cycles and memory won't be freed correctly.
      self.context[@"showMessage"] = ^(NSString *message){
              UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"Notice" message:message preferredStyle:UIAlertControllerStyleAlert];
              UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
              [alertCtr addAction:cancel];
              // Note: the block executes on a background thread; update UI on main thread.
              dispatch_async(dispatch_get_main_queue(), ^{
                  [weakSelf presentViewController:alertCtr animated:YES completion:nil];
              });
          };

- Implement via the JSExport protocol; JS will call methods on an injected Objective-C object, so the methods must be declared in the protocol and implemented on the injected object. Inject the native object when the web view finishes loading.
      // Protocol declaration
      
      @protocol JSInject <JSExport>
      - (void)showMessage:(NSString *)message;
      @end
      
      // Implementation
      
      - (void)showMessage:(NSString *)message{
            UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"Notice" message:message preferredStyle:UIAlertControllerStyleAlert];
              UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
              [alertCtr addAction:cancel];
              // Note: the method runs on a background thread; update UI on main thread.
              dispatch_async(dispatch_get_main_queue(), ^{
                  [weakSelf presentViewController:alertCtr animated:YES completion:nil];
              });
      }
      
      // Injection
      
      - (void)webViewDidFinishLoad:(UIWebView *)webView
      {
          // Get the JSContext from the web view.
          self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
      
          // Inject the Objective-C object needed by JS
          self.context[@"Bridge"] = [JSInject new];
      }
  

Example

JS calls Native

    // Native object to expose (with some properties and methods)
    #import <Foundation/Foundation.h>
    #import <JavaScriptCore/JavaScriptCore.h>
    
    @protocol PersonInjectExport<JSExport>
    
    @property (nonatomic, strong) NSString *name;
    
    @property (nonatomic, strong) NSString *hobby;
    
    - (id)sayHi;
    
    @end
    
    
    @interface PersonInject : NSObject<PersonInjectExport>
    
    @property (nonatomic, strong) NSString *name;
    
    @property (nonatomic, strong) NSString *hobby;
    
    - (id)sayHi;
    
    @end
    
    
    // view controller
    
    - (void)webViewDidFinishLoad:(UIWebView *)webView{
        self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        PersonInject *person = [[PersonInject alloc] init];
        person.name = @"Hangzhou Xiao Liu";
        person.hobby = @"Coding, Movie, Music, Table tennis, Fit";
        self.jsContext[@"lbp"] = person;
    }
    
    // JS
    <body>
    
      Hi. Hello everyone, I am
      <p id="name">***</p>
    
      <button id="show">Then do an introduction</button>
    
    </body>
    <script>
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
      var isiOS = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // iOS device  
    
      document.getElementById("show").onclick = function () {
        if (isiOS) {
          document.getElementById("name").innerHTML = lbp.name;
          setTimeout(() => {
            alert(lbp.sayHi());
          }, 1000);
        }
      }
    </script>



Native calls JS

    // Native
    - (void)callJS{
        JSValue *functionName = self.jsContext[@"sum"];
        NSInteger sum = [[functionName callWithArguments:@[@"2",@"18"]] toInt32];
        
        UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:@"Calculation from JS" message:[NSString stringWithFormat:@"%zd",sum] preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
        [alertVC addAction:okAction];
        [self presentViewController:alertVC animated:YES completion:nil];
    }
    
    // JS
    function sum(a ,b){
    	return parseInt(a) + parseInt(b);
    }