問題タブ [module-pattern]

JavaScript をかなりよく理解し始めたと思っていましたが、明らかにそうではありませんでした。私の問題を例で説明しましょう。まず、次のモジュールを定義します。

次に、2 つのインスタンスを作成します。

ここで、カウンター変数を (公開されているため) 更新し、いくつかのアラートを実行します。ここまでは順調ですね。

では、最後に次のように言います。

これは私が理解していないビットです。このアラートが 0 になるのはなぜですか? 最初のアラートは 5 で、2 番目のアラートは 10 だと思っていました。

誰かが上記がどのように機能するかを説明したり、正しい方向に向けたりしていただければ幸いです。ありがとう

以下のコードでは、グローバル変数「myDiv」に jQuery 要素を割り当てています。しかし、「test()」関数内では、myDiv 変数が宣言されているようですが、定義されていないようです。何かを行う前に、もう一度 $('myDiv') を再割り当てする必要があります。

ただし、偽の変数 xyz には問題なく到達できるようです...

JavaScriptコードをいくつかのファイルに分割し、すべてモジュールパターンを使用しています（MyAppなどの1つのグローバル変数を新しい機能とメンバーで更新しています。

ファイルを1つに縮小し、スコープを損なうことはありませんか？

縮小したい例：

File1.js

File2.js

Crockford は deentityify メソッドにパターンを導入してモジュールを作成します。彼は次のように主張しています。

モジュール パターンは、関数スコープとクローズを利用して、バインドされたプライベートな関係を作成します。この例では、deentityify メソッドだけがエンティティ データ構造にアクセスできます。

彼のカスタム関数を削除するために蒸留すると、コードは次のようになると思います...

問題は、この追加の間接レイヤーが必要な理由がわからないことです。このコードは同等ではありませんか?

この人気のある記事 で説明されているように、「JavaScript モジュール パターン」に従う「モジュール」がたくさんあります。私の理解では、これらのモジュールは、さまざまな動作をきちんとした名前空間に集約する方法です。

しかし、引数を受け入れる一意のオブジェクト インスタンスを作成できるようにしたい場合はどうすればよいでしょうか。現状では、すべてのデータが共有/静的であるため、それはできません。私はこれを行うことができるようにしたい:

しばらく使っていたので、パターンの構造を変更することはできません。とてもうまく機能しています。非静的データで動作するいくつかの「クラス」をそれに投入できるように微調整したいだけです。

私は名前空間を持っています：Foo.Bar.Bazその中にQuxクラスがあります。これらは、明らかにするモジュールパターンを使用して定義されました。

Quux次に、別のファイルで、この名前空間にクラスを追加します。それ、どうやったら出来るの？上記と同じパターンを使用すると、一方が他方を上書きしていると思われるため、無視されます。

この方法でモジュールパターンで継承を実装しようとしています:

しかし、子のインスタンスから呼び出すことはできませんtest2()。

私が間違っているのは何ですか？

私は次のようにモジュールパターンを作成しました：

このコードでは、methAのみを呼び出しますmethB()。Aこれは、私が欲しいものであり、好きなものです。今私が抱えている問題-少なくとも最小限の労力で、痛みを伴わずに単体テストを行いたいと思います。

最初は簡単に戻ることthisができますが、間違っていました。オブジェクトを返しwindowます（誰かが理由を説明できますか？）。

2番目-オンラインのどこかで解決策を見つけました-このメソッドをリターンブロック内に含めるには：

このメソッドでは、次のようなメソッドを呼び出します。A.__exec('methA', arguments); これはほとんど私が望むものですが、かなり醜いです。私は、プライベートメソッドを明らかにするためだけに、本番コードで決して使用されないA.test.methA()場所を好みます。test

編集 私は人々が私に小さな部品の代わりに大きなものをテストするように言っているのを見ます。説明させてください。私の意見では、APIは、一連の内部関数ではなく、必要なメソッドのみを明らかにする必要があります。サイズが小さく機能が制限されているため、内部はテストがはるかに簡単で、全体をテストして、どの部分が間違っているかを推測できます。

私は間違っているかもしれませんが、オブジェクト自体からすべてのメソッドへの参照を返す方法を確認したいと思います:)。

• 通常、DOM のクエリは、$(document).ready().
• 以下の両方のオプションで、ウィジェットは$(document).ready().
• これでよろしいですか？jQuery 要素を初期化できますか (何も操作しない限り)、ready ハンドラーの外側でできますか?
• この Widget 定義全体を の中に入れたほうがよいでしょう$(document).ready()か?
• Widget.init()要素をクエリするまで待つ必要がありますか?
• 注: 私は JS デザイン パターンにまったく慣れていないので、何か不足している場合は注意してください。

オプション1

オプション2