Javascript 在jquery和页面加载之前准备jquery_Javascript_Jquery_Twitter Bootstrap 3_Window Load

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

javascript jquery twitter-bootstrap-3

Javascript 在jquery和页面加载之前准备jquery,javascript,jquery,twitter-bootstrap-3,window-load,Javascript,Jquery,Twitter Bootstrap 3,Window Load,我最近发现了一种新趋势，即在页面末尾包含all.js脚本。从我目前所读到的来看，除了一个例外，似乎还不错，而且是可行的我的工作方式是使用以下模板： <html> <head>  </head> <body>  <div id="wrapper"> <?php include('pages/'.$pa

我最近发现了一种新趋势，即在页面末尾包含all.js脚本。从我目前所读到的来看，除了一个例外，似乎还不错，而且是可行的

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

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

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

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


<!-- footer -->

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

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

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

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

不过我确信，有更好的方法存在，我不想一开始就使用一个可能会妥协的方法

谢谢

最好的方法是为该代码创建一个单独的文件。让我们把它命名为

app.js

。现在可以将其包含在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});
});

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

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

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

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

执行“页面特定”JavaScript的更好方法是使用模块化库，如。您可以根据脚本的功能（如thumbnails.js、gallery.js等）对脚本进行模块化，然后根据元素的存在加载必要的脚本：

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

虽然这可能是一种趋势，但如果脚本用于多个页面，则不允许浏览器缓存JS文件（这将避免完全加载JS的开销）。还有更有用的技术，比如JS文件的捆绑。这就是我试图避免的。当然，我会尝试只生成我想要的js/css，但在本例中，我讨论的是触发器的用法。谢谢你提到“js捆绑”-这是我不知道的。它仍然会在模板文件中生成/写入。我正在寻找一种在$page.php文件中编写js代码的方法，等待页面加载，然后运行。显然，我不能在$page.php文件中使用$（document）.ready（function（）），因为jquery尚未加载。