Question

我最近发现了在页面末尾包含所有.js脚本的新趋势。从我到目前为止所读到的内容看起来非常好，可以做到例外。

我的工作方式是使用如下模板：

<html>
<head>
<!-- tags, css's -->

</head>
<body>
<!-- header -->

<div id="wrapper">
   <?php
             include('pages/'.$page.'.php');
   ?>
</div>


<!-- footer -->

<!-- include all .js -->
</body>
</html>

现在，如果我想在我的页面http://www.bootply.com/71401上使用此示例，我将不得不在我的jquery包含下添加以下代码。

$('.thumbnail').click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $('#myModal').modal({show:true});
});

但这意味着我要么在每个页面都使用它 - 即使我没有使用它，要么在$ page.'php'文件中使用php生成它并在模板文件中回显它，在js之后包含。

我确信，存在更好的方法，我不想从使用可能受到损害的方法开始。

谢谢！

Answer 1

您可以使用的最佳方法是为此代码创建单独的文件。我们将其命名为app.js。现在，您可以将其包含在jQuery包含下。

<script type="text/javascript" src="app.js"></script>

这会阻止代码重复。还有一件事，请在$(document).ready()中提取所有代码。这是一个例子。所以你的app.js文件将如下所示：

$(document).ready(function(){
    $('.thumbnail').click(function(){
        $('.modal-body').empty();
        var title = $(this).parent('a').attr("title");
        $('.modal-title').html(title);
        $($(this).parents('div').html()).appendTo('.modal-body');
        $('#myModal').modal({show:true});
    });
})

Answer 2

请避免使用内联脚本，因为它们不易维护，并阻止浏览器缓存它们。在外部文件中交换内联脚本。

例如，在初始化整个代码之前，您可以将所有JavaScript放在一个文件中，检查是否存在特定元素。 E.g：

$(document).ready(function(){
    if($('.thumbnail').length) {
        // your thumbnail code
    }
});

执行特定页面的更好方法＆＃34; JavaScript适用于像requirejs这样的模块化库。你可以根据它们的功能模块化你的脚本（比如thumbnails.js，gallery.js等），然后根据需要加载必要的脚本。关于元素的存在：

if($('.thumbnail').length) {
    require(['ThumbnailScript'], function(ThumbnailScript){
        ThumbnailScript.init();
    });
}

在jquery和页面加载之前准备jquery

2 个答案: