2

为了将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' 
                });
            });
        });

}

** * ** * ** * *添加 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);
}
4

2 回答 2

0

我认为您正在寻找像http://requirejs.org/这样的脚本加载器

require(["jquery", "jquery.qtip.js", ...], function($) {
    // do something when loaded
});
于 2012-07-22T01:53:14.280 回答
0

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

  • 上述script标签；
  • 将两个文件的源压缩到一个文件中；
  • 使用模块化加载器，例如RequireJS。

include当您在 JavaScript 中加载另一个脚本的源代码（例如 PHP's /require或 Java'simport或 C's时，没有简单的内置函数可以暂停脚本的执行include，因为 JavaScript 的脚本加载是异步的——脚本按照您在页面，但他们不会等待加载动态添加的脚本。

请注意，第一个和第三个选项会发出额外的 HTTP 请求，因此如果您的脚本总是需要这样的功能，您可以将其包含在脚本本身中以减少 HTTP 请求。尽管如此，如果您想保持.js文件拆分并从另一个文件导入它们.js，最好的选择是RequireJS。

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

由于您使用的是 jQuery，因此这是一个仅 jQuery 的解决方案，用于.js在需要时动态添加 qtip 并提供：

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直接在 DOM 就绪事件内部或页面中的任何位置使用：

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

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

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

于 2012-07-22T01:57:10.057 回答