58fair 动态化界面逻辑JavaScriptCore js对象的创建与释放
站长
· 阅读数 40
本文研究58fair 动态化界面逻辑js JavascriptCore对象的创建与释放
页面js
一个Fair动态化界面的逻辑js文件实例为：
GLOBAL['test1#1'] = (function(__initProps__) {
const __global__ = this;
return runCallback(function(__mod__) { //runCallback 在fair_jsbase.js中定义
with(__mod__.imports) {
function _Test5NetPluginState() {
const inner = _Test5NetPluginState.__inner__;
if (this == __global__) {
return new _Test5NetPluginState({
__args__: arguments
});
} else {
const args = arguments.length > 0 ? arguments[0].__args__ || arguments : [];
inner.apply(this, args);
_Test5NetPluginState.prototype.ctor.apply(this, args);
return this;
}
}
_Test5NetPluginState.__inner__ = function inner() {
this._page = 0;
};
_Test5NetPluginState.prototype = {
requestData: function requestData() {
const __thiz__ = this;
with(__thiz__) {
_page++;
FairNet.requestData({
method: 'GET',
url: 'https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/3be6c61070d3b48c8165af5d18464c0e_hotel_list_data.json',
data: convertObjectLiteralToSetOrMap({
['page']: _page,
['pageName']: 'test1#1',
}),
success: function dummy(resp) {
if (resp == null) {
return null;
}
let data = resp.__op_idx__('data');
setState('test1#1', function dummy() {});
}
});
}
},
};
_Test5NetPluginState.prototype.ctor = function() {};;
return _Test5NetPluginState();
}
}, []);
})(convertObjectLiteralToSetOrMap(JSON.parse('{}')));
其中runCallback方法在全局js fair_base.js中定义：
function runCallback(func, deps) { //
const imports = {};
const __global__ = this;
deps.map((d) =>
typeof d == "number"
? runModule(d, { exports: imports })
: runModule(d[0], { exports: imports }, d[1])
);
return func.call(__global__, { imports });
}
分析如上jsScript如下：
GLOBAL['test1#1'] = (function(__initProps__) {...})(convertObjectLiteralToSetOrMap(JSON.parse('{}')));：这行代码定义了一个全局函数test1#1，该函数的实现是一个自执行的函数。这个自执行的函数接受一个参数__initProps__，但在这个代码段中，它的值被设置为一个空对象。接下来，这个函数内部使用了一个名为runCallback的函数，该函数是从fair_jsbase.js中导入的。runCallback函数的目的是运行给定的函数func，并且可以传递一些依赖项。它创建了一个名为imports的空对象，并且将当前的全局对象__global__存储在__global__变量中。然后，它循环处理依赖项（在这里没有提供详细信息），对于每个依赖项，它可能会运行模块并将其输出存储在imports中。- 在
runCallback函数的最后，它通过调用func.call(__global__, { imports })来运行传入的函数func，并且传递了一个包含imports对象的参数。 - 在这个特定的代码片段中，传给
runCallback的函数是一个大函数，它定义了一个名为_Test5NetPluginState的构造函数和一些方法。这个构造函数似乎用于创建一个对象，该对象可以执行一些网络请求和操作。
总结：这段 JavaScript 代码创建了一个全局函数 test1#1，这个函数的实现是一个自执行的函数，它使用 runCallback 函数来处理依赖项并运行给定的函数。在这个特定的示例中，给定的函数定义了一个构造函数 _Test5NetPluginState 和一些方法，用于执行网络请求等操作。
全局基础通用js
{
"coreJs": {
"fair_core": "packages/fair/assets/fair_core/fair_core.js",
"fair_jsbase": "packages/fair/assets/fair_core/fair_jsbase.js",
"fair_common_plugin": "packages/fair/assets/fair_core/fair_common_plugin.js"
}
}
其他可能添加的通用插件js：
{
"plugin": {
}
}
fair_image_picker.js
fair_log_plugin.js
fair_navigator_plugin.js
fair_net_plugin.js
fair_permission.js
fair_toast_plugin.js
fair_url_launcher_plugin.js
全局js文件是在FairApp即FairWidget顶层Widget中，FairApp初始化静态方法runApplication中调用：
Runtime().loadCoreJs(package: package, jsPlugins: jsPlugins, baseJsSources: baseJsSources).then((value) => runApp(app));
- fair_home.json
- fair_basic_config.json
- 以及FairApp 的runApplication方法的jsPlugins参数
- baseJsSources 参数
这4个地方定义JS文件，文件读取为字符串拼装成一个大jsSource内容，所有基础的全局js方法都在这里加载了：
map[FairMessage.PATH] = baseJsSource + ' ; ' + pluginJsSource;
map[FairMessage.PAGE_NAME] = 'loadCoreJs';
return _channel!.loadJS(jsonEncode(map), null);
调用channel：_methodChannel!.invokeMethod('loadMainJs', args);
对应的native执行为：
// 异步注入到JSContext里
[[FairJSBridge sharedInstance] evaluateScriptWithJSScriptAsync:JSScript callback:callback];
JSValue *jsValue = [self.context evaluateScript:jsScript];
FairWidget展示时候：注入页面js
在FairWidget state的didChangeDependencies 中调用：
_mFairApp.runtime.addScript(state2key, resolveJS, widget.data)：
var map = <dynamic, dynamic>{};
map[FairMessage.PATH] = scriptSource;
map[FairMessage.PAGE_NAME] = pageName;
return _channel!.loadJS(jsonEncode(map), null);
对应跳转到Native执行注入JS：
- (JSValue *)evaluateScript:(NSString *)jsScript callback:(FairCallback)callback
{
JSValue *jsValue = [self.context evaluateScript:jsScript]; //GLOBAL['test1#1']=(函数)(json对象)
if (callback) {
callback(jsValue, nil);
}
return jsValue;
}
FairWidget页面关闭时候释放 JS：
在 FairState的dispose方法中释放资源：
runtime.release(key);
调用release：
void dispose() {
_fairApp?.unregister(this);
delegate.dispose();
super.dispose();
}
_fairApp?.unregister(this);中调用 runtime.release(key);
void unregister(FairState state) {
var key = state.state2key;
_mFairHandler.unregister(state);
log('unregister state: $key');
bindData.remove(key)?.clear();
runtime.release(key);
}
runtime.release(key);实现为：
@override
void release(String? pageName) {
var map = <dynamic, dynamic>{};
map[FairMessage.FUNC_NAME] = FairMessage.RELEASE_JS; //releaseJS
var msg = FairMessage(pageName, FairMessage.METHOD, map);
_channel?.release(jsonEncode(msg.from()), null);
}
_channel?.release(jsonEncode(msg.from()), null); 实现为：
Future<dynamic> release(String args, VoidMsgCallback? callback) {
return _methodChannel!.invokeMethod('releaseMainJs', args);
}
调用delegate.dispose
class FairDelegate extends RuntimeFairDelegate
RuntimeFairDelegate{
void dispose() {
runtime?.invokeMethod(pageName, 'onUnload', null);
}
}
对应的channel通道交互为：
Future<String> invokeMethod(String pageName, String funcName, List<dynamic>? parameters) async {
var map = <dynamic, dynamic>{};
map[FairMessage.FUNC_NAME] = funcName;
map[FairMessage.ARGS] = parameters;
var msg = FairMessage(pageName, FairMessage.METHOD, map);
var from = msg.from();
var reply = _channel!.sendCommonMessage(jsonEncode(from));
return await reply ?? '';
}
即 有FairState 的 dispose 中的调用：
void dispose() {
_fairApp?.unregister(this); // 执行 releaseJS :js_core.js中定义的方法，GLOBAL全局对象是在这个文件中定义的
delegate.dispose();//执行 onUnloadjs方法（onUnload是 FairPatch注解的Fair动态界面中实现的onLoad，通过fair的编译器dart2js处理的onLoad方法）
super.dispose();
}
分别触发两个js 方法通过channel调用到native：
方法名：invokeJSFunc
方法参数分别为：
{"pageName":"page1#2","type":"method","args":{"funcName":"releaseJS"}}
和
{"pageName":"page1#2","type":"method","args":{"funcName":"onUnload","args":null}}
fair_core.js实现为：
let GLOBAL = {}; //GLOBAL 是一个全局对象
function invokeJSFunc(parameter) {
if (parameter === null) {
return null;
}
let map = JSON.parse(parameter);
if ('method' === map['type']) {
return _invokeMethod(map);
} else if ('variable' === map['type']) {
return _invokeVariable(map);
}
return null;
}
所有的js方法都是走invokeJSFunc
function _invokeMethod(par) {
let pageName = par['pageName'];
let funcName = par['args']['funcName'];
let args = par['args']['args'];
if ('getAllJSBindData' === funcName) {
return getAllJSBindData(par);
}
if ('releaseJS' === funcName) {
return _release(par);
}
let mClass = GLOBAL[pageName];
let func = mClass[funcName];
let methodResult;
if (isNull(func)) {
methodResult = '';
} else {
methodResult = func.apply(mClass, args);
}
let result = {
pageName: pageName,
result: {
result: methodResult
}
};
return JSON.stringify(result);
}
如果参数中的 funcName是releaseJS 则调用_release方法：
function _release(par) {
let pageName = par['pageName'];
GLOBAL[pageName] = null;
return null;
}
对应的native实现：
FairWeakSelf(weakSelf);
[self.flutterMethodChannel setMethodCallHandler:^(FlutterMethodCall *call, FlutterReply callback) { FairStrongObject(strongSelf, weakSelf); // 获取字典数据 NSString *method = call.method; FairDartModel *model = [strongSelf obtainModelWithMessage:call.arguments];
// 加载js
if ([method isEqualToString:@"loadMainJs"]) {
//省略
}
// 释放js
else if ([method isEqualToString:@"releaseMainJs"]) {
if ([strongSelf.delegate respondsToSelector:@selector(disposePage:)] && FAIR_IS_NOT_EMPTY_STRING(model.pageName)) {
[strongSelf.delegate disposePage:model.pageName];
}
}
}];
JS注入与释放
通过以上流程分析，因为在调用_methodChannel!.invokeMethod('releaseMainJs', args);
iOS端native的实现没有对args参数进行解析，只是调用 [strongSelf.delegate disposePage:model.pageName];即:
- (void)disposePage:(NSString *)pageName
{
if (FAIR_IS_NOT_EMPTY_STRING(pageName)) {
self.context[pageName] = nil;
}
}
通过Safari对JSContext的调试，添加监视表达式：
通过多次进入几个页面，在fair动态界面push fair动态界面，然后回到主页， 查看GLOBAL全局对象值：
/fair/lib/src/runtime/runtime_fair_delegate.dart
所以可以修改一下FairDartBridge.m代码 setDartListener 的实现：
// 用来监听dart对native的调用
- (void)setDartListener {
// 注入js
FairWeakSelf(weakSelf);
[self.flutterMethodChannel setMethodCallHandler:^(FlutterMethodCall *call, FlutterReply callback) { FairStrongObject(strongSelf, weakSelf); // 获取字典数据 NSString *method = call.method; FairDartModel *model = [strongSelf obtainModelWithMessage:call.arguments];
// 加载js
if ([method isEqualToString:@"loadMainJs"]) {
//省略
}
// 释放js
else if ([method isEqualToString:@"releaseMainJs"]) {
if ([strongSelf.delegate respondsToSelector:@selector(disposePage:)] && FAIR_IS_NOT_EMPTY_STRING(model.pageName)) {
[strongSelf.delegate disposePage:model.pageName];
}
//新添加，解析参数执行js方法:{"pageName":"page1#2","type":"method","args":{"funcName":"releaseJS"}}
if (strongSelf.delegate && [weakSelf.delegate respondsToSelector:@selector(executeJSFunctionAsync:params:callback:)]) {
NSString *message = call.arguments;
NSArray *params = message && [message isKindOfClass:[NSString class]] ? @[message] : @[];
[strongSelf.delegate executeJSFunctionAsync:FairExecuteJSFunction params:params callback:^(id result, NSError *error) { FairLog(@"%@", result); JSValue *value = result; if (value && [value isKindOfClass:[JSValue class]]) {
NSString *str = value.toString;
FairLog(@"%@", str);
if (![str isEqualToString:@"undefined"] && FAIR_IS_NOT_EMPTY_STRING(str)) {
callback(str);
}
}
}];
}
}
}];
}
但是这样会导致后续的onUnload方法已经被 GLOBAL 清空了无法调用少了逻辑。所以naitve不变，在dart侧做修改：
修改/fair/lib/src/runtime/runtime_fair_delegate.dart 代码实现:
void dispose() {
runtime?.invokeMethod(pageName, 'onUnload', null);//先调用页面js文件的onUnLoad如果有。
runtime?.invokeMethod(pageName, 'releaseJS', null);//再调用fair_core.js的_release 方法
}
再次运行项目：
-
self.context[pageName] = nil//pageName:"test1#1" -
GLOBAL[pageName] = null;//GLOBAL对象清除 -
[self.context evaluateScript:jsScript]//jsScript：GLOBAL['test1#1'] = (function(__initProps__) {...})(convertObjectLiteralToSetOrMap(JSON.parse('{}')));
let mClass = GLOBAL[pageName];
let func = mClass[funcName];
let methodResult;
if (isNull(func)) {
methodResult = '';
} else {
methodResult = func.apply(mClass, args);
}
综上，通过这样的成对配置，就完成了Javascript GLOBAL 对象的创建与释放，避免了内存的泄漏。
转载自:https://juejin.cn/post/7277882226594545720