web-dev-qa-db-ja.com

jqueryドキュメントの内部または外部の関数の準備

これまで、特定のユーザーインタラクションで使用される単純な関数を含め、jQueryのすべての長所を$(document).ready()関数内に配置しました。

ただし、DOMドキュメントのロードを必要としない関数、またはとにかく後で呼び出される関数は、$(document).ready()の外側にも配置できます。たとえば、次のような非常に単純な検証関数を考えます。

_function hexvalidate(color) {
// Validates 3-digit or 6-digit hex color codes 
 var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
 return reg.test(color);
}
_

ただし、この関数は$(document).ready()関数内からのみ呼び出されます。

ベストプラクティスとは（構文、速度）。そのような関数を置くinsideまたはoutside jquery document ready function？

javascriptjqueryfunctionscope
58
Hans

グローバルネームスペースを汚染しないように、insideにしてください。また、JavaScriptのスコープチェーンにより、関数名のより高速な解決が保証されます。

再利用可能なコンポーネントの場合は、outsideにして、別のファイルに簡単に移動し、異なるコンテキストから呼び出すことができるようにします。

既にJQueryを使用しているので、言及する価値はあります。あなたの場合、hexvalidateを JQueryプラグインoutsideその後、それを呼び出しますinside。

72
Török Gábor

そもそも「単なる機能」を使用すべきではないと思います。 OOP javascriptでは、「関数」は通常4つの異なるタイプのいずれかに属します。

  • コンストラクターまたは匿名の 'init'クロージャー-オブジェクトの構築に使用されます。グローバルにすることが許可されている関数の唯一のタイプ
  • メソッド-オブジェクトの一部である機能
  • ユーティリティ-コンストラクター/メソッドの内部関数、外部からは見えない
  • 定数-パラメーターとして渡される機能定数

例えば.

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

              foobar: function() { <- method 
                  xyz.replace(/.../, function() { <- constant })

              }
        }
  )()

あなたの例では、「hexvalidate」は明らかにValidatorオブジェクトの一部であり、jQueryプラグインにすることができます。

   (function($) {
        $.validate = {
            hexColor: function(color) { ... your code }
            more validators...
        }
     )(jQuery)
10
user187291

これらの関数をドキュメント準備関数内に配置する利点の1つは、グローバル名前空間を汚染しないことです。ページの別の場所で必要な場合は使用できないという欠点もあります。

8
Ty W

すべての関数がjQuery(function () { })ブロック内からのみ呼び出される場合は、それらをその中に配置します。そうしないと、グローバル名前空間を不必要に汚染することになり、将来の競合につながる可能性があります。

他のスコープ内のコードでも使用される関数のみをグローバルに宣言します。

4
deceze

$（document）.ready（）関数のスコープ外で呼び出す必要がある関数を作成している場合は、$（document）.ready（）関数の外側に保持します。

それ以外の場合は、内部に保持します。

4
Justin Niessner