我认为你应该在 jQuery ready 方法之外定义你的函数，因为：
- 函数定义代码是一个“被动”代码：它不需要运行 DOM
- 如果你想在
ready事件之前使用你的函数，如果函数是在事件内部定义的，你就不能这样做，
- jQuery
ready 方法应该只在真正需要的时候使用，这意味着当你*真的必须等待 DOM 准备好时
有关信息，这里有一个我每次都使用的简化但常见的 HTML 页面模式，它工作得很好：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<!-- your CSS code -->
<link rel="stylesheet" href="/path/to/file.css">
</head>
<body>
<!-- your HTML elements -->
<!-- all your scripts elements at the bottom -->
<!-- load jQuery from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- load all your "passive" code that defines custom or vendor jQuery plugins -->
<script src="jquery.plugins.js"></script>
<!-- load all your "active" code -->
<script src="yourcode.js"></script>
</body>
</html>
jquery.plugins.js 文件可能包含您提供的内容：
// define all jQuery plugin, aka "passive" code
// "passive" means it won't affect the page
$.fn.jQueryExample = function(){
//Do something
};
$.fn.somePlugin = function(){
// Do something
};
// you could define vanilla JavaScript functions in a separated file if you want
function nativeExample(a, b)
{
return a + b;
}
文件yourcode.js 可能是：
// place here all "active" code
// by "active" code I mean all code that will interact/alter/modify your page
$(function(){
$('select').jQueryExample();
nativeExample();
});
关于您的编辑，您的问题what would happen as opposed to having it defined outside but called inside document ready 没有通用答案。看这个例子：
<!-- basic html setup -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// placing <script> tag in the <head> tag is considered as a bad practice
// I use it for the example but you should not do the same in real code
// define your functionsin the <head> tag
function getFoo() {
return "foo";
}
function getAnchor() {
return document.getElementsByTagName('a');
}
</script>
<script>
// reference: ONE
// call your function in the <head> tag
console.log( "one", getFoo() ); // "foo"
console.log( "one", getAnchor() ); // empty array
</script>
<script>
// reference: TWO
$(document).ready(function(){
// call your function inside the jQuery 'ready' event
console.log( "two", getFoo() ); // "foo"
console.log( "two", getAnchor() ); // array with one element
});
</script>
</head>
<body>
<a href="www.example.com">bar</a>
<script>
// reference: THREE
// call your function at the end of the <body> tag
console.log( "three", getFoo() ); // "foo"
console.log("three", getAnchor() ); // array with one element
</script>
<script>
// reference: FOUR
$(document).ready(function(){
// call your function inside the jQuery 'ready' event
console.log( "four", getFoo() ); // "foo"
console.log( "four", getAnchor() ); // array with one element
});
</script>
</body>
</html>
getFoo 函数不需要 DOM 来工作。因此，它的 4 次调用总是返回 'foo'，因此无论何时何地调用她（在 'ready' 事件内部或外部），该函数都可以工作。
函数getAnchor查询DOM并返回页面中锚标记的集合。脚本“ONE”中的第一个调用位于ready 事件之外并返回未定义。第三次调用，在脚本“THREE”中，也在ready 事件之外但它在控制台中记录了一组锚元素。这意味着，函数调用的位置可以改变函数的行为。在第一次调用中，显然页面中没有锚标记，这就是函数返回undefined 的原因。然后，放置在页面开头和结尾的第二次调用和第四次调用都记录了一个数组。在这种情况下，函数调用的位置不会改变函数的行为，因为函数 getAnchor 实际上是在所有 DOM 元素都加载后调用的。如果您查看控制台日志，您会看到如下内容：
one foo
one []
three foo
three [<a href="www.example.com">bar</a>]
two foo
two [<a href="www.example.com">bar</a>]
four foo
four [<a href="www.example.com">bar</a>]
看日志顺序：一、三、二、四；这与源顺序不同：一、二、三、四。函数是ready 一直延迟到页面加载完成。