javascript - 将 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 文件 - 除了 script type="text/javascript"之外，我是否需要使用其他任何东西？我什么时候使用 $(document).ready？等。感谢您的所有帮助。

Answer 1

你不需要单独的 document.ready block ，所有这些都可以在一个包装 block 中完成

$(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);