为什么函数（文档）在单独的文件中不起作用？

Question

我有一个HTML文件，它包含JavaScript代码并且工作正常，但是当我决定将JS代码放在不同的文件中并从HTML文件中调用时，它不起作用。为什么呢？

JS代码是这样的：

(function (document) {
    var toggleDocumentationMenu = function () {
        var navBtn = document.querySelector('.main-nav1');
        var navList = document.querySelector('.main-nav2');
        var navIsOpenedClass = 'nav-is-opened';
        var navListIsOpened = false;
        navBtn.addEventListener('click', function (event) {
            event.preventDefault();
            if (!navListIsOpened) {
                addClass(navList, navIsOpenedClass);
                navListIsOpened = true;
            } else {
                removeClass(navList, navIsOpenedClass);
                navListIsOpened = false;
            }
        });
    };
    var toggleMainNav = function () {
        var documentationItem = document.querySelector('.main-nav3');
        var documentationLink = document.querySelector('.main-nav3 > .main-sub-nav');
        var documentationIsOpenedClass = 'subnav-is-opened';
        var documentationIsOpened = false;
        if (documentationLink) {
            documentationLink.addEventListener('click', function (event) {
                event.preventDefault();
                if (!documentationIsOpened) {
                    documentationIsOpened = true;
                    addClass(documentationItem, documentationIsOpenedClass);
                } else {
                    documentationIsOpened = false;
                    removeClass(documentationItem, documentationIsOpenedClass);
                }
            });
        }
    };
    var isTouch = function () {
        return ('ontouchstart' in window) ||
            window.DocumentTouch && document instanceof DocumentTouch;
    };
    var addClass = function (element, className) {
        if (!element) {
            return;
        }
        element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
    };
    var removeClass = function (element, className) {
        if (!element) {
            return;
        }
        element.className = element.className.replace(className, '');
    };
    toggleDocumentationMenu();
    toggleMainNav();
})(document);

如果我这样说的话，我认为可能有效：

$(document).ready(function() {

    // the javascript code here

});

但它仍然无法正常工作。

现在我想知道，这个代码可以在单独的文件中正常工作吗？