如何在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是更好的选择。