Flutter机器学习解释器插件ensemble_ts_interpreter的使用

本文将详细介绍如何在Flutter项目中使用ensemble_ts_interpreter插件来执行JavaScript代码。该插件是一个用Dart编写的ES5解析器和解释器，可以在不依赖浏览器引擎的情况下运行JavaScript代码。

什么是ensemble_ts_interpreter

主要用途

• 允许用户直接输入简单的JavaScript代码并内联执行。
• 不应将其作为Flutter中Dart的通用替代品。

特性

• 在与Dart/Flutter代码相同的进程中运行，无需调用浏览器的JavaScript引擎，因此速度快。
• 与React Native不同，无需桥接且无内存问题。
• 支持常见的JavaScript功能，如函数、列表、所有基本类型（字符串、数字、数组、日期等）。
• 高度可扩展，上下文对象可以是JSON或任何带有Invokable混入的Dart对象。

如何使用

1. 添加依赖

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ensemble_ts_interpreter:
    git:
      url: https://github.com/EnsembleUI/ensemble_ts_interpreter.git
      ref: master

然后运行以下命令以更新依赖：

flutter pub upgrade

2. 使用方法

通过调用JSInterpreter.fromCode()方法，并传递需要执行的JavaScript代码和上下文对象。

dynamic result = JSInterpreter.fromCode(code, context).evaluate();

其中：

• code 是要执行的JavaScript代码。
• context 是上下文对象，可以是JSON或任何带有Invokable混入的Dart对象。

示例代码

以下是几个具体的使用示例。

示例 1: 过滤列表

Map<String, dynamic> context = {
  'items': ['one', 'two', 'three'],
  'nested': [
    {'id': 1, 'label': 'eggs', 'type': ''},
    {'id': 2, 'label': 'strawberry', 'type': 'fruit'},
    {'id': 3, 'label': 'nut'}
  ]
};

String code = """
  var flatList = items.filter(function(e) {
    return e != 'two';
  });
  
  var nestedList = nested.filter(function(e) {
    return e['type'] == 'fruit'
  });
""";

JSInterpreter.fromCode(code, context).evaluate();

print(context['flatList']); // 输出: [one, three]
print(context['nestedList']); // 输出: [{id: 2, label: strawberry, type: fruit}]

示例 2: 调用不同的字符串方法

Map<String, dynamic> context = initContext();

String code = """
    var arr = ['a','b','c','d'];
    var b = arr.at(1);
    var arr2 = arr.concat(['e','f']);
    var f = arr2.find(function (element)  { 
          var rtn = ( element == 'f' )? true : false;
          return rtn;
     });
     var includes = arr2.includes('e');
     var str = arr.join();
     var str2 = arr.join('-');
     var str3 = arr.join('');
     var last = arr2.pop(); 
     var nums = [1,2,3,4,5];
     var sum = nums.reduce(function (value, element) {
        return value + element;
        });
     var reversed = arr.reverse();
""";

JSInterpreter.fromCode(code, context).evaluate();

print(context['b']); // 输出: b
print(context['arr2']); // 输出: [a, b, c, d, e, f]
print(context['includes']); // 输出: true
print(context['sum']); // 输出: 15

示例 3: 函数声明与调用

test('functiondeclarationtext', () async {
  String codeToEvaluate = """
    var i = 0;
    var users = [{'name':'Khurram'},{'name':'Mahmood'}];
    updateSalary(users,noArgFunction());
    return manyParms(users[0],noArgFunction()[0],'Hello','How','are','you','today,');
    function noArgFunction() {
      var salaries = [10000,200000];
      salaries[1] = 900000;
      return salaries;
    }
    function updateSalary(users,salaries) {
      users.map(function(user) {
        user['salary'] = salaries[i];
        user['age'] = age;
        i++;
      });
    }
    function manyParms(user,salary,a,b,c,d,e) {
      return a+' '+b+' '+c+' '+d+' '+e+' '+user.name+'. You made $'+salary;
    }
  """;

  Map<String, dynamic> context = initContext();
  dynamic rtnValue = JSInterpreter.fromCode(codeToEvaluate, context).evaluate();

  expect(context['users'][0]['name'], 'Khurram');
  expect(context['users'][0]['salary'], 10000);
  expect(context['users'][1]['salary'], 900000);
  expect(context['users'][1]['age'], 3);
  expect(rtnValue, 'Hello How are you today, Khurram. You made $10000');
});