Question

在另一个问题中，StackOverflow建议无法保证浏览器处理<script>代码的顺序，无论他们在<head>或<body>中的位置如何（请参阅评论）：

最佳答案建议使用纯javascript“DOM-loaded”来保证加载所有依赖项，然后运行特定于页面的代码。

这让我想知道使用jQuery推荐的$函数作为纯JS-DOM加载的替代是否安全：

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

Src：http://learn.jquery.com/using-jquery-core/document-ready/

我如何保证定义jQuery的$？

编辑：要求提供假设失败的例子。这是<script>中的外部<body>：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example 1</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script>
    $(function(){
      alert("Loaded.");
    });
    </script>
  </body>
</html>

<script>中的外部<head> ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example 1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
  </head>
  <body>
    <script>
    $(function(){
      alert("Loaded.");
    });
    </script>
  </body>
</html>

基于Scripts loading out of order in Chrome，其中任何一个都可能失败。

Answer 1

这个问题是基于一个错误的前提。引用的问题Scripts loading out of order in Chrome适用于使用TurboLinks的应用程序，它可以将静态网站有效地转换为单页应用程序。结果，我的<script>标签被动态插入，并且无法保证它们会按顺序运行。

Answer 2

你可以反复检查是否加载了jQuery，直到它运行了一些代码。

<script>
function doStuff() {
   //do jQuery stuff
}

function checkLoaded() {
   if(typeof jQuery == 'undefined') {  
      setTimeout(function() {
         checkLoaded();
      }, 50);
   } else {
      doStuff();
   }
}

checkLoaded();
</script>

如何保证jQuery $被初始化？

2 个答案: