如何在JavaScript文件中包含庫？

Question

除了將HTML頁面與JavaScript實現分開之外，我還為網站上的.js功能創建了不同的.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' 
                });
            });
        });

}

** * ** * ** * *添加可修改的功能* ** * ** * ** * *

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，因此這是一個僅jQuery的解決方案，用於在需要時動態添加qtip .js並提供：

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();

小提琴

當然，您可以直接在DOM ready事件中或頁面中的任何位置直接使用$.getScript ：

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

注意$.getScript將是異步的，因此您必須將依賴於此腳本的其余代碼包裝在其回調中。 有多種方法可以將其設置為同步ajax調用，但是它可能會凍結/減慢頁面的加載速度，因此建議不要強制頁面同步。

如果您需要包含許多.js文件，則RequireJS是更好的選擇。