如何在JavaScript文件中包含库？

Question

另一方面，将HTML页与JavaScript实现分开，我为我的网站上的每组功能创建了不同的.js文件。 如果我打算从HTML页实施JavaScript，我会做：

<script type="text/javascript" src="path/to/javascript/jquery.qtip.js"></script> 

不过，我将如何去在包括该库，jquery.qtip.js成.js文件，像 heatmap.js？ 我问是因为我从萤火虫发现了以下错误：

TypeError: $("mytable td").qtip is not a function 
[Break On This Error] 

style : 'ui-tooltip-tipsy ui-tooltip-shadow' 

如果我是在Java中，我将包括一个外部库或类为：

import java.util.* 

是否有类似的方式在JavaScript中？

function heatmap() 
{ 
    var input = document.getElementById("heatmap").value; 

    // TAKE THE HEATMAP HTML OBJECT AND MAKE A POST TO THE BACKEND 
    $("#heatmap").empty().html(baseurl + "/images/loader.gif/>"); 
    $.post(baseurl + "index.php/heatmap/getMatrix", 
     { 
      input : input.toString() 
     }, 

     function(answer){ 
      var list = eval('(' + answer + ')'); 
      var temp = list.split(" "); 
      makeTable(temp); 

      $(document).ready(function(){ 
       $('mytable td').qtip({ 
       overwrite : false,  // make sure it can' be overwritten 
       content : { 
        text : function(api){ 
        var msg = "Interaction: " + $(this).html(); 
        return msg; 
        } 
       }, 
       position : { 
        my : 'top left', 
        target : 'mouse', 
        viewport : $(window), // keep it on screen at all time is possible 
        adjust : { 
        x : 10, y : 10 
        } 
       }, 

       hide : { 
        fixed : true  // helps to prevent the tooltip 
       }, 
       style : 'ui-tooltip-tipsy ui-tooltip-shadow' 
       }); 
      }); 
     }); 

} 

** * ** * ** * * ADDING MAKETABLE功能* ** * ** * ** * *

function makeTable(data) 
{ 
    var row = new Array(); 
    var cell = new Array(); 

    var row_num = 18; 
    var cell_num = 16; 

    var tab = document.createElement('table'); 
    tab.setAttribute('id', 'mytable'); 
    tab.border = '1px'; 

    var tbo = document.createElement('tbody'); 

    for(var i = 0; i < row_num; i++){ 
      row[i] = document.createElement('tr'); 

      var upper = (i+1)*16; 
      var lower = i*16; 
      for(var j = lower; j < upper; j++){ 
       cell[j] = document.createElement('td'); 
       //cell[j].setAttribute('class', 'selector'); 
       if(data[j] != undefined){ 
        var index = Math.round(parseFloat(data[j])*100)/100; 
        var count = document.createTextNode(index); 
        cell[j].appendChild(count); 

        /* specify which color better suits the heatmap */ 
        if(index <= -4){ 
         cell[j].style.backgroundColor = '#FF0000'; 
        } 
        else if(index > -4 && index <= -3.5){ 
         cell[j].style.backgroundColor = "#FF2200"; 
        } 
        else if(index > -3.5 && index <= -3.0){ 
         cell[j].style.backgroundColor = "#FF2222"; 
        } 
        else if(index >= -3.0 && index < -2.5){ 
         cell[j].style.backgroundColor = "#FF3311"; 
        } 
        else if(index >= -2.5 && index < -2.0){ 
         cell[j].style.backgroundColor = "#FF5500"; 
        } 
        else if(index >= -2.0 && index < -1.5){ 
         cell[j].style.backgroundColor = "#FF8811"; 
        } 
        else if(index >= -1.5 && index < -1.0){ 
         cell[j].style.backgroundColor = "#FFAA22"; 
        } 
        else if(index >= -1.0 && index < -0.5){ 
         cell[j].style.backgroundColor = "#FFCC11"; 
        } 
        else if(index >= -0.5 && index < 0){ 
         cell[j].style.backgroundColor = "#FFCC00"; 
        } 
        else if(index == 0){ 
         cell[j].style.backgroundColor = "#000000"; 
        } 
        else if(index > 0 && index < 0.5){ 
         cell[j].style.backgroundColor = "#FF8800"; 
        } 
        else if(index >= 0.5 && index < 1.0){ 
         cell[j].style.backgroundColor = "#FFBB00"; 
        } 
        else if(index >= 1.0 && index < 1.5){ 
         cell[j].style.backgroundColor = "#FFFF00"; 
        } 
        else if(index >= 1.5 && index < 2.0){ 
         cell[j].style.backgroundColor = "#00CC00"; 
        } 
        else if(index >= 2.0 && index < 2.5){ 
         cell[j].style.backgroundColor = "#008800"; 
        } 
        else if(index >= 2.5 && index < 3.0){ 
         cell[j].style.backgroundColor = "#006600"; 
        } 
        else if(index >= 3.0 && index < 3.5){ 
         cell[j].style.backgroundColor = "#004400"; 
        } 
        else{ 

        } 
        row[i].appendChild(cell[j]); 
       } 
      } 

      tbo.appendChild(row[i]); 
     } 

     tab.appendChild(tbo); 
     document.getElementById('mytable').appendChild(tab); 
} 

Answer 1

我认为你正在寻找一个脚本管理器，例如http://requirejs.org/

require(["jquery", "jquery.qtip.js", ...], function($) { 
    // do something when loaded 
}); 

Answer 2

你已经知道如何将其纳入与script标签.js文件，所以你有3种选择：

• 上述script标签;
• 在一个文件中压缩两个文件的源代码;
• 使用模块化装载机，如RequireJS。

有没有内置的功能，同时加载另一个脚本在JavaScript源，如停止脚本的执行简单的PHP的include/require或Java的import或C的include，因为JavaScript的脚本加载是异步的 - 的脚本按照您在页面中包含它们的顺序执行，但它们不会等待加载动态添加的脚本。

请注意，第一个和第三个选项会产生额外的HTTP请求，因此如果您的脚本始终需要这样的功能，您可以将其包含在脚本本身中以减少HTTP请求。但是，如果要保留.js文件并将其从另一个.js文件中导入，则最佳选择是RequireJS。另外，如果您使用的是jQuery，则可以使用$.getScript并在$.getScript的回调中运行其余代码。

---

由于您使用jQuery的问题，以下是在需要的时候动态地添加qtip .js并提供一个jQuery的唯一的解决办法：

if (!$().qtip) //if qtip is not included/loaded into the page yet 
    $.getScript('http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js', heatmap); 
else heatmap(); 

Fiddle

当然，你可以只需在DOM ready事件或页面中的任意位置直接使用$.getScript即可：

$(document).ready(function() { 
    $.getScript('http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js'); 
}); 

请注意，$.getScript将是异步的，因此您必须在其回调中包含依赖于此脚本的其余代码。有一些方法可以将其设置为同步ajax调用，但它可能会冻结/减慢加载页面的速度，因此强制它是同步的，这是不推荐的。

如果您需要包含许多.js文件，RequireJS是一个更好的选择。