58fairDelegate方法调用规则-携带参数使用问题总结

站长

2024年04月06日 09:52 · 阅读数 44

本文继续记录fair界面的不同写法对fair delegate方法调用的处理的源码实现过程。 fair delegate

FairWidget界面解析2种正则匹配方式

在FairWidget 的build方法的界面解析过程两种方式的写法将会走不同的流程。

GestureExpression

正则：

RegExp(r'@(.+)', multiLine: false).hasMatch(exp ?? '');

将使用bindFunctionOf方法。

FunctionExpression

正则：

RegExp(r'%(.+)', multiLine: false).hasMatch(exp ?? '');

将使用runFunctionOf 方法。

GestureExpression方式

这种方式为@(medalsInfoWidget) @开头的这种样式。

写法为：


 Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Builder(
                builder: medalsInfoWidget,
              ),
            ),
            
  Widget medalsInfoWidget(context) {
    return Container();
  }

他转化成json内容为：

    {
              "className": "Padding",
              "na": {
                "padding": {
                  "className": "EdgeInsets.symmetric",
                  "na": {
                    "horizontal": 20
                  }
                },
                "child": {
                  "className": "Builder",
                  "na": {
                    "builder": "@(medalsInfoWidget)"
                  }
                }
              }
            },
            
             "medalsInfoWidget": {
      "className": "Container"
    }

JS文件中这种方式将不会有medalsInfoWidget js函数生成。

运行过程中：将会匹配到GestureExpression 执行bindFunction逻辑：

dynamic bindFunctionOf(String funcName, ProxyMirror? proxyMirror,
    BindingData? bound, Domain? domain,
    {String? exp}) {
  if (_functions?[funcName] == null) {
    if (RegExp(r'.+(.+)', multiLine: false).hasMatch(funcName)) {
      var rFuncName = funcName.substring(0, funcName.indexOf('('));
      var params = funcName.substring(
          funcName.indexOf('(') + 1, funcName.lastIndexOf(')'));
      var args = params.split(',').map((e) {
        if (RegExp(r'^(index)', multiLine: false).hasMatch(e) &&
            domain is IndexDomain?) {
          return domain?.index;
        } else if (domain != null && domain.match(e)) {
          return domain.bindValue(e);
        } else {
          var r = proxyMirror?.evaluate(null, bound, e, domain: domain);
          if (r?.data == null) {
            return e;
          } else {
            return r?.data is ValueNotifier ? r?.data.value : r?.data;
          }
        }
      }).toList();
      return ([props]) {
        var arguments = [];
        if (props != null) {
          arguments.add(props);
        }
        if (args != null) {
          arguments.addAll(args);
        }
        _functions?['runtimeInvokeMethod']?.call(rFuncName, true, arguments);
      };
    } else {
      return ([props]) =>
          _functions?['runtimeInvokeMethod']?.call(funcName, false, props);
    }
  } else {
    return _functions?[funcName]; //因为我们实现了delegate 所以medalsInfoWidget 会执行delegate方法
  }
}

对应我们的代理方法实现为：

  Map<String, Function> bindFunction() {
    var bindFunction = super.bindFunction();
    bindFunction.addAll({
 
      'medalsInfoWidget': _medalsInfoWidget,
 
    });
    return bindFunction;
  }


  Widget _medalsInfoWidget(context) { //这个context 不是从js传递过来的。是从build过程中获取传递的对应层的context
    //context
 
  }

整体的运行过程如下：

调用1:

58fairDelegate方法调用规则-携带参数使用问题总结

调用2: 58fairDelegate方法调用规则-携带参数使用问题总结

调用3:

58fairDelegate方法调用规则-携带参数使用问题总结

调用4:

58fairDelegate方法调用规则-携带参数使用问题总结

FunctionExpression 方式

这种方式为%(medalsInfoWidget2) %开头的这种样式。

Widget的写法为：

       Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: medalsInfoWidget2(),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: medalsInfoWidget3(),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: medalsInfoWidget4(),
            ),

 
    //这种方式可以-避免生成methodMap
  medalsInfoWidget2() {}
  
       // 不能写返回值，写返回值不会走delegate和js，生成methodMap走methodMap
    Widget medalsInfoWidget3() {
    return Container();
  }
         // 不能写返回值，写返回值不会走delegate和js，生成methodMap走methodMap
  Text medalsInfoWidget4() {
    return const Text('1234');
  }

转化成json为

   {
              "className": "Padding",
              "na": {
                "padding": {
                  "className": "EdgeInsets.symmetric",
                  "na": {
                    "horizontal": 20
                  }
                },
                "child": "%(medalsInfoWidget2)"//FunctionExpression： runFunctionOf
              }
            },
            {
              "className": "Padding",
              "na": {
                "padding": {
                  "className": "EdgeInsets.symmetric",
                  "na": {
                    "horizontal": 20
                  }
                },
                "child": "%(medalsInfoWidget3)"//
              }
            },
            {
              "className": "Padding",
              "na": {
                "padding": {
                  "className": "EdgeInsets.symmetric",
                  "na": {
                    "horizontal": 20
                  }
                },
                "child": "%(medalsInfoWidget4)"//
              }
            },
     
   //build以外的方法生成methodMap情况如下：
   
 "methodMap": {        
 
 
     
    //不会在methodMap生成内容：   medalsInfoWidget2() {} 但是生成了js方法
    
    
    //%(medalsInfoWidget3)不会走代理，没有生成js方法 。如果是第一种情况"builder":"@(medalsInfoWidget)"能走代理
   // 有返回值的:   Widget medalsInfoWidget3() 
   
     "medalsInfoWidget3": {
      "className": "Container"
    },
    
    
    //%(medalsInfoWidget4)不会走代理
      // 有返回值的:     Text medalsInfoWidget4() {return const Text('1234');} 
    "medalsInfoWidget4": {
      "className": "Text",
      "pa": [
        "1234"
      ]
    }     
}

js方法为：

       medalsInfoWidget2: function medalsInfoWidget2() {
                    const __thiz__ = this;
                    with(__thiz__) {}
                },
                
      medalsInfoWidget4: function medalsInfoWidget4() {
                    const __thiz__ = this;
                    with(__thiz__) {
                        return new Text('1234');
                    }
                },

总结就是build之外的方法，

如果返回return对象的类型是Widget，Text，Container是flutter widget类型的就会生成methodMap。%(xx)FunctionExpression这种表达式匹配出来，将会走methodMap映射创建widget。不会调用js和delegate。
所以上述实现中，%(medalsInfoWidget2) 函数的实现不返回任何对象，以便运行时调用delegate方法
返回值类型是Widget（是返回值类型，不是return的对象的类型）不会生成js方法。其余情况都将会生成js方法

对应我们的代理方法实现为：

  Map<String, Function> bindFunction() {
    var bindFunction = super.bindFunction();
    bindFunction.addAll({
 
      'medalsInfoWidget2': _medalsInfoWidget2,
    });
    return bindFunction;
  }

    Widget _medalsInfoWidget2() {
   
  }

运行过程中：将会匹配到 FunctionExpression 执行 runFunctionOf 逻辑：

%(medalsInfoWidget2)执行 : dynamic runFunctionOf(String funcName, ProxyMirror? proxyMirror, BindingData? bound, Domain? domain, {String? exp})

 _functions?[funcName]?.call();

runFunctionOf完整实现为：

 
dynamic runFunctionOf(String funcName, ProxyMirror? proxyMirror,
    BindingData? bound, Domain? domain,
    {String? exp}) {
  if (_functions?[funcName] == null) {
    var result;
    if (RegExp(r'.+(.+)', multiLine: false).hasMatch(funcName)) {
      var rFuncName = funcName.substring(0, funcName.indexOf('('));
      var params = funcName.substring(
          funcName.indexOf('(') + 1, funcName.lastIndexOf(')'));
      var args = params.split(',').map((e) {
        if (RegExp(r'^(index)', multiLine: false).hasMatch(e) &&
            domain is IndexDomain?) {
          return domain?.index;
        } else if (domain != null && domain.match(e)) {
          return domain.bindValue(e);
        } else {
          var r = proxyMirror?.evaluate(null, bound, e, domain: domain);
          if (r?.data == null) {
            return e;
          } else {
            return r?.data is ValueNotifier ? r?.data.value : r?.data;
          }
        }
      }).toList();
      result = _functions?['runtimeInvokeMethodSync']?.call(rFuncName, args);
    } else {
      result = _functions?['runtimeInvokeMethodSync']?.call(funcName);
    }
    try {
      var value = jsonDecode(result);
      return value['result']['result'];
    } catch (e) {
      throw RuntimeError(errorMsg: result);
    }
  } else {
    return _functions?[funcName]?.call();//所以这里的delegate的方法也是不能支持携带参数
  }
}

methodMap方式

Function.apply(
    fun, [Property.extract(list: pa.data, map: na.data)], null);

对于上面%(medalsInfoWidget4) 为什么没有去调用js函数，也没走delegate，是因为这个方法生成了methodMap：

dart界面写法：

Widget build(BuildContext context) {
 ....

      Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: medalsInfoWidget4(),
            ),

 ... 
}


  Text medalsInfoWidget4() {
    return const Text('1234');
  }

生成的json和js：



{
              "className": "Padding",
              "na": {
                "padding": {
                  "className": "EdgeInsets.symmetric",
                  "na": {
                    "horizontal": 20
                  }
                },
                "child": "%(medalsInfoWidget4)"
              }
 },
            
            
   "methodMap": {
    
    "medalsInfoWidget4": {
      "className": "Text",
      "pa": [
        "1234"
      ]
    }
  },
  
  //下面为js方法。 这里这个js函数是不会执行的：
      medalsInfoWidget4: function medalsInfoWidget4() {
                    const __thiz__ = this;
                    with(__thiz__) {
                        return new Text('1234');
                    }
                },

FairWidget渲染过程：

  dynamic replaceMethod(Map? methodMap, String? exp) {
    var body;
    if (methodMap != null && exp != null && isFuncExp(exp)) {
      body = methodMap[subFunctionName(exp)];
    }
    return body;
  }

58fairDelegate方法调用规则-携带参数使用问题总结

调用methodMap 中的Text方法.不会执行js函数

"medalsInfoWidget4": {
      "className": "Text",
      "pa": [
        "1234"
      ]
    }

58fairDelegate方法调用规则-携带参数使用问题总结

另外转换成更多的也是一样。


//build方法
 Widget build(BuildContext context) {
// ...
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: medalsInfoWidget4(), //这里会转化成函数: %(medalsInfoWidget4)
    ), 
    
//...    
}

//build外面的方法：将会出现在methodMap
Text medalsInfoWidget4() {
  return const Text('1234',style: TextStyle(color: Colors.red,fontSize: 30),);
}

methodMap 更多:

{ 
  className": "Stack",
  "na": {
     //....
     {
        "className": "Padding",
        "na": {
          "padding": {
            "className": "EdgeInsets.symmetric",
            "na": {
              "horizontal": 20
            }
          },
          "child": "%(medalsInfoWidget4)"
        }
      },
      //....
  },            
       
  "methodMap": {
     "medalsInfoWidget4": {
          "className": "Text",
          "pa": [
            "1234"
          ],
          "na": {
            "style": {
              "className": "TextStyle",
              "na": {
                "color": "#(Colors.red)",
                "fontSize": 30
              }
            }
          }
        }
    }
}



js文件：
 ///其实不会执行
 medalsInfoWidget4: function medalsInfoWidget4() {
    const __thiz__ = this;
    with(__thiz__) {
        return new Text('1234', {
            style: TextStyle({
                color: Colors.red,
                fontSize: 30
            })
        });
    }
},

即build外的函数转化成 methodMap , 将会按照methodMap 映射表生成的widget而不会走js函数和delegate.

结论：

GestureExpression @开头的，bindFunctionOf 调用的 return _functions?[funcName];

还是匹配到 FunctionExpression % 开头的 runFunctionOf调用的 _functions?[funcName]?.call();

在执行时，delegate都是不支持带参数。

所以遇到需要带参数时，需要用其他方法代替。

比如在delegate中通过调用runtime?.variablesSync 和 runtime?.invokeMethodSync 获取js运行时的变量或者调用js函数。实例为：

var invokeMethodSync = runtime?.variablesSync(pageName, {
  'medalsInfo': null,
  'noMedalsIcon': null,
  'noMedalsName': null,
});
var json = jsonDecode(invokeMethodSync!);
var result = json['result'];

或者调用

var invokeMethodSync =
    runtime?.invokeMethodSync(pageName, 'getScoreTip', null);
var json = jsonDecode(invokeMethodSync!);
var tip = json['result']['result'];

使用jsPlugin。可以使用通过插件可以传递更多参数
js函数里没有办法再调用delegate了，可以用jsPlugin
delegate是fair一期的产物，原本就不支持传参。delegate要支持传参比较复杂
jsPlugin context不能传参，需要想办法内置到jsPlugin的dart部分
plugin回调暂时不能支持同步调用，现在都是异步的

转载自:https://juejin.cn/post/7287914129564762169