ready次の理由から、jQueryメソッドの外部で関数を定義する必要があると思います。
- 関数定義コードは「パッシブ」コードです。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」の3番目の呼び出しもreadyイベントの外部にありますが、コンソールにアンカー要素の配列を記録します。これは、関数呼び出しの配置によって関数の動作が変わる可能性があることを意味します。最初の呼び出しでは、明らかにアンカータグがページに存在していなかったため、関数はを返しますundefined。次に、ページの最初と最後に配置された2番目と4番目の呼び出しは、両方とも配列をログに記録します。この場合、関数呼び出しの配置によって関数の動作が変わることはありません。これは、関数が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>]
ログの順序を見てください：1、3、2、4; これはソースの順序とは異なります：1、2、3、4。関数はready、ページの読み込みが完了するまで遅延されています。