7.3 Js的加载顺序

在Drupal中引入JS的时候,你可以用表示权重的“group”来控制JS在页面上的载入顺序,以下是你可以在"group"中使用的常数:

JS_LIBRARY: JS库,设置(settings),jQuery插件

JS_DEFAULT:模块层JS

JS_THEME: 模版层JS

Drupal页面加载JS的顺序是:先加载JS_LIBRARY,然后加载JS_DEFAULT,最后是JS_THEME。

当你使用drupal_add_js引入JS的时候,你可以使用类似下面的代码来控制JS的加载顺序:

<?php
 
drupal_add_js(
 
  'jQuery(document).ready(function () { alert("Hello!"); });',
 
  array(
 
    'type' => 'inline',
 
    'scope' => 'footer',
 
    'group' => JS_THEME,
 
    'weight' => 5,
 
  )
 
);
 
?>

这里的scope是一个更加重要的东西,他有两个值一个是header一个是footer,而且默认值是header。

顾名思义,它们的作用是用来指定你的JS代码是放在页面顶部还是底部的。

我们在讨论前端性能的时候曾经说过,将JS代码放在页面底部是常见的优化性能的做法——这也是Google Speed的推荐方式。因此如果你使用drupal_add_js添加JS代码,一定不要忘记把scope的值设置为footer,至少如果你不这么做的话,应该知道原因。因为如果你不设置的话,它就跑到页面顶部去了。

让我们再来看一下核心中的html.tpl.php文件,这个文件是Drupal的模版层输出页面JS代码的源头。

<?php

/**
 * @file
 * Default theme implementation to display the basic html structure of a single
 * Drupal page.
 *
 * Variables:
 * - $css: An array of CSS files for the current page.
 * - $language: (object) The language the site is being displayed in.
 *   $language->language contains its textual representation.
 *   $language->dir contains the language direction. It will either be 'ltr' or 'rtl'.
 * - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
 * - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
 * - $head_title: A modified version of the page title, for use in the TITLE
 *   tag.
 * - $head_title_array: (array) An associative array containing the string parts
 *   that were used to generate the $head_title variable, already prepared to be
 *   output as TITLE tag. The key/value pairs may contain one or more of the
 *   following, depending on conditions:
 *   - title: The title of the current page, if any.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site, if any, and if there is no title.
 * - $head: Markup for the HEAD section (including meta tags, keyword tags, and
 *   so on).
 * - $styles: Style tags necessary to import all CSS files for the page.
 * - $scripts: Script tags necessary to load the JavaScript files and settings
 *   for the page.
 * - $page_top: Initial markup from any modules that have altered the
 *   page. This variable should always be output first, before all other dynamic
 *   content.
 * - $page: The rendered page content.
 * - $page_bottom: Final closing markup from any modules that have altered the
 *   page. This variable should always be output last, after all other dynamic
 *   content.
 * - $classes String of classes that can be used to style contextually through
 *   CSS.
 *
 * @see template_preprocess()
 * @see template_preprocess_html()
 * @see template_process()
 *
 * @ingroup themeable
 */
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

你可以看到代码中的第53行高亮显示的内容,就是将JS输出到页面head部位的代码。 而代码中的第61行高亮显示的内容,就是将JS输出到页面底部的代码。我自己通常的做法是把第53行直接放到61行的上面,当然,没有人告诉我这样对不对,也许是错的,我不负责哦。

关于这个问题,还有更多的Drupaler在D.O.上讨论,大家可以自己去看看。点击传送门

本书共55小节:

评论 (写第一个评论)