MegatronKing
MegatronKing

React-Native系列Android——Native与Javascript通信原理（一）

React-Native最核心的是Native与Javascript之间的通信，而且是双向通信，Native层到Javascript层，Javascript层到Native层，虽说是两个方向，但实现上大同小异，我们先从Native层入手，研究一下Native调用Javascript的过程。

1、通信模型

Android应用层的程序语言是Java，React-Native在Native端的框架实现用的也是Java语言，所以实质上是Java与Javascript两种程序语言的调用。

其实这个过程，在Android系统上已经有了实现，就是WebView，熟悉WebView的都知道底层实现是WebKit，尽管在Android 4.4系统上切换成了Chromium，但归根结底还是WebKit的变种，只是加了谷歌自己的一些东西。然而React-Native与WebView并没有一点关系，而且后者的WebKit内核也不支持ES6特性（React语法大多基于ES6），那怎么办？只能自己弄一套最新的WebKit作为React-Native的解释器了，这个从安卓工程lib目录下面的libjsc.so动态链接库文件可以印证，这样做还有两个重要好处就是兼容绝大多少设备版本和方便添加自定义功能。

所以由此，我们大概可以猜到React-Native的通信原理，画一张图来简单地描述一下：

2、Java层实现

之前说过，React-Native的重要设计思想是组件化，为了便于维护扩展和降低耦合，React-Native并没有为了实现某一具体的通信编写代码（比如上篇博文所讲的触摸事件传递），而是设计了一套标准用于组件化。这套标准是向开发者开放的，开发者可以自行编写需要的组件用来在Native与Javascript之间通信，虽然这并不是推荐的选择。

2.1 JavaScriptModule组件

React-Native官方实现了一定数量的组件，比如触摸事件组件，按键组件等，这些组件都位于CoreModulesPackage中，属于默认加载的。所有的组件都必须继承JavaScriptModule接口标准。JavaScriptModule位于com.facebook.react.bridge包下面：

/**
 * Interface denoting that a class is the interface to a module with the same name in JS. Calling
 * functions on this interface will result in corresponding methods in JS being called.
 *
 * When extending JavaScriptModule and registering it with a CatalystInstance, all public methods
 * are assumed to be implemented on a JS module with the same name as this class. 
 *
 * NB: JavaScriptModule does not allow method name overloading because JS does not allow method name
 * overloading.
 */
@DoNotStrip
public interface JavaScriptModule {
}

阅读一下注释，主要有三点信息：
1、所有组件必须继承JavaScriptModule，并注册在CatalystInstance中。
2、所有public方法与Javascript层保持同名并由后者具体实现。
3、由于Javascript不支持重载，所以Java中也不能有重载。

仔细的读者会发现，注释里有两个单词非常关键。extending和implemented 。Java层extend，Javascript层implement，也就是说Java层只做接口定义，而实现由Javascript完成。所以，搜索一下JavaScriptModule的子类会发现它们都是接口，没有具体实现类。

有点晦涩但其实很好理解，举个简单的例子。去餐馆吃饭，顾客（Java）只要定义（interface）好想吃什么菜，然后和餐馆（Bridge）说，餐馆会通知自己的厨师（Javascript）把具体的菜做好。这就是一个简单的通信过程Java->Bridge->Javascript。

2.2 JavaScriptModule组件的注册

上一篇文章讲的触摸事件的处理，里面提到一个RCTEventEmitter的类，用来将每个触摸事件都传递给Javascript层，这个组件就是继承于JavaScriptModule。

public interface RCTEventEmitter extends JavaScriptModule {
  public void receiveEvent(int targetTag, String eventName, @Nullable WritableMap event);
  public void receiveTouches(
      String eventName,
      WritableArray touches,
      WritableArray changedIndices);
}

先前注释中第1点，所有JavaScriptModule组件都必须在CatalystInstance中注册，那我们来看一下注册的过程。

RCTEventEmitter是facebook官方定义的，组装在CoreModulesPackage中，而所有的package都是在com.facebook.react.ReactInstanceManagerImpl中处理的，看一下代码：

class ReactInstanceManagerImpl extends ReactInstanceManager {

  ...

  private ReactApplicationContext createReactContext(
      JavaScriptExecutor jsExecutor,
      JSBundleLoader jsBundleLoader) {
     ...
     try {
      CoreModulesPackage coreModulesPackage =
          new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider);
      processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
    } finally {
      ...
    }

    for (ReactPackage reactPackage : mPackages) {
      ...
      try {
        processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder);
      } finally {
        ...
      }
    }

  }

  private void processPackage(ReactPackage reactPackage, ReactApplicationContext reactContext, NativeModuleRegistry.Builder nativeRegistryBuilder, JavaScriptModulesConfig.Builder jsModulesBuilder) {

    ...

    for (Class jsModuleClass : reactPackage.createJSModules()){
      jsModulesBuilder.add(jsModuleClass);
    }
  }
  ...

}

可以看到CoreModulesPackage和开发者扩展自定义的mPackages都是通过processPackage方法里添加到JavaScriptModulesConfig里注册的。

简单的建造者模式，我们直接看一下JavaScriptModulesConfig类，位于包com.facebook.react.bridge下。

public class JavaScriptModulesConfig {

  private final List mModules;

  private JavaScriptModulesConfig(List modules) {
    mModules = modules;
  }

  /*package*/ List getModuleDefinitions() {
    return mModules;
  }

  ...
}

JavaScriptModule明显是通过构造函数传入，然后又通过一个getter方法提供出去了，看样子JavaScriptModulesConfig只起到了一个中间者的作用，并不是真正的注册类。

回看一下之前的ReactInstanceManagerImpl类代码，createReactContext中还有一段，如下：

private ReactApplicationContext createReactContext(
      JavaScriptExecutor jsExecutor,
      JSBundleLoader jsBundleLoader)
     ...

     JavaScriptModulesConfig.Builder jsModulesBuilder = new JavaScriptModulesConfig.Builder();
     JavaScriptModulesConfig javaScriptModulesConfig;
    try {
      javaScriptModulesConfig = jsModulesBuilder.build();
    } finally {
      ...
    }
     ...
    CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
        .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
        .setJSExecutor(jsExecutor)
        .setRegistry(nativeModuleRegistry)
        .setJSModulesConfig(javaScriptModulesConfig)
        .setJSBundleLoader(jsBundleLoader)
        .setNativeModuleCallExceptionHandler(exceptionHandler);

    ...

    CatalystInstance catalystInstance;
    try {
      catalystInstance = catalystInstanceBuilder.build();
    } finally {
      ...
    }

    ...
}

看来最终javaScriptModulesConfig是用来构建CatalystInstance的，正如注释所讲，果然没有骗我。

CatalystInstance只是一个接口，实现类是CatalystInstanceImpl，同样位于包com.facebook.react.bridge下。Catalyst单词的中文意思是催化剂，化学中是用来促进化学物之间的反应，难道说CatalystInstance是用来催化Native和Javascript之间的反应？让我们来瞧一瞧真面目吧。

public class CatalystInstanceImpl implements CatalystInstance {

   ...

     private CatalystInstanceImpl(
      final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,
      final JavaScriptExecutor jsExecutor,
      final NativeModuleRegistry registry,
      final JavaScriptModulesConfig jsModulesConfig,
      final JSBundleLoader jsBundleLoader,
      NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler) {

    ...

    mJSModuleRegistry = new JavaScriptModuleRegistry(CatalystInstanceImpl.this, jsModulesConfig);

    ...

    try {
      mBridge = mReactQueueConfiguration.getJSQueueThread().callOnQueue(
          new Callable() {
            @Override
            public ReactBridge call() throws Exception {
              ...
              try {
                return initializeBridge(jsExecutor, jsModulesConfig);
              } finally {
                  ...
              }
            }
          }).get();
    } catch (Exception t) {
      throw new RuntimeException("Failed to initialize bridge", t);
    }
  }

  private ReactBridge initializeBridge(
      JavaScriptExecutor jsExecutor,
      JavaScriptModulesConfig jsModulesConfig) {
    ...
    ReactBridge bridge;
    try {
      bridge = new ReactBridge(
          jsExecutor,
          new NativeModulesReactCallback(),
          mReactQueueConfiguration.getNativeModulesQueueThread());
    } finally {
       ...
    }
    ...
    try {
      bridge.setGlobalVariable(
          "__fbBatchedBridgeConfig",
          buildModulesConfigJSONProperty(mJavaRegistry, jsModulesConfig));
      bridge.setGlobalVariable(
          "__RCTProfileIsProfiling",
          Systrace.isTracing(Systrace.TRACE_TAG_REACT_APPS) ? "true" : "false");
    } finally {
        ...
    }

    return bridge;
  }


   ...
}

CatalystInstanceImpl构造方法里，jsModulesConfig又被用来初始化JavaScriptModuleRegistry，字面意思是JavaScriptModule注册表，看样子终于找到注册类了。

先不着急，继续往下看CatalystInstanceImpl中还初始化了ReactBridge ，字面意思就是真正连接Native和Javascript的桥梁了。ReactBridge干了什么呢？调用了setGlobalVariable方法，参数里面的buildModulesConfigJSONProperty方法又用到了JavaScriptModulesConfig，顺便来看看。

  private String buildModulesConfigJSONProperty(
      NativeModuleRegistry nativeModuleRegistry,
      JavaScriptModulesConfig jsModulesConfig) {
    JsonFactory jsonFactory = new JsonFactory();
    StringWriter writer = new StringWriter();
    try {
      JsonGenerator jg = jsonFactory.createGenerator(writer);
      jg.writeStartObject();
      jg.writeFieldName("remoteModuleConfig");
      nativeModuleRegistry.writeModuleDescriptions(jg);
      jg.writeFieldName("localModulesConfig");
      jsModulesConfig.writeModuleDescriptions(jg);
      jg.writeEndObject();
      jg.close();
    } catch (IOException ioe) {
      throw new RuntimeException("Unable to serialize JavaScript module declaration", ioe);
    }
    return writer.getBuffer().toString();
  }

这个方法最终的目的是生成一个JSON字符串，而字符串由什么构成呢？nativeModule和jsModules，nativeModule先不管，jsModulesConfig调用了writeModuleDescriptions。

回头看看刚才讲的JavaScriptModulesConfig这个中间类。

public class JavaScriptModulesConfig {

   ...

     void writeModuleDescriptions(JsonGenerator jg) throws IOException {
    jg.writeStartObject();
    for (JavaScriptModuleRegistration registration : mModules) {
      jg.writeObjectFieldStart(registration.getName());
      appendJSModuleToJSONObject(jg, registration);
      jg.writeEndObject();
    }
    jg.writeEndObject();
  }

  private void appendJSModuleToJSONObject(
      JsonGenerator jg,
      JavaScriptModuleRegistration registration) throws IOException {
    jg.writeObjectField("moduleID", registration.getModuleId());
    jg.writeObjectFieldStart("methods");
    for (Method method : registration.getMethods()) {
      jg.writeObjectFieldStart(method.getName());
      jg.writeObjectField("methodID", registration.getMethodId(method));
      jg.writeEndObject();
    }
    jg.writeEndObject();
  }

   ...
}

writeModuleDescriptions这个方法干了什么事呢？遍历所有JavaScriptModule的public方法，然后通过methodID标识作为key存入JSON生成器中，用来最终生成JSON字符串。

这里稍微梳理一下。从initializeBridge->setGlobalVariable->buildModulesConfigJSONProperty->writeModuleDescriptions，整个过程作用是将所有JavaScriptModule的信息生成JSON字符串预先保存到Bridge中。至于为什么这么做，先挖个坑，研究到后面自然就明白了。

2.3 JavaScriptModule组件的调用

继续之前说到的NativeModuleRegistry注册表类，位于包com.facebook.react.bridge中。

/*package*/ class JavaScriptModuleRegistry {

  private final HashMap<Classextends JavaScriptModule>, JavaScriptModule> mModuleInstances;

  public JavaScriptModuleRegistry(CatalystInstanceImpl instance, JavaScriptModulesConfig config) {
    mModuleInstances = new HashMap<>();
    for (JavaScriptModuleRegistration registration : config.getModuleDefinitions()) {
      Classextends JavaScriptModule> moduleInterface = registration.getModuleInterface();
      JavaScriptModule interfaceProxy = (JavaScriptModule) Proxy.newProxyInstance(
          moduleInterface.getClassLoader(),
          new Class[]{moduleInterface},
          new JavaScriptModuleInvocationHandler(instance, registration));

      mModuleInstances.put(moduleInterface, interfaceProxy);
    }
  }

  ...
}

当每次看到这段代码的时候，都有一种惊艳的感觉。前面说过JavaScriptModule组件都是接口定义，在Java端是没有实现类的，被注册的都是Class类，没有真正的实例，Java端又如何来调用呢？答案是：动态代理。

这里使用动态代理除了创建JavaScriptModule组件的实例化类外，还有一个重要的作用，即JavaScriptModule所有的方法调用都会被invoke拦截，这样就可以统一处理所有从Java端向Javascript端的通信请求。

JavaScriptModuleInvocationHandler是JavaScriptModuleRegistry的一个内部类，动态代理的拦截类。

  private static class JavaScriptModuleInvocationHandler implements InvocationHandler {

    private final CatalystInstanceImpl mCatalystInstance;
    private final JavaScriptModuleRegistration mModuleRegistration;

    public JavaScriptModuleInvocationHandler(
        CatalystInstanceImpl catalystInstance,
        JavaScriptModuleRegistration moduleRegistration) {
      mCatalystInstance = catalystInstance;
      mModuleRegistration = moduleRegistration;
    }

    @Override
    public @Nullable Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
      String tracingName = mModuleRegistration.getTracingName(method);
      mCatalystInstance.callFunction(
          mModuleRegistration.getModuleId(),
          mModuleRegistration.getMethodId(method),
          Arguments.fromJavaArgs(args),
          tracingName);
      return null;
    }
  }

JavaScriptModule方法拦截invoke里调用了CatalystInstance的callFunction方法，主要传入了ModuleId、MethodId和Arguments这三个重要参数（tracingName忽略）。

public class CatalystInstanceImpl implements CatalystInstance {

   ...

    private final ReactBridge mBridge;

    void callFunction(
      final int moduleId,
      final int methodId,
      final NativeArray arguments,
      final String tracingName) {

    ...

    mReactQueueConfiguration.getJSQueueThread().runOnQueue(
        new Runnable() {
          @Override
          public void run() {

            ...

            try {  
             Assertions.assertNotNull(mBridge).callFunction(moduleId, methodId,arguments);
            } finally {
               ...
            }
          }
        });
  }

   ...

}

分析这里终于豁然开朗了，原来所有Java层向Javascript层的通信请求都是走的ReactBridge.callFunction。

又有了一个问题，Javascript层具体怎么知道Java层的调用信息呢？

还是之前举的餐馆吃饭的例子，顾客（Java）把菜名告诉餐馆（Bridge），餐馆再通知厨师（Javascript），厨师自然就知道该做什么菜了。当然前提是要约定一个菜单了，菜单包含所有的菜名。

还记得之前挖的一个坑吗？就是CatalystInstanceImpl中初始化ReactBridge的时候，所有JavaScriptModule信息都被以moduleID+methodID形式生成的JSON字符串预先存入了ReactBridge中，这其实就是一个菜单索引表了。餐馆（Bridge）知道了菜名（moduleID+methodID）就能告诉厨师（Javascript）顾客（Java）想吃什么了，当然有时还少不了不放辣这种需求了（arguments）。

所以callFunction中有了moduleId + methodId + arguments，就可以调用到Javascript中的实现了。

3、Bridge层实现

通信模型图中要调用WebKit的实现，少不了Bridge这个桥梁，因为Java是不能直接调用WebKit，但是如果Java通过JNI，JNI再调用WebKit不就OK了么？

继续前面说的ReactBridge的setGlobalVariable和callFunction方法。

public class ReactBridge extends Countable {
  static {
    SoLoader.loadLibrary(REACT_NATIVE_LIB);
  }

   public native void callFunction(int moduleId, int methodId, NativeArray arguments);

  public native void setGlobalVariable(String propertyName, String jsonEncodedArgument);
}

果然是JNI调用，而JNI层的入口是react/jni/OnLoad.cpp，和常规的javah规则不同，它是通过RegisterNatives方式注册的，JNI_OnLoad里面注册了setGlobalVariable和callFunction等native本地方法。

废话不多说，来看看c++中setGlobalVariable和callFunction的实现吧。

namespace bridge {

    static void setGlobalVariable(JNIEnv* env, jobject obj, jstring propName, jstring jsonValue) {
    auto bridge = extractRefPtr(env, obj);
    bridge->setGlobalVariable(fromJString(env, propName), fromJString(env, jsonValue));
  }

   static void callFunction(JNIEnv* env, jobject obj, JExecutorToken::jhybridobject jExecutorToken, jint moduleId, jint methodId,
                         NativeArray::jhybridobject args, jstring tracingName) {
   auto bridge = extractRefPtr(env, obj);
   auto arguments = cthis(wrap_alias(args));
   try {
      bridge->callFunction(
      cthis(wrap_alias(jExecutorToken))->getExecutorToken(wrap_alias(jExecutorToken)),
      folly::to<std::string>(moduleId),
      folly::to<std::string>(methodId),
      std::move(arguments->array),
      fromJString(env, tracingName)
    );
   } catch (...) {
     translatePendingCppExceptionToJavaException();
    }
  }

}

struct CountableBridge : Bridge, Countable {
  using Bridge::Bridge;
};

OnLoad只是一个调用入口，最终走的还是CountableBridge，而CountableBridge继承的是Bridge，只是加了一个计数功能。实现代码在react/Bridge.cpp中。

void Bridge::setGlobalVariable(const std::string& propName, const std::string& jsonValue) {
  runOnExecutorQueue(*m_mainExecutorToken, [=] (JSExecutor* executor) {
    executor->setGlobalVariable(propName, jsonValue);
  });
}
void Bridge::callFunction(
    ExecutorToken executorToken,
    const std::string& moduleId,
    const std::string& methodId,
    const folly::dynamic& arguments,
    const std::string& tracingName) {
  #ifdef WITH_FBSYSTRACE
  int systraceCookie = m_systraceCookie++;
  ...
  #endif

  #ifdef WITH_FBSYSTRACE
  runOnExecutorQueue(executorToken, [moduleId, methodId, arguments, tracingName, systraceCookie] (JSExecutor* executor) {
  ...
  #else
  runOnExecutorQueue(executorToken, [moduleId, methodId, arguments, tracingName] (JSExecutor* executor) {
  #endif
    executor->callFunction(moduleId, methodId, arguments);
  });
}

两个方法调用的过程差不多，都是塞进runOnExecutorQueue执行队列里面等待调用，回调都是走的JSExecutor，所以还是要看JSExecutor了。

这边提一下，Bridge类构造的时候会初始化ExecutorQueue，通过JSCExecutorFactory创建JSExecutor，而JSExecutor的真正实现类是JSCExecutor 。通过jni/react/JSCExecutor.h头文件能够验证这一点，此处略过不细讲。

绕来绕去，稍微有点晕，最后又跑到JSCExecutor.cpp里面了。

void JSCExecutor::setGlobalVariable(const std::string& propName, const std::string& jsonValue) {
  auto globalObject = JSContextGetGlobalObject(m_context);
  String jsPropertyName(propName.c_str());

  String jsValueJSON(jsonValue.c_str());
  auto valueToInject = JSValueMakeFromJSONString(m_context, jsValueJSON);

  JSObjectSetProperty(m_context, globalObject, jsPropertyName, valueToInject, 0, NULL);
}

finally哈，前面Java层构造的JavaScriptModule信息JSON串，终于在这里被处理了，不用想也知道肯定是解析后存为一张映射表，然后等callFunction的时候映射调用，接下来看callFunction的处理。

void JSCExecutor::callFunction(const std::string& moduleId, const std::string& methodId, const folly::dynamic& arguments) {
  // TODO:  Make this a first class function instead of evaling. #9317773
  std::vector call{
    moduleId,
    methodId,
    std::move(arguments),
  };
  std::string calls = executeJSCallWithJSC(m_context, "callFunctionReturnFlushedQueue", std::move(call));
  m_bridge->callNativeModules(*this, calls, true);
}
static std::string executeJSCallWithJSC(
    JSGlobalContextRef ctx,
    const std::string& methodName,
    const std::vector& arguments) {

  ...

  // Evaluate script with JSC
  folly::dynamic jsonArgs(arguments.begin(), arguments.end());
  auto js = folly::to(
      "__fbBatchedBridge.", methodName, ".apply(null, ",
      folly::toJson(jsonArgs), ")");
  auto result = evaluateScript(ctx, String(js.c_str()), nullptr);
  return Value(ctx, result).toJSONString();
}

callFunction里面执行的是executeJSCallWithJSC，而executeJSCallWithJSC里面将methodName和jsonArgs拼接成了一个apply的Javascript执行语句，最后调用jni/react/JSCHelpers.cpp的evaluateScript的来执行这个语句，完成Bridge向Javascript的调用。（JSCHelpers对WebKit的一些API做了封装，暂不深究，只要知道它负责最终调用WebKit就行了）

当然JSCExecutor::callFunction方法最后还有一个Bridge.cpp类的callNativeModules反向通信，意图是将Javascript语句执行结果通知回Native，这个过程留在以后的文章中慢慢研究，先行略过。

最后，总结一下Bridge层的调用过程： OnLoad.cpp->Bridge.cpp->JSCExecutor.cpp->JSCHelpers.cpp->WebKit。

4、Javascript层实现

与Javascript的通信，实质上是Weikit执行Javascript语句，调用流程是Bridge->WebKit->Javascript，WebKit中提供了许多与Javascript通信的API，比如evaluateScript、JSContextGetGlobalObject、JSObjectSetProperty等。

4.1、JavaScriptModule映射表

前面说过，所有JavaScriptModule信息是调用的setGlobalVariable方法生成一张映射表，这张映射表最终肯定是要保存在Javascript层的，回头仔细分析下jni/react/JSCExecutor.cpp的代码。

void JSCExecutor::setGlobalVariable(const std::string& propName, const std::string& jsonValue) {
  auto globalObject = JSContextGetGlobalObject(m_context);
  String jsPropertyName(propName.c_str());

  String jsValueJSON(jsonValue.c_str());
  auto valueToInject = JSValueMakeFromJSONString(m_context, jsValueJSON);

  JSObjectSetProperty(m_context, globalObject, jsPropertyName, valueToInject, 0, NULL);
}

JSContextGetGlobalObject是WeiKit的方法，其目的是获取Global全局对象，jsPropertyName方法字面意思就是Javascript对象的属性名，参数propName是从Java层传递过来的，在CatalystInstanceImpl.java类中可以印证这一点，具体值有两个：__fbBatchedBridgeConfig和__RCTProfileIsProfiling。

bridge.setGlobalVariable(
          "__fbBatchedBridgeConfig",
          buildModulesConfigJSONProperty(mJavaRegistry, jsModulesConfig));
      bridge.setGlobalVariable(
          "__RCTProfileIsProfiling",
          Systrace.isTracing(Systrace.TRACE_TAG_REACT_APPS) ? "true" : "false");

我们所关注的是__fbBatchedBridgeConfig，这个值被传递到刚刚说的JSCExecutor::setGlobalVariable生成jsPropertyName对象，而jsonValue同样被JSValueMakeFromJSONString处理成一个jsValue对象，这样一来property-value就全都有了。最后JSObjectSetProperty方法，顾名思义，就是设置属性，使用的是Global全局对象，如果翻译成Javascript代码，大概应该是这样：

global.__fbBatchedBridgeConfig = jsonValue;

或者

Object.defineProperty(global, '__fbBatchedBridgeConfig', { value: jsonValue});

作用其实是一样的。既然javascript接收到了关于JavaScriptModule的信息，那就要生成一张映射表了。

我们来看node_modules\react-native\Libraries\BatchedBridge\BatchedBridge.js的代码。

const MessageQueue = require('MessageQueue');

const BatchedBridge = new MessageQueue(
  __fbBatchedBridgeConfig.remoteModuleConfig,
  __fbBatchedBridgeConfig.localModulesConfig,
);

由于__fbBatchedBridgeConfig对象是被直接定义成Global全局对象的属性，就可以直接调用了，类似于window对象，__fbBatchedBridgeConfig对象里又有两个属性：remoteModuleConfig和localModulesConfig。

哪儿冒出来的呢？

有心的读者能猜到这两个属性都是定义在jsonValue里面的，为了验证这一点，我们再回头搜索下生成JSON串的地方，代码在CatalystInstanceImpl.java里面。

  private String buildModulesConfigJSONProperty(
      NativeModuleRegistry nativeModuleRegistry,
      JavaScriptModulesConfig jsModulesConfig) {
    JsonFactory jsonFactory = new JsonFactory();
    StringWriter writer = new StringWriter();
    try {
      JsonGenerator jg = jsonFactory.createGenerator(writer);
      jg.writeStartObject();
      jg.writeFieldName("remoteModuleConfig");
      nativeModuleRegistry.writeModuleDescriptions(jg);
      jg.writeFieldName("localModulesConfig");
      jsModulesConfig.writeModuleDescriptions(jg);
      jg.writeEndObject();
      jg.close();
    } catch (IOException ioe) {
      throw new RuntimeException("Unable to serialize JavaScript module declaration", ioe);
    }
    return writer.getBuffer().toString();
  }

这段代码分析过，localModulesConfig里面存的就是JavaScriptModule的信息，果然没错！

再来看刚刚的BatchedBridge.js

const MessageQueue = require('MessageQueue');

const BatchedBridge = new MessageQueue(
  __fbBatchedBridgeConfig.remoteModuleConfig,
  __fbBatchedBridgeConfig.localModulesConfig,
);

JavaScriptModule的信息，又被传入MessageQueue的构造函数里面了，继续往MessageQueue里面看，代码在node_modules\react-native\Libraries\Utilities\MessageQueue.js

class MessageQueue {

  constructor(remoteModules, localModules) {
    ...

    localModules && this._genLookupTables(
      this._genModulesConfig(localModules),this._moduleTable, this._methodTable
    );
}

localModules参数就是JavaScriptModule信息了，又被传进了_genLookupTables的方法里，同时还有两个参数_moduleTable、_methodTable，猜测一下，应该就是我们找的映射表了，一张module映射表，一张method映射表。

_genLookupTables(modulesConfig, moduleTable, methodTable) {
    modulesConfig.forEach((config, moduleID) => {
      this._genLookup(config, moduleID, moduleTable, methodTable);
    });
  }

  _genLookup(config, moduleID, moduleTable, methodTable) {
    if (!config) {
      return;
    }

    let moduleName, methods;
    if (moduleHasConstants(config)) {
      [moduleName, , methods] = config;
    } else {
      [moduleName, methods] = config;
    }

    moduleTable[moduleID] = moduleName;
    methodTable[moduleID] = Object.assign({}, methods);
  }

哈哈，和猜测的一样，生成了两张映射表，存放在了MessageQueue类里面。

4.2、callFunction的调用

回顾一下JSCExecutor.cpp中的最终callFunction调用过程。

void JSCExecutor::callFunction(const std::string& moduleId, const std::string& methodId, const folly::dynamic& arguments) {
  // TODO:  Make this a first class function instead of evaling. #9317773
  std::vector call{
    moduleId,
    methodId,
    std::move(arguments),
  };
  std::string calls = executeJSCallWithJSC(m_context, "callFunctionReturnFlushedQueue", std::move(call));
  m_bridge->callNativeModules(*this, calls, true);
}
static std::string executeJSCallWithJSC(
    JSGlobalContextRef ctx,
    const std::string& methodName,
    const std::vector& arguments) {

  ...

  // Evaluate script with JSC
  folly::dynamic jsonArgs(arguments.begin(), arguments.end());
  auto js = folly::to(
      "__fbBatchedBridge.", methodName, ".apply(null, ",
      folly::toJson(jsonArgs), ")");
  auto result = evaluateScript(ctx, String(js.c_str()), nullptr);
  return Value(ctx, result).toJSONString();
}

executeJSCallWithJSC中有个生成语句的代码，methodName的值为callFunctionReturnFlushedQueue，所以拼装成的Javascript语句是：

__fbBatchedBridge.callFunctionReturnFlushedQueue.apply(null, jsonArgs);

首先，在Javascript的运行环境下，当前作用域条件下__fbBatchedBridge能被直接调用，必须是Global全局对象的属性。与4.1中__fbBatchedBridgeConfig不同的是，jni并没有手动设置__fbBatchedBridge为全局对象的属性，那唯一的可能就是在Javascript里面通过Object.defineProperty来设置了。

搜索一下，在BatchedBridge.js中找到如下代码：

const MessageQueue = require('MessageQueue');

const BatchedBridge = new MessageQueue(
  __fbBatchedBridgeConfig.remoteModuleConfig,
  __fbBatchedBridgeConfig.localModulesConfig,
);

...

Object.defineProperty(global, '__fbBatchedBridge', { value: BatchedBridge });

module.exports = BatchedBridge;

这段代码等价于

global.__fbBatchedBridge = new MessageQueue(...args);

再次替换一下，callFuction调用的是：

MessageQueue.callFunctionReturnFlushedQueue.apply(null, jsonArgs);

Arguments参数再具体一下，就变成了：

MessageQueue.callFunctionReturnFlushedQueue.apply(null, module, method, args);

又回到MessageQueue.js了，前面才分析到它里面存放了两张映射表，现在第一件事当然是作匹配查找了，看MessageQueue.callFunctionReturnFlushedQueue的具体调用吧。

callFunctionReturnFlushedQueue(module, method, args) {
    guard(() => {
      this.__callFunction(module, method, args);
      this.__callImmediates();
    });

    return this.flushedQueue();
  }

var guard = (fn) => {
  try {
    fn();
  } catch (error) {
    ErrorUtils.reportFatalError(error);
  }
};

Lambda+闭包，代码很简洁，但阅读起来比较吃力，而React里面都是这种，强烈吐槽一下。

定义guard目的是为了统一捕获错误异常，忽略这一步，以上代码等价于：

callFunctionReturnFlushedQueue(module, method, args) {
    this.__callFunction(module, method, args);
    this.__callImmediates();
    return this.flushedQueue();
  }

this指的是当前MessageQueue 对象，所以找到MessageQueue.__callFunction方法:

__callFunction(module, method, args) {
    ...
    if (isFinite(module)) {
      method = this._methodTable[module][method];
      module = this._moduleTable[module];
    }
    ...
    var moduleMethods = this._callableModules[module];
    invariant(
      !!moduleMethods,
      'Module %s is not a registered callable module.',
      module
    );

    moduleMethods[method].apply(moduleMethods, args);
    ...
  }

这里就是通过moduleID和methodID来查询两张映射Table了，获取到了具体的moduleName和methodName，接着肯定要做调用Javascript对应组件了。

如果在餐馆吃饭的例子中，场景应该是这样的：顾客点完菜，餐馆服务人员也已经把菜名通知到厨师了，厨师该做菜了吧。等等，其中还漏了一步，就是这个厨师会不会做这道菜，如果让川菜师傅去做粤菜肯定是不行的，所以厨师的能力里还应该有一张技能清单，做菜前厨师需要判断下自己的技能单子里面有没有这道菜。

代码同理，MessageQueue里面有一个_callableModules数组，它就是用来存放哪些Javascript组件是可以被调用的，正常情况下_callableModules的数据和JavaScriptModules的数据（包括方法名和参数）理应是完全对应的。

我们来瞧瞧_callableModules数据初始化的过程，同样是在MessageQueue.js中：

registerCallableModule(name, methods) {
    this._callableModules[name] = methods;
}

所有的Javascript组件都是通过registerCallableModule来注册的，比如触摸事件RCTEventEmitter.java对应的组件RCTEventEmitter.js，代码路径是
node_modules\react-native\Libraries\BatchedBridge\BatchedBridgedModules\RCTEventEmitter.js

var BatchedBridge = require('BatchedBridge');
var ReactNativeEventEmitter = require('ReactNativeEventEmitter');

BatchedBridge.registerCallableModule(
  'RCTEventEmitter',
  ReactNativeEventEmitter
);

// Completely locally implemented - no native hooks.
module.exports = ReactNativeEventEmitter;

BatchedBridge可以看成是MessageQueue，被注册的组件是ReactNativeEventEmitter，代码位于node_modules\react-native\Libraries\ReactNative\ReactNativeEventEmitter.js

receiveEvent: function(tag: number, topLevelType: string, nativeEventParam: Object) {
    ...
},

receiveTouches: function(eventTopLevelType: string,  touches:Array, changedIndices: Array) {
   ...
}
 
  
仔细对照RCTEventEmitter .java比较，是不是完全一致，哈哈
 
  
public interface RCTEventEmitter extends JavaScriptModule {

  public void receiveEvent(int targetTag, String eventName,  WritableMap event);
  public void receiveTouches(String eventName, WritableArray touches, WritableArray changedIndices);

}
 
  
继续__callFunction方法代码的最后一步
 
  
moduleMethods[method].apply(moduleMethods, args)
 
  
如果以RCTEventEmitter的receiveTouches方法调用为例，具体语句应该是这样：
 
  
ReactNativeEventEmitter.receiveTouches.apply(moduleMethods, eventTopLevelType, touches, changedIndices);
 
  
结束！通信完成，大功告成！
 
  
5、总结
 
  
整个通信过程涉及到三种程序语言：Java、C++、Javascript，这还只是单向的通信流程，如果是逆向则更加复杂，由于篇幅的关系，留到以后的博客里面研究。
 
  
最后总结一下几个关键点:
 
  
1、Java层
 
  
JavaScriptModule接口类定义通信方法，在ReactApplicationContext创建的时候存入注册表类JavaScriptModuleRegistry中，同时通过动态代理生成代理实例，并在代理拦截类JavaScriptModuleInvocationHandler中统一处理发向Javascript的所有通信请求。
 
  
CatalystInstanceImpl类内部的ReactBridge具体实现与Javascript的通信请求，它是调用Bridge Jni 的出口。在ReactBridge被创建的时候会将JavaScriptModule信息表预先发给Javascript层用来生成映射表。
 
  
2、C++层
 
  
OnLoad是jni层的调用入口，注册了所有的native方法，其内部调用又都是通过CountableBridge来完成的，CountableBridge是Bridge的无实现子类，而在Bridge里面JSCExecutor才是真正的执行者。
 
  
JSCExecutor将所有来自Java层的通信请求封装成Javascript执行语句，交给WebKit内核完成向Javascript层的调用。
 
  
3、Javascript层
 
  
BatchedBridge是Javascript层的调用入口，而其又是MessageQueue的伪装者。MessageQueue预先注册了所有能够接收通信请求的组件_callableModules ，同时也保存着来自Java层JavaScriptModule的两张映射表。
 
  
接收通信请求时，先通过映射表确认具体请求信息，再确认Javascript组件是否可以被调用，最后通过apply方式完成执行。
 
  
整个通信过程流程如下图： 
 React-Native系列Android——Native与Javascript通信原理（一）_第1张图片
 
  
 
  
本博客不定期持续更新，欢迎关注和交流：
 
  
http://blog.csdn.net/megatronkings
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(React-Native)

        

            

                
    
                    
  • reactnative 获取定位_React-native实现定位的功能
                        weixin_39644915
reactnative获取定位
                        
    1、在React-native中实现定位的功能的几种方式。(1).使用rn中的自带的Geolocation实现定位。(2).用第三放库react-native-location实现定位。2.用rn中自带的Geolocation实现定位的详细步骤：(1).如果是android进行定位手下是需要权限的通过以下代码设置权限：(2).直接通过navigator.geolocation来进行定位，示例代码如
    
                    
    • 
                    
  • native react 集成微信登录_微信SDK集成示例 – react-native-wechat-ios
                        weixin_39682477
nativereact集成微信登录
                        
    react-native-wechat-ios微信SDK集成示例，现已完成微信认证登录，分享链接，支付功能。(本模块仅支持iOS，点我获取Android支持)如何安装1.下载包文件$npmireact-native-wechat-ios2.链接库文件到你的项目中a.给RCTWeChat添加头文件搜索路径：$(SRCROOT)/../../react-native/React，并选择recursiv
    
                    
    • 
                    
  • react-native mac 开发环境搭建Android SDK版本N/A问题，已解决
                        aaaaanqi
reactnative
                        
    react-nativemac开发环境搭建AndroidSDK版本N/A问题，已解决使用npxreact-nativedoctor校验开发环境，AndroidSDK报错但是开发环境配置和文档描述得没有什么差别，怀疑是bug，git仓库下的issue有提类似问题，直接使用npmrunandroid运行，报以下错>Failedtoapplyplugin'com.android.internal.app
    
                    
    • 
                    
  • React-native 桥接Android原生开发
                        一天清晨

                        
    在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一.1.png开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块.首先注册模块其意义在与将类注册到RN中,才能用JS去调用publicclassAnExam
    
                    
    • 
                    
  • react-native中 不要将ScrollView 组件 和 FlatList 组件嵌套使用
                        希望的模样
reactnativereact.jsreactnative
                        
    问题：接手了一个rn项目，真机上测试发现一个bug：商品列表页，上拉加载更多商品，加载了二十多个商品，屏幕滑动就开始出现明显的顿挫感，android出现商品图加载异常，ios还偶尔会出现闪退。直接定位到这个商品列表，发现使用的是FlatList组件，一个列表懒加载组件，检查了下，没发现问题，然后纵观整个页面，这个页面并不仅仅只有这一个列表，上面依次还有兑换区，签到区，搜索区，然后最外层包了一个Sc
    
                    
    • 
                    
  • react-native-share的使用
                        孟宪磊mxl
reactnative前端
                        
    react-native-share是用于社交分享的一个库接下来介绍一下他的使用和出现的问题npmireact-native-share如果安装后出现项目无法启动，报错：/Users/landsky/Desktop/xcodeworkspace/react-native/landsk2/node_modules/react-native-share/android/src/main/java/cl
    
                    
    • 
                    
  • react- native创建pdf
                        孟宪磊mxl
react.jspdf前端reactnative
                        
    npmireact-native-html-to-pdf向AndroidManifest.xml添加以下WRITE_EXTERNAL_STORAGE权限：使用：importReact,{Component}from'react';import{Text,TouchableHighlight,View,}from'react-native';importRNHTMLtoPDFfrom'react-n
    
                    
    • 
                    
  • react-native使用第三方库以及引入react-native-elements(十二)
                        Museions
ReactNative开发react-nativeJSX
                        
    react-native使用第三方库以及引入react-native-elements1.首先需要下载依赖包到本地cd/projectyarnaddreact-native-elements#orwithnpmnpminstallreact-native-elements2.引入react-native-elements到项目的component中User.js以头像组件为例：import{Ava
    
                    
    • 
                    
  • React-Native优质开源项目
                        换个网名有点难
reactnative
                        
    ReactNative是一个由Facebook开发的开源框架，允许开发者使用JavaScript和React来构建原生移动应用。它允许开发者编写一次代码，然后可以在iOS和Android平台上运行，而无需为每个平台单独编写代码。以下是ReactNative的一些关键特点和优势：跨平台开发：使用ReactNative，开发者可以为iOS和Android创建应用，而不需要分别学习Swift或Java/
    
                    
    • 
                    
  • iOS react-native-yunpeng-alipay 与 UMeng 发生冲突的解决方案
                        笙笙哥

                        
    报错：UTDID方法重复无论是在集成react-native的支付宝SDK，还是react-native的支付宝SDK，都有可能碰到与友盟SDK发生冲突的情况。具体错误是：duplicatexxxclass.oinxxxfile...可以看到路径是与UTDID相关，基本可以判断是支付宝和友盟发生了冲突。这种情况只需要去支付宝官网下载，不包含UTDID模块的SDK，集成到项目中，就不会发生该冲突了。
    
                    
    • 
                    
  • 【RN】开发第一个react-native程序
                        ZSK6
ReactNative前端reactnative
                        
    简言ReactNative是一个使用React和应用平台的原生功能来构建Android和iOS应用的开源框架。通过ReactNative，您可以使用JavaScript来访问移动平台的API，以及使用React组件来描述UI的外观和行为：一系列可重用、可嵌套的代码。记录下，开发一个react-native程序的步骤。搭建开发环境搭建开发环境官方地址这里搭建的是androidapp开发环境。整体来说
    
                    
    • 
                    
  • Expo Router + Supabase使用流程
                        懒编程-二两

                        
    unsetunset前言unsetunsetExpo是一个React-native生态中的一个工具包，提供了非常多的功能，ExpoRouter是Expo最近推出的功能，其效果类似于Nextjs的router，可以基于目录结构来实现路由。Supabase是一个开源的postgres数据库，还带有用户体系功能，可以快速实现login、register这些功能。我将记录一下，我使用这2个工具，构建基础基
    
                    
    • 
                    
  • React-Native热更新 - 3分钟教你实现
                        kikiki1

                        
    哈哈，今天是大猪在写的第一篇文章,步入正题，此文使用当前最新版本的RN与Code-Push进行演示，其中的参数不会过多进行详细解释，更多参数解释可参考其它文章，这里只保证APP能正常进行热更新操作，方便快速入门，跟着大猪一起来快活吧。操作指南以下操作在Mac系统上完成的，毕竟大猪工作多年之后终于买得起一个Mac了。创建React-Native项目react-nativeinitdounineApp
    
                    
    • 
                    
  • react-native NetInfo获取网络状态不正确
                        小小小小的人头

                        
    最近在开发一个判断网络状态的功能。在APP断网后重新打开网络。获取到的网络状态依旧是断网状态。。才发现里面的坑；解决办法--重新对这个方法进行封装一下；有需要的小伙伴直接复制就可以了staticasyncgetConnectionInfo(){if(Platform.OS==='ios'){returnnewPromise((resolve,reject)=>{constconnectionHan
    
                    
    • 
                    
  • React18原理: 核心包结构与两大工作循环
                        Wang's Blog
ReactReactNativereact.js前端前端框架
                        
    React核心包结构1)reactreact基础包，只提供定义react组件(ReactElement)的必要函数一般来说需要和渲染器(react-dom,react-native)一同使用在编写react应用的代码时,大部分都是调用此包的api比如,我们定义组件的时候，就是它提供的classDemoextendsReact.Component{render(){returnHello}}2)re
    
                    
    • 
                    
  • vscode中一键生成react代码块以及快速补全react代码
                        前端驿站

                        
    1.vscode扩展搜索ES7React/Redux/GraphQL/React-Nativesnippetsd或者React-Native/React/Reduxsnippetsfores6/es7并安装（如果安装后者直接cccs可以一键生成模板块安装前者步骤如下）2、安装后在组件中执行rcc即可生产有状态的组件3、执行rfc即可生产无状态组件自动补充代码1、打开首选项设置2、在搜索框中输入em
    
                    
    • 
                    
  • react-native 配置启动图支持ios和android
                        青青子子子

                        
    配置启动图我使用的是第三方模块react-native-splash-screen,更加详细的请到github地址进一步查看，我们这里提供基本的配置以及个别问题的解决方案当前环境OS:macOSHighSierra10.13.5Node:8.11.3Yarn:1.7.0npm:5.6.0Watchman:4.9.0Xcode:Xcode9.4.1react:16.3.1=>16.3.1react-
    
                    
    • 
                    
  • 小程序 – 笔记
                        Kotyo

                        
    前言最近有在做小程序相关的内容，小程序是微信自己开发的一套标准。但是里面是兼容ES6语法的，因为之前有去学习React-Native的相关内容，所以就又去了解了ES6的相关内容。貌似有点跑题了。话说回来，小程序是比React-Native简单的。可能没有写过前段代码的同学，不太习惯这种写法。先上图这里我在网上找了相关接口，做了一个类似内涵段子客户端的小程序。大致的目录结构是这样的这里说一下注意的点
    
                    
    • 
                    
  • 2018-11-14 上拉加载 下拉翻页加载
                        z芝麻

                        
    importReact,{Component}from"react";import{StyleSheet,Text,View}from"react-native";importRefreshListView,{RefreshState}from"react-native-refresh-list-view";exportdefaultclassApp1extendsComponent{/***初始
    
                    
    • 
                    
  • React-Native与安卓原生的混合开发
                        heyrenly

                        
    写在前面目前很多大厂APP（如淘宝、饿了么、美团等等）并不是纯原生Android&IOS，也不是纯JS开发，而是HybirdAPP开发，混合型优势很多：比如热更新，保证在一些类似双十一的活动到来时能够快速上线活动页面，用户不必再去更新APP。再来有效地减小了安装包的体积大小，大部分的界面都位于服务器端，本地只需要进行绘制。1.新建Android项目我这里使用之前的项目rn012.在项目根目录引入R
    
                    
    • 
                    
  • 2019-02-22 react-native echarts android 打包 不显示
                        Mylovesunshine

                        
    https://blog.csdn.net/fivestar2009/article/details/83750062今天对echarts进行打包，遇到几个问题1）怎么打包apk，都是unsingle模式，而且安装失败原因是buildTypes中没有加signingConfigsigningConfigs.release2）安装后居然echarts不显示，但是在模拟器中是显示的，也是从网上找的2.
    
                    
    • 
                    
  • 2022-03-16 React基础
                        null_7d53

                        
    第一个React程序函数式组件//引入react核心importReactfrom'react'//引入react对dom操作的核心，相对于react-native而言的importReactDOMfrom'react-dom'//定义一个函数式组件constapp=(props)=>还原进入{props.name}的世界//点用渲染方法ReactDOM.render(,//第一个参数为el组件d
    
                    
    • 
                    
  • react-native 插件总结
                        sybil052

                        
    react-native-linear-gradient颜色渐变处理react-native-login视频界面登录react-native-keyboard-aware-scroll-view键盘显示处理react-native-popup-dialog弹窗react-native-dropdownalert一种非常漂亮的alert弹窗方式，从状态栏往下弹窗；react-native-simpl
    
                    
    • 
                    
  • React-Native之Navigator
                        武昌鱼艾特222

                        
    Navigator简介处理应用程序中不同场景之间的转换。Navigator是跨平台的导航组件，不管在iOS还是Android系统下都能使用。Navigator默认没有包含导航栏，我们可以实现一个自定义导航栏，也可以使用NavigatorBar组件来实现。Navigator安装从0.44版本开始，Navigator被从reactnative的核心组件库中剥离到了一个名为react-native-de
    
                    
    • 
                    
  • 2019-03-27
                        浮生若茶_ooh

                        
    一些react-native常用小组件：react-native-actionsheet-----底部向上的选择框RCTDeviceEventEmitter-----RCTDeviceEventEmitter发送通知emit和监听接收addListenerjpush-react-native------集成极光推送react-native-bluetooth-status---蓝牙开关状态reac
    
                    
    • 
                    
  • loading dependency graph done.
                        war_ttccll

                        
    初始化项目出错react-nativeinitproject1添加文件index.android.js,文件内容如下/***SampleReactNativeApp*https://github.com/facebook/react-native*@flow*/importReact,{Component}from'react';import{AppRegistry,}from'react-nat
    
                    
    • 
                    
  • react-native menuModal (more & simple)
                        Nur__

                        
    QQ20190627-205936-HD.gifQQ20190627-205716-HD.gifQQ20190627-205900-HD.gif使用方式:{console.log(`item:${item}\nindex:${index}`);}}data={[{text:'tableName'}]}requestClose={()=>this.setState({visible:false})}
    
                    
    • 
                    
  • React-Native WebView 测量网页高度
                        keyuan0214

                        
    React-Native（后面简称RN）在展示某些静态也页面的时候，可能需要使用WebView，WebView可以请求一个网页地址，也可以异步请求HTML文本。一般情况下我们要得到网页的宽高，传回给RN以便准确设置WebView展示宽高原文地址（转载需注明出处）大致步骤使用WebView的injectedJavaScript属性注入JS代码，进行测量网页的宽高设置WebView的宽高PS：是不是很
    
                    
    • 
                    
  • ReactNative实现一个圆环进度条
                        xvzhengyang
前端ReactNativereactnative前端框架
                        
    我们直接看效果，如下图我们在直接上代码/***圆形进度条*/importReact,{useState,useEffect}from'react';importSvg,{Circle,G,LinearGradient,Stop,Defs,Text,}from'react-native-svg';import{View,StyleSheet}from'react-native';//渐变色const
    
                    
    • 
                    
  • Airbnb放弃react-native博客译文（一）
                        莫寂岚

                        
    原文链接：https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1cThisisthefirstinaseriesofblogpostsinwhichweoutlineourexperiencewithReactNativeandwhatisnextformobileatAirbnb.WhenAirbnblau
    
                    
    • 
                                
  • jsonp 常用util方法
                                    hw1287789687
jsonpjsonp常用方法jsonp callback
                                    
    jsonp 常用java方法 
(1)以jsonp的形式返回:函数名(json字符串) 
/***
	 * 用于jsonp调用
	 * @param map : 用于构造json数据
	 * @param callback : 回调的javascript方法名
	 * @param filters : <code>SimpleBeanPropertyFilter theFilt
    
                                
    • 
                                
  • 多线程场景
                                    alafqq
多线程
                                    
    0 
能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 
对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ 
Java多线程 
2012年11月23日 15:41 Young9007 Young9007 
4 
0 0 4 
 
Comment添加评论关注(2) 
3个答案 按时间排序 按投票排序 
 
0 
0 
最典型的如： 
1、
    
                                
    • 
                                
  • Maven学习——修改Maven的本地仓库路径
                                    Kai_Ge
maven
                                    
          安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。 
  
 
    
                                
    • 
                                
  • placeholder的浏览器兼容
                                    120153216
placeholder
                                    
    【前言】 
自从html5引入placeholder后，问题就来了， 
不支持html5的浏览器也先有这样的效果， 
各种兼容，之前考虑，今天测试人员逮住不放， 
想了个解决办法，看样子还行，记录一下。 
  
【原理】 
不使用placeholder，而是模拟placeholder的效果， 
大概就是用focus和focusout效果。 
  
【代码】 
<scrip
    
                                
    • 
                                
  • debian_用iso文件创建本地apt源
                                    2002wmj
Debian
                                    
    1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下

2.创建N个挂载点目录  
如下： 
debian:~#mkdir –r /media/dvd1 
debian:~#mkdir –r /media/dvd2 
debian:~#mkdir –r /media/dvd3 
…. 
debian:~#mkdir –r /media
    
                                
    • 
                                
  • SQLSERVER耗时最长的SQL
                                    357029540
SQL Server
                                    
    对于DBA来说，经常要知道存储过程的某些信息： 
 
1.   执行了多少次 
 
2.   执行的执行计划如何 
 
3.   执行的平均读写如何 
 
4.   执行平均需要多少时间 
 
列名          &
    
                                
    • 
                                
  • com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil
                                    7454103
eclipse
                                    
    今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下： 
 
错误提示信息： 
 
An error has occurred.See error log for more details. 
Reason: 
com/genuitec/
    
                                
    • 
                                
  • 用正则删除文本中的html标签
                                    adminjun
javahtml正则表达式去掉html标签
                                    
    使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。 
如下： 
public static String Html2Text(String inputString) {  
String htmlStr = inputString; // 含html标签的字符串
  String textSt
    
                                
    • 
                                
  • 嵌入式系统设计中常用总线和接口
                                    aijuans
linux 基础
                                    
                   嵌入式系统设计中常用总线和接口 
  
        任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
    
                                
    • 
                                
  • Java函数调用方式——按值传递
                                    ayaoxinchao
java按值传递对象基础数据类型
                                    
    Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。 
  
首先，让我们看一看基础数据类型是如何按值传递的。 
  
public static void main(String[] args) {
		
	int a = 2;

    
                                
    • 
                                
  • ios音量线性下降
                                    bewithme
ios音量
                                    
    直接上代码吧 
  
//second 几秒内下降为0
- (void)reduceVolume:(int)second {
    KGVoicePlayer *player = [KGVoicePlayer defaultPlayer];
    
    if (!_flag) {
        _tempVolume = player.volume;
       
    
                                
    • 
                                
  • 与其怨它不如爱它
                                    bijian1013
选择理想职业规划
                                    
            抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。 
        一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。 
  
    
                                
    • 
                                
  • 一边时间不够用一边浪费时间
                                    bingyingao
工作时间浪费
                                    
    一方面感觉时间严重不够用，另一方面又在不停的浪费时间。 
 
每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。 
精神还是很差，下午像一直野鬼在城市里晃荡。 
 
 
为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。 
控制让自己周末早睡早起，你就成功了一半。 
 
有多少个工作
    
                                
    • 
                                
  • 【Scala八】Scala核心二：隐式转换
                                    bit1129
scala
                                    
    Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
    
                                
    • 
                                
  • sudoku slover in Haskell (2)
                                    bookjovi
haskellsudoku
                                    
    继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。 
  
board = [0,3,4,1,7,0,5,0,0,
         0,6,0,0,0,8,3,0,1,
         7,0,0,3,0,0,0,0,6,
         5,0,0,6,4,0,8,0,7,

    
                                
    • 
                                
  • Java-Collections Framework学习与总结-HashSet和LinkedHashSet
                                    BrokenDreams
linkedhashset
                                    
            本篇总结一下两个常用的集合类HashSet和LinkedHashSet。 
        它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-备忘录模式-Memento
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 

import java.util.ArrayList;
import java.util.List;



/*
 * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”

    
                                
    • 
                                
  • 《RAW格式照片处理专业技法》笔记
                                    cherishLC
PS
                                    
    注意，这不是教程！仅记录楼主之前不太了解的 
 
 一、色彩（空间）管理 
作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼） 
注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
    
                                
    • 
                                
  • 使用 Git 下载 Spring 源码 编译 for Eclipse
                                    crabdave
eclipse
                                    
    使用 Git 下载 Spring 源码 编译 for Eclipse 
  
1、安装gradle，下载 http://www.gradle.org/downloads 
配置环境变量GRADLE_HOME，配置PATH  %GRADLE_HOME%/bin，cmd，gradle -v 
  
2、spring4 用jdk8 下载 https://jdk8.java.
    
                                
    • 
                                
  • mysql连接拒绝问题
                                    daizj
mysql登录权限
                                    
    mysql中在其它机器连接mysql服务器时报错问题汇总 
 
一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p   //带-p参数，在下一步进行密码输入 
Enter password:    //无字符串输入 
ERROR 1045 (28000): Access 
    
                                
    • 
                                
  • Google Chrome 为何打压 H.264
                                    dsjt
applehtml5chromeGoogle
                                    
    Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 
 
Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
    
                                
    • 
                                
  • yii 获取控制器名 和方法名
                                    dcj3sjt126com
yiiframework
                                    
    1. 获取控制器名 
在控制器中获取控制器名:  $name = $this->getId(); 
在视图中获取控制器名:    $name = Yii::app()->controller->id;  
  
2. 获取动作名  
在控制器beforeAction()回调函数中获取动作名:  $name = 
    
                                
    • 
                                
  • Android知识总结（二）
                                    come_for_dream
android
                                    
    明天要考试了，速速总结如下 
  
1、Activity的启动模式 
       standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。） 
       singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
    
                                
    • 
                                
  • 高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元
                                    gcq511120594
工作项目管理
                                    
    高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！ 
首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
    
                                
    • 
                                
  • linux expect
                                    heipark
expect
                                    
    1. 创建、编辑文件go.sh 
  
#!/usr/bin/expect

spawn sudo su admin

expect  "*password*" { send "13456\r\n" }

interact  
   2. 设置权限 
   chmod u+x go.sh   3.
    
                                
    • 
                                
  • Spring4.1新特性——静态资源处理增强
                                    jinnianshilongnian
spring 4.1
                                    
    目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T
    
                                
    • 
                                
  • idea ubuntuxia 乱码
                                    liyonghui160com

                                    
        
1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。 
2.在ubuntu 下可以执行下面操作安装该字体： 
sudo mkdir /usr/share/fonts/truetype/simsun
sudo cp simsun.ttf  /usr/share/fonts/truetype/simsun
fc-cache -f -v 

    
                                
    • 
                                
  • 改良程序的11技巧
                                    pda158
技巧
                                    
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。 
  
让我们看一些基本的编程技巧： 
  
 
 尽量保持方法简短 
 永远永远不要把同一个变量用于多个不同的
    
                                
    • 
                                
  • 300个涵盖IT各方面的免费资源（下）——工作与学习篇
                                    shoothao
创业免费资源学习课程远程工作
                                    
    工作与生产效率: 
  
 
 A. 背景声音 
 
 
  Noisli:背景噪音与颜色生成器。 
  Noizio:环境声均衡器。 
  Defonic:世界上任何的声响都可混合成美丽的旋律。 
  Designers.mx:设计者为设计者所准备的播放列表。 
  Coffitivity:这里的声音就像咖啡馆里放的一样。 
 
 
 B. 避免注意力分散 
 
 
  Self Co
    
                                
    • 
                                
  • 深入浅出RPC
                                    uule
rpc
                                    
    深入浅出RPC-浅出篇 
深入浅出RPC-深入篇 
  
RPC 
Remote Procedure Call Protocol 
远程过程调用协议 
  
它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发
    
                                
    •