Question

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

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

但是，我如何将该库jquery.qtip.js包含在.js文件中，例如 heatmap.js？我问这是因为我从firebug得到以下错误：

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

您已经知道如何将.js个文件包含script个标记，因此您有3个选项：

上述script代码;
压缩两个文件＆＃39;源于一个文件;
使用RequireJS等模块化加载程序。

当您在JavaScript中加载另一个脚本来源（如PHP include / {{1}或者Java的require或C＆＃39; import，因为JavaScript的脚本加载是异步的 - 脚本按照您在页面中包含它们的顺序执行，但是他们不会等到加载动态添加的脚本。

请注意，第一个和第三个选项会产生额外的HTTP请求，因此如果您的脚本始终需要这样的功能，您可以将其包含在脚本本身中以减少HTTP请求。不过，如果您希望将include个文件拆分并从另一个.js文件导入，则最佳选择是RequireJS。

此外，如果您使用的是jQuery，则可以使用$.getScript并在.js的回调中运行其余代码。

由于您正在使用jQuery，这里是一个仅限jQuery的解决方案，用于在需要时动态添加qtip $.getScript并提供：

.js

<强> Fiddle

当然，您可以直接在DOM ready事件中或页面中的任何位置使用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();：

$.getScript

请注意$(document).ready(function() { $.getScript('http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js'); });将是异步的，因此您必须在其回调中包含依赖于此脚本的其余代码。有一些方法可以将其设置为同步ajax调用，但它可能会冻结/减慢页面的加载速度，因此强制它同步是不推荐的。

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

如何在JavaScript文件中包含库？

2 个答案: