我认为你应该在 jQueryready方法之外定义你的函数，因为：
- 函数定义代码是一个“被动”代码：它不需要 DOM 是 runt
- 如果你想在事件之前使用你的函数
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一直延迟到页面加载完成。