如何在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是一個更好的選擇。