javascript - 多个嵌套对象的 eval() 替代方法

Question

我正在尝试为我正在使用的 HTML 应用程序创建一个通用的 i18n 解决方案。我正在寻找使用 eval() 调用深度嵌套的 Javascript 对象的替代方法:

假设以下 HTML 示例:

<div id="page1">
  <h1 data-i18n="html.pageOne.pageTitle"></h1>
</div>

及其配套的 Javascript(使用 jQuery):

var i18n;

i18n = {
  html: {
     pageOne: {
       pageTitle: 'Lorem Ipsum!'
     }
  }
};

$(document).ready(function () {
  $('[data-18n]').each(function () {
    var q;

    q = eval('i18n.' + $(this).attr('data-i18n'));
    if (q) {
      $(this).text(q);
    }
  });
});

关于如何在不使用 eval() 的情况下访问 i18n 对象内的“pageTitle”属性的任何建议？我需要保留对象的结构，因此将其布局更改为“平面”解决方案是不可行的。

谢谢!!!

Answer 1

您可以使用括号语法，正如其他人所暗示的那样。但是，您需要在 处进行拆分和迭代。:

function lookup(obj, path) {
    var keys = path.split('.'),
        result = obj;

    for (var i = 0, l = keys.length; i < l; i++) {
        result = result[keys[i]];

        // exit early if `null` or `undefined`
        if (result == null)
            return result;
    }

    return result;
}

然后:

q = lookup(i18n, $(this).attr('data-i18n'));
if (q) {
  $(this).text(q);
}