jQuery 解释错了吗？还是 Drupal 输出错误？

Question

我正面临一个特殊的问题。我的 Drupal 网站使用的是 Jquery 1.4.4 版本。

众所周知，Drupal 将Drupal.settings json 输出到 Javascript 为：

当我启用devel_themer 模块时：

以下是输出

jQuery.extend(Drupal.settings, {
   "basePath":"\/d7\/",
   "pathPrefix":"",
   "ajaxPageState":{
      "theme":"bartik",
      "theme_token":"KC2-1Z9CN5PCxDyAq_W8FGBQBOOnwt8AyoeX1UDBoP8",
      "js":{
         "misc\/jquery.js":1,
         "misc\/jquery.once.js":1,
         "misc\/drupal.js":1,
         "misc\/ui\/jquery.ui.core.min.js":1,
         "misc\/ui\/jquery.ui.widget.min.js":1,
         "misc\/jquery.cookie.js":1,
         "misc\/jquery.form.js":1,
         "misc\/ui\/jquery.ui.mouse.min.js":1,
         "misc\/ui\/jquery.ui.draggable.min.js":1,
         "misc\/ui\/jquery.ui.resizable.min.js":1,
         "misc\/jquery.ba-bbq.js":1,
         "modules\/overlay\/overlay-parent.js":1,
         "misc\/ajax.js":1,
         "misc\/progress.js":1,
         "sites\/all\/modules\/devel_themer\/devel_themer.js":1,
         "sites\/all\/modules\/devel\/krumo\/krumo.js":1,
         "modules\/toolbar\/toolbar.js":1,
         "sites\/all\/modules\/devel\/devel_krumo_path.js":1
      },
      "css":{
         "modules\/system\/system.base.css":1,
         "modules\/system\/system.menus.css":1,
         "modules\/system\/system.messages.css":1,
         "modules\/system\/system.theme.css":1,
         "misc\/ui\/jquery.ui.core.css":1,
         "misc\/ui\/jquery.ui.theme.css":1,
         "misc\/ui\/jquery.ui.resizable.css":1,
         "modules\/overlay\/overlay-parent.css":1,
         "modules\/comment\/comment.css":1,
         "modules\/field\/theme\/field.css":1,
         "modules\/node\/node.css":1,
         "modules\/search\/search.css":1,
         "modules\/user\/user.css":1,
         "sites\/all\/modules\/devel_themer\/devel_themer.css":1,
         "sites\/all\/modules\/devel\/krumo\/skins\/default\/skin.css":1,
         "modules\/shortcut\/shortcut.css":1,
         "modules\/toolbar\/toolbar.css":1,
         "sites\/all\/modules\/devel_themer\/devel_themer_ie_fix.css":1,
         "themes\/bartik\/css\/layout.css":1,
         "themes\/bartik\/css\/style.css":1,
         "themes\/bartik\/css\/colors.css":1,
         "themes\/bartik\/css\/print.css":1,
         "themes\/bartik\/css\/ie.css":1,
         "themes\/bartik\/css\/ie6.css":1
      }
   },
   "thmrStrings":{
      "themer_info":"Themer info",
      "toggle_throbber":" \u003Cimg src=\u0022\/d7\/sites\/all\/modules\/devel_themer\/loader-little.gif\u0022 alt=\u0022loading\u0022 class=\u0022throbber\u0022 width=\u002216\u0022 height=\u002216\u0022 style=\u0022display:none\u0022 \/\u003E",
      "parents":"Parents: ",
      "function_called":"Function called: ",
      "template_called":"Template called: ",
      "candidate_files":"Candidate template files: ",
      "preprocessors":"Preprocess functions: ",
      "processors":"Process functions: ",
      "candidate_functions":"Candidate function names: ",
      "drupal_api_docs":"link to Drupal API documentation",
      "source_link_title":"link to source code",
      "function_arguments":"Function Arguments",
      "template_variables":"Template Variables",
      "file_used":"File used: ",
      "duration":"Duration: ",
      "api_site":"http:\/\/api.drupal.org\/",
      "drupal_version":"7",
      "source_link":"\/d7\/devel\/source?file="
   },
   "thmr_popup":"  \u003Cdiv id=\u0022themer-fixeder\u0022\u003E\n  \u003Cdiv id=\u0022themer-relativer\u0022\u003E\n  \u003Cdiv id=\u0022themer-popup\u0022\u003E\n      \u003Cdiv class=\u0022topper\u0022\u003E\n        \u003Cspan class=\u0022close\u0022\u003EX\u003C\/span\u003E Drupal Themer Information\n      \u003C\/div\u003E\n      \u003Cdiv id=\u0022parents\u0022 class=\u0022row\u0022\u003E\n\n      \u003C\/div\u003E\n      \u003Cdiv class=\u0022info row\u0022\u003E\n        \u003Cdiv class=\u0022starter\u0022\u003EClick on any element to see information about the Drupal theme function or template that created it.\u003C\/div\u003E\n        \u003Cdl\u003E\n          \u003Cdt class=\u0022key-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022key\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdiv class=\u0022used\u0022\u003E\n          \u003C\/div\u003E\n          \u003Cdt class=\u0022candidates-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022candidates\u0022\u003E\n\n          \u003C\/dd\u003E\n\n          \u003Cdt class=\u0022preprocessors-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022preprocessors\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdt class=\u0022processors-type\u0022\u003E\n\n          \u003C\/dt\u003E\n          \u003Cdd class=\u0022processors\u0022\u003E\n\n          \u003C\/dd\u003E\n          \u003Cdiv class=\u0022duration\u0022\u003E\u003C\/div\u003E\n        \u003C\/dl\u003E\n      \u003C\/div\u003E\u003C!-- \/info --\u003E\n      \u003Cdiv class=\u0022attributes row\u0022\u003E\n      \u003Cdiv class=\u0022themer-variables\u0022\u003E\u003C\/div\u003E\n      \u003C\/div\u003E\u003C!-- \/attributes --\u003E\n    \u003C\/div\u003E\u003C!-- \/themer-popup --\u003E\n    \u003C\/div\u003E\n    \u003C\/div\u003E",
   "overlay":{
      "paths":{
         "admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*\ndevel\/*\nnode\/*\/devel\nnode\/*\/devel\/*\ncomment\/*\/devel\ncomment\/*\/devel\/*\nuser\/*\/devel\nuser\/*\/devel\/*\ntaxonomy\/term\/*\/devel\ntaxonomy\/term\/*\/devel\/*",
         "non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"
      },
      "pathPrefixes":[

      ],
      "ajaxCallback":"overlay-ajax"
   },
   "tableHeaderOffset":"Drupal.toolbar.height"
});

在浏览器控制台中，您可以在以下屏幕截图中看到Drupal.settings 对象有一些奇怪的对象。

这有什么奇怪的？

如果我在控制台中写Drupal.settings.thmrStrings，它会显示未定义。但根据上述对象，应该有。根据 json，它没有显示这些有意义的对象，而是显示生成了一些奇怪的对象，例如 Drupal.settings.thmr_1、Drupal.settings.thmr_2、Drupal.settings.thmr_3 ..Drupal.settings.thmr_94。这些Drupal.settings.thmr_* 对象来自哪里？他们不在json中？为什么对象不符合 JSON？

您在屏幕截图中看到的错误是由于这个原因引起的。 javascript 文件devel_themer.js 正在访问Drupal.settings.thmrStrings 的子对象，但它没有得到它。这就是我背后的主要问题。

当我禁用 devel_themer 模块时：

以下是输出：

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {
   "basePath":"\/d7\/",
   "pathPrefix":"",
   "ajaxPageState":{
      "theme":"bartik",
      "theme_token":"KC2-1Z9CN5PCxDyAq_W8FGBQBOOnwt8AyoeX1UDBoP8",
      "js":{
         "misc\/jquery.js":1,
         "misc\/jquery.once.js":1,
         "misc\/drupal.js":1,
         "misc\/ui\/jquery.ui.core.min.js":1,
         "misc\/jquery.ba-bbq.js":1,
         "modules\/overlay\/overlay-parent.js":1,
         "modules\/contextual\/contextual.js":1,
         "misc\/jquery.cookie.js":1,
         "sites\/all\/modules\/devel\/devel_krumo_path.js":1,
         "modules\/toolbar\/toolbar.js":1
      },
      "css":{
         "modules\/system\/system.base.css":1,
         "modules\/system\/system.menus.css":1,
         "modules\/system\/system.messages.css":1,
         "modules\/system\/system.theme.css":1,
         "misc\/ui\/jquery.ui.core.css":1,
         "misc\/ui\/jquery.ui.theme.css":1,
         "modules\/overlay\/overlay-parent.css":1,
         "modules\/contextual\/contextual.css":1,
         "modules\/comment\/comment.css":1,
         "modules\/field\/theme\/field.css":1,
         "modules\/node\/node.css":1,
         "modules\/search\/search.css":1,
         "modules\/user\/user.css":1,
         "modules\/shortcut\/shortcut.css":1,
         "modules\/toolbar\/toolbar.css":1,
         "themes\/bartik\/css\/layout.css":1,
         "themes\/bartik\/css\/style.css":1,
         "themes\/bartik\/css\/colors.css":1,
         "themes\/bartik\/css\/print.css":1,
         "themes\/bartik\/css\/ie.css":1,
         "themes\/bartik\/css\/ie6.css":1
      }
   },
   "overlay":{
      "paths":{
         "admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*\ndevel\/*\nnode\/*\/devel\nnode\/*\/devel\/*\ncomment\/*\/devel\ncomment\/*\/devel\/*\nuser\/*\/devel\nuser\/*\/devel\/*\ntaxonomy\/term\/*\/devel\ntaxonomy\/term\/*\/devel\/*",
         "non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"
      },
      "pathPrefixes":[

      ],
      "ajaxCallback":"overlay-ajax"
   },
   "tableHeaderOffset":"Drupal.toolbar.height"
});
//--><!]]>
</script>

并在浏览器控制台中如您所见，Drupal.settings 对象被正确解释。我的意思是，对象是按照 json 的。没有像上述情况那样奇怪的物体。

问题：是什么导致了这种奇怪的行为？怎么整？

Answer 1

Drupal devel_themer 模块在从服务器接收到 Drupal.settings JSON 响应后对其进行操作。 source code 表明，一旦页面加载，devel_themer 就会修改 Drupal.settings 值：

if (Drupal.jsEnabled) {
    $(document).ready(function () {
      lastObj = false;
      thmrSpanified = false;
      strs = Drupal.settings.thmrStrings;
      $('body').addClass("thmr_call").attr("id", "thmr_" + Drupal.settings.page_id);
      ...

您应该能够通过在 devel_themer 之前定义另一个 $(document).ready 函数来访问未更改的原始 Drupal.settings。 document.ready() 回调按照它们注册的顺序被调用，因此您需要在代码中更早地执行此操作。你已经有了 jQuery 的依赖，所以用它来深度克隆对象...

if (Drupal.jsEnabled) {
  $(document).ready(function(){
    Drupal.originalSettings = jQuery.extend(true, {}, Drupal.settings);    
    // alert(Drupal.originalSettings.thmrStrings.themer_info);
    // ... do your thing ...
  });
}

您需要在 Drupal.settings 加载之后和 dev_themer 模块初始化之前插入这个 $(document).ready 函数。