JavaScript HTML 加载两个脚本

Question

因此，我正在为学校的一个项目创建一个网站，并保持简单，我想做的就是能够在同一页面加载两个脚本。我已经搜索了很多，但找不到直接的答案。我读到我可能必须使用 window.onload 两次或类似的东西。它们单独工作，但不能同时工作，它总是使用第二个脚本。

第一个脚本是我的表的排序脚本:

      function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};

然后是第二个脚本，它在滚动时带一个 div:

window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
  }

  window.onscroll = function() {
    var box = document.getElementById('box'),
        scroll = getScrollTop();

    if (scroll <= 355) {
      box.style.top = "365px";
    }
    else if (scroll >= 862) {
        box.style.top = "892px";
    }
    else {
      box.style.top = (scroll + 10) + "px";
    }
  };

};

我这样做的目的不仅是为了让它看起来更好，而且如果我再次遇到它，我可以学习如何使用多个 JavaScript，并且稍后我可能会学习更高级的脚本，现在我正在寻找一种方法让这个工作正常进行，提前感谢您给我的任何提示和建议。

(也不要犹豫，就我的问题布局提出建议，我确实打算在今年夏天经常使用这个论坛或其他论坛，所以如果我以正确的方式做的话会很好)

Answer 1

AddEventListener 可能是一个好方法(根据@Teemu)。将 onload 放在脚本标签内似乎也不错(根据 @agmcleod)。

由于您似乎从 javascript 等开始，我想提出另一种组织代码的方法:

// make it tableHandler.js
var tableHandler = {
    sortTable: function sortTable(table, col, reverse) {
        var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
            tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
            i;
        reverse = -((+reverse) || -1);
        tr = tr.sort(function (a, b) { // sort rows
            return reverse // `-1 *` if want opposite order
                * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                    .localeCompare(b.cells[col].textContent.trim())
                );
        });
        for (i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
    },
    makeSortable: function makeSortable(table) {
        var th = table.tHead,
            i;
        th && (th = th.rows[0]) && (th = th.cells);
        if (th) i = th.length;
        else return; // if no `<thead>` then do nothing
        while (--i >= 0)(function (i) {
            var dir = 1;
            th[i].addEventListener('click', function () {
                this.sortTable(table, i, (dir = 1 - dir))
            });
        }(i));
    },
    makeAllSortable: function makeAllSortable(parent) {
        parent = parent || document.body;
        var t = parent.getElementsByTagName('table'),
            i = t.length;
        while (--i >= 0) this.makeSortable(t[i]);
    }
};

// make it scrollHandler.js
var scrollHandler = {
    getScrollTop: function getScrollTop() {
        if (typeof window.pageYOffset !== 'undefined') {
            // Most browsers
            return window.pageYOffset;
        }
        var d = document.documentElement;
        if (d.clientHeight) {
            // IE in standards mode
            return d.scrollTop;
        }
        // IE in quirks mode
        return document.body.scrollTop;
    },
    onscroll: function () {
        var box = document.getElementById('box'),
            scroll = this.getScrollTop();
        if (scroll <= 355) {
            box.style.top = "365px";
        } else if (scroll >= 862) {
            box.style.top = "892px";
        } else {
            box.style.top = (scroll + 10) + "px";
        }
    }
};

// make it a third script or put inside script tags
window.onload = function () {
    tableHandler.makeAllSortable();
    scrollHandler.getScrollTop();
}
window.onscroll = function () {
    scrollHandler.onscroll();
}

这里我们有两个对象，一个知道表格，另一个知道滚动。当窗口对象“告诉”他们加载事件(或滚动事件)发生时，他们就会做他们应该做的事情。

我本来打算做一个 fiddle 来看看它是否正常工作，但没有 HTML。不管怎样，我开始了: http://jsfiddle.net/slacktracer/LA5p7/2/

这只是实现这一目标的众多方法之一。不是最复杂的，但它提出了一些很好的概念。

但请记住，您必须以正确的顺序加载文件，因为当 window.onload 事件发生时，如果 tableHandler(或scrollHandler)变量不存在，您将收到 Uncaught ReferenceError: 为其中之一。 ;)

做这样的事情:

<script src="/scrollHandler.js"></script>
<script src="/tableHandler.js"></script>
<script src="/theOneWithTheWindowEvents.js"></script>