在 Joomla 3 中的其他 Javascript 之前加载 jQuery答案

【问题标题】：Loading jQuery before other Javascript in Joomla 3在 Joomla 3 中的其他 Javascript 之前加载 jQuery
【发布时间】：2012-10-16 05:09:21
【问题描述】：

我正在为 Joomla 3 调整一个自定义组件。它依赖于 jQuery，这是我之前自己加载的。现在它已包含在基本模板中，我不需要。但是，我的依赖于 jQuery 的自定义 javascript 是首先加载的。我使用以下表格加载它们：

$document = JFactory::getDocument();
$document->addScript( PATH TO SCRIPT);

这将它们正确地包含在 <head> 元素中，但它们是在 jQuery 之前加载的。

一些快速搜索在libraries/cms/html/jquery.php 中发现了abstract class JHtmlJquery，但我不确定它是从哪里调用的。

如何更改加载顺序，以便在依赖它的脚本之前加载 jQuery？我可以在不进入核心代码的情况下做到这一点吗？

【问题讨论】：

使用 $document->addCustomTag('');自定义标签将在所有其他脚本加载后加载。

标签： joomla joomla-extensions joomla3.0

【解决方案1】：

您使用的是什么模板？在 J3 中，将 jQuery 平台加载到页面底部是一种常识，这样页面加载速度会更快。在您的模板中查找 JHtml::_('bootstrap.framework'); // Loads the jQuery js scripts 并尝试在此之后加载您的 js。

【讨论】：

不太好，比如K2（Joomla最常用的CCK），很多组件都需要“之前”加载jQuery。

【解决方案2】：

Joomla 可能会按照执行组件和模块代码的添加顺序来编写 $document->addScript( PATH TO SCRIPT); 方式中包含的脚本和 css 文件。

我进行了一些搜索，但找不到影响单独声明或 jQuery 加载的方法。但我可以提供其他解决方案。

我不能说我确定这将是您问题的解决方案，因为我不知道您的代码是做什么的，或者什么时候需要做某事。因此，我将提供最广泛的解决方案；)

只要您的代码在页面准备就绪之前不必处于活动状态，这将起作用。

将您的自定义代码包装在 js on ready 语句中，因此在页面（因此 jQuery 已加载）之前它不会执行任何操作。

if (document.readyState === "complete") { 
    DoYourStuff(); 
}

【讨论】：

【解决方案3】：

马里奥的答案是朝着正确的方向发展，但并没有完全做到。事实证明，在加载其他脚本之前，您必须在组件（不仅仅是模板文件）中包含 JHtml::('bootstrap.framework'); 的代码。我使用的是库存 J3 模板 protostar，其中包括 twitter 引导程序在其模板 index.php 中。

我的自定义 view.html.php 的代码现在如下：

class MyView extends JViewLegacy
{
    function display($tpl = null)
    {
        $document = JFactory::getDocument();
        JHtml::_('bootstrap.framework');

        $document->addScript( PATH_TO_SCRIPT );

        ...
    }
}

这符合预期，并且 jQuery 和 Bootstrap 文件（jquery.min.js、jquery-noconflict.js 和 bootstrap.min.js）包含在我的自定义脚本之前的 <head> 中。

【讨论】：

【解决方案4】：

我找到了解决方案。我不希望模板和组件都加载引导程序，加上在加载某些模块的单篇文章的页面上，我不想让每个模块也加载引导程序..（我的意思是有点荒谬..）所以我决定完全从模板中取出引导程序，我构建了一个系统插件，它只加载引导程序，然后我将插件的加载顺序设置为首先加载。效果很好..

// Bootstrap Loader


    jimport('joomla.plugin.plugin');

    class plgSystemBootstrapLoader extends JPlugin {

        function onAfterRoute() {

            // Load Bootstrap
            JHtml::_('bootstrap.framework');
            $document = JFactory::getDocument();
            $document->addStyleSheet('/media/jui/css/bootstrap.min.css');
            $document->addStyleSheet('/media/jui/css/bootstrap-responsive.css');
        }

    }

【讨论】：

这可能是最好的解决方案。它很优雅并且遵循 Joomla 范式。