Question

我正在使用我自己的双向DOM绑定器将输入链接到JSON作为学习机会而不使用Ember，Angular，KnockoutJS等。我试图找到一种方法来递归地构建基于属性名称的动态数组。我的JavaScript在案例陈述中肯定有一个糟糕的代码味道，但我还没有找到更好的方法。

"Customer.Id" = parent[Customer][Id]

JSON：

{
    CustomerOrder: {
        Id: 12345,
        Customer: {
            Id: 555
            Name: "Acme"
            Address: "123 Main"
        }
    }
}

HTML

<input type="text" data-dom="CustomerOrder.Id">
<input type="text" data-dom="CustomerOrder.Customer.Name">

部分JavaScript代码

var checkElements = function () {
    $("[data-dom]").each(function() {
        var $element = $(this);
        var result;
        var ary = $element.data("dom").split(".");
        switch (ary.length) {
            case 1:
                result = data[ary[0]];
                break;
            case 2:
                result = data[ary[0]][ary[1]];
                break;
            case 3:
                result = data[ary[0]][ary[1]][ary[2]];
                break;
            case 4:
                result = data[ary[0]][ary[1]][ary[2]][ary[3]];
                break;
            default:
                result = data;
                break;
        }
        if ($element.is("input, textarea")) {
            $element.val(result);
            return;
        }
        $element.text(result);
    });
}

$(document).on("keyup", "[data-dom]", function() {
    var ary = $(this).data("dom").split(".");
    switch (ary.length) {
    case 1:
        data[ary[0]] = $(this).val();
        break;
    case 2:
        data[ary[0]][ary[1]] = $(this).val();
        break;
    case 3:
        data[ary[0]][ary[1]][ary[2]] = $(this).val();
        break;
    case 4:
        data[ary[0]][ary[1]][ary[2]][ary[3]] = $(this).val();
        break;
    default:
        data = $(this).val();
        break;
    }
    console.log(JSON.stringify(data, null, 2));
    $(document).trigger("data-dom-change");
});

Answer 1

您可以使用递归功能替换开关功能

function returnValue(data, ary, pos) {
  var position = pos || 0;
  if (position === ary.length) {
    return data;
  } 
  return returnValue(data[ary[position]], ary, position+1);
}

接下来，您可以按如下方式替换switch语句

var checkElements = function () {
    $("[data-dom]").each(function() {
        var $element = $(this);
        var result;
        var ary = $element.data("dom").split(".");
        var result = returnValue(data,ary);

        if ($element.is("input, textarea")) {
            $element.val(result);
            return;
        }
        $element.text(result);
    });
}

$(document).on("keyup", "[data-dom]", function() {
    var ary = $(this).data("dom").split(".");
    var value = returnValue(data,ary);
    value = $(this).val();

    console.log(JSON.stringify(data, null, 2));
    $(document).trigger("data-dom-change");
});

Javascript字符串到嵌套数组

1 个答案: