调用javascript处理程序的正确方法

我有一个巨大的JS文件，想将其分割，例如，我有一个：

page.html

上面的代码运行良好，但我想在另一个js文件中具体化单击处理程序。我试过这个：

example.js新增

externalHandlers.js

但浏览器控制台显示错误

ReferenceError:未定义handlerFunction

TypeError：有些东西不是构造函数

我怎么能做我想做的事？有可能吗？

确保externalHandlers首先运行，以便在example.js运行时定义handlerFunction，这样example.js就可以正确引用handlerFunction而不会出错，并正确定义某些内容：

<script src="externalHandlers.js"></script>
<script src="example.js"></script>

请尝试此代码

<script type="text/javascript" src="externalHandlers.js"></script>
<script type="text/javascript" src="example.js"></script>
<script>
    $(document).ready(function(){
         var something = new Something('someValue');
     });
</script>

---

你应该会遇到另一个错误，handlerFunction没有定义，这是第二个错误的来源，你看到的是吗？是的，我没有看到，第一个错误是handlerFunction没有定义IILife内的原型？是否有必要？？？@brk这是一种足够常见的封装模式您确定在两个文件中使用相同的函数名吗？确保脚本实际按照所需的顺序运行，如果它们像answerFinally works中那样设置，那么它们应该按照所需的顺序运行，而不是使用处理程序的正常函数我使用另一个IIFE并在初始化器中初始化它。我以前试过这个，但现在你的答案起作用了。感谢$document.ready的放置不会对OP面临的问题产生任何影响。

var Something = (function (document) {
    "use strict";
    var Something = function(x){
        //initialize some stuff
    };
    Something.prototype.func1 = function(){
        //do things
    }

    Something.prototype.func2 = function(){
        //do things
    }

    //more funcs
    $(document).on('click', 'a.some-class', handlerFunction);

    $(document).on('click', 'a.some-class-2', function (e) {
        //do things when click
    });

    return Something;    

})(document);

function handlerFunction(){
    //do some stuff
}

<script src="externalHandlers.js"></script>
<script src="example.js"></script>

<script type="text/javascript" src="externalHandlers.js"></script>
<script type="text/javascript" src="example.js"></script>
<script>
    $(document).ready(function(){
         var something = new Something('someValue');
     });
</script>