将Jquery函数放在一个单独的文件中 - Joomla

Question

我正在Joomla建站点。 我一直在添加越来越多的小jQuery片段，我觉得网站和模板变得杂乱无章。 有没有办法将所有jQuery函数放在一个.js文件中，然后将该文件包含在Joomla的模板index.php中，最后从Joomla上的任何页面调用这些函数？

例如，在模板index.php中：

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

在sample.js中，类似于：

<script type="text/javascript">

$(document).ready(function(){
  $(".ease").slideUp(1).delay(400).slideDown(700);
});

$(document).ready(function() {
    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});
</script>

在Joomla模块中，类似于：

<div class="ease">
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

我只是不确定如何构建.js文件 - 除了脚本类型=“text / javascript”之外我还需要使用其他东西吗？ 我什么时候使用$（document）.ready？ 所有的帮助将不胜感激。

Answer 1

你不需要单独的document.ready块都可以在一个包装块中完成

$(document).ready(function(){
    $(".ease").slideUp(1).delay(400).slideDown(700);

    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown(400);
    }, 
    function(){
        $('.menu>li>ul').stop(true,true).slideUp();
    });
});

为了正确构造文件，我想说有一个文件用于核心功能，更准确地说，你应该有模板，组件和模块的单独文件。 例如：

模板

templates/my_template/js/scripts.js

组件

components/com_test1/js/script.js
components/com_test2/js/script.js
components/com_test2/js/script.js

模块

modules/mod_test1/js/script.js
modules/mod_test1/js/script.js
modules/mod_test1/js/script.js

这样就可以清楚地知道什么文件负责什么代码。 在文件本身，如果它们变得很大，你可以添加一些注释，例如：

(function($) {
    # 1. Main menu
    # 2. Accordion block home page
    # 3. Lightbox/Pop-up overlays
    # 4. Tabbed content
    # 5. Misc

    # 1. Main menu
    $('.main-menu').on('click' someFunction);

    # 2. Accordion block home page
    $('.accordion').on('click' someFunction);

    # 3. Lightbox/Pop-up overlays
    //...
})(jQuery);

Answer 2

好的，我意识到这就是它的完成方式。 通过以下方式开始index.php：

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('jquery.framework');
$document = JFactory::getDocument();
$document->addScript(JUri::root() . 'templates/MyTemplate/mainmenu.js');
?>

在mainmenu.js中，使用jQuery而不是$，因此它与Mootools不冲突：

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

希望这可以帮助有人在路上。