时间戳

首页 > 解决方案 > 如何创建一个值是函数的对象？

javascript - 如何创建一个值是函数的对象？

问题描述

我需要以编程方式创建一个具有一对属性的对象：值就像tmpCol["formatter"]=color定义颜色的地方一样

var colors = function backgroundColor(cell, formatterParams){}

在jsFiddle上一切正常

但我需要在 javascript 之外即时创建对象。我使用谷歌脚本，根据数据创建列标题的定义。我试图 var colors = function backgroundColor(cell, formatterParams){}在服务器端定义一个虚拟函数，这样定义甚至可以通过运行。但是当我在浏览器中运行页面时，函数定义在我看来是一个文本而不是一个函数。google.script.run浏览器调用GAS 返回的定义获取数据。

在此处输入图像描述

类型化定义 tmpCol["formatter"]=colors;有效，但在 GAS 处理时无效

服务器端的 html 代码看起来像

  <script>
  var colors = function backgroundColor(cell, formatterParams){
    var value = cell.getValue();
    if ("color" in formatterParams) {
      var color = cell.getRow().getData()[formatterParams["color"]];
      if (color){
        cell.getElement().style.backgroundColor = cell.getRow().getData()[formatterParams["color"]];
      }
    }
  return value;
  }
      var initialTableData = [{id:0,name:"nahrávají se data"}];
      var table = new Tabulator("#zz-test", {
          layout:"fitColumns",
          responsiveLayout:"hide",
          data:initialTableData,
          dataTree:true,    
          selectable:true,
          columns:[
            {title:"",
              field:"name",
              headerSort:false,
            },
          ],
      });
google.script.run.withSuccessHandler(updateTable).callLibraryFunction("zzlib.getTabulatorData",'A87J8HRS1');
      
  function updateTable(data){
    table.deleteColumn("name");
    for ( var c = 0; c < data.tableColumns.length; c++){
      table.addColumn(data.tableColumns[c]);
    }
//test
      var tmpCol = {};
    tmpCol["title"]="test 1";
    tmpCol["field"]="test1";
    tmpCol["headerSort"]=false;
    tmpCol["formatter"]=colors;
    tmpCol["formatterParams"]={color:"color1"};    
  
  columns = [
        {title:"", field:"name", width:200},
        tmpCol,
        {title:"Test2", field:"test2", width:200,formatter:colors,formatterParams:{color:"color2"}}
        ];

  //  table.deleteColumn("name");
  //  table.deleteColumn("test1");
  //  table.deleteColumn("test2");

    for ( var c = 0; c < columns.length; c++){
     // table.addColumn(columns[c]);
    }
console.log(columns);
// test
    table.setData(data.tableData); 
  }
    </script>

我需要formatter为两列定义。所以到目前为止，在 for 循环中我尝试了这些。

for ( var c = 0; c < data.tableColumns.length; c++){
  if ("formatter" in data.tableColumns[c]) {
    //console.log(eval(data.tableColumns[c]["formatter"]));
    //data.tableColumns[c]["formatter"]= new Function("return " +   data.tableColumns[c]["formatter"]);
    data.tableColumns[c]["formatter"]= var colors = new Function("return " + data.tableColumns[c]["formatter"]);
    //eval(data.tableColumns[c]["formatter"]);
    //eval("var colors = " + data.tableColumns[c]["formatter"]);
   console.log("eval");
  }
}

知道如何在服务器端创建对象值并将其正确传递给浏览器吗？

标签： javascriptgoogle-apps-script

解决方案

假设你有：

var functionString = "function backgroundColor(cell, formatterParams){}";

您可以使用Function构造函数：#Recommended

var colors = new Function("return " + functionString)()

这会在匿名函数中解析我们的函数，我们return通过调用匿名函数来添加，我们可以获得目标函数，最后我们添加调用()

例子：

var functionString = "function backgroundColor(cell, formatterParams){ return 'Hey!'}";

var anonymousFunction = new Function("return " + functionString);
var targetFunction = anonymousFunction();


console.log(anonymousFunction);
console.log(anonymousFunction());

console.log(targetFunction);
console.log(targetFunction());

在这里阅读更多

或者你可以使用eval：# 不推荐

eval("var colors = " + functionString);

这个将解析和评估您的字符串作为 javascript 代码

但是，这是一种危险的方法，请尽量避免

在这里阅读更多

推荐阅读