特定の順序でファイルを含める必要なく、プロトタイプ継承をどのように活用しますか?
-
07-07-2019 - |
質問
JavaScriptを開発するとき、JavaScriptコードを異なるファイルに分離し、スクリプトを実行してファイルを連結し、結果のファイルを圧縮またはパックする傾向があります。最後に、実稼働サイトに含める必要があるファイルが1つあります。
このアプローチは通常は機能していますが、プロトタイプの継承に関する問題に遭遇し始めました。具体的には、あるクラスが別のクラスから継承する場合、継承が機能するためには、親クラスのファイルがすでに含まれている必要があります。使用している連結スクリプトが単にファイルでいっぱいのディレクトリを連結している場合、子クラスは親クラスの前のコードで発生する可能性があります。このように:
parent_class.js
var Namespace = Namespace || {};
Namespace.Parent = function () { };
Namespace.Parent.prototype.doStuff = function () { ... };
child_class.js
var NameSpace = Namespace || {};
Namespace.Child = function () { ... };
Namespace.Child.prototype = new Namespace.Parent();
これが機能する唯一の方法は、child_class.jsの前にparent_class.jsが含まれている場合です。これは、連結スクリプトが親コードの前に子コードを配置する場合には発生しません。
機能が同じになるようにこのコードを記述する方法はありますが、コードの記述順序は重要ではなくなりました。
編集:名前空間も使用していることを忘れていたので、コードにも追加しました。これにより、少し変更される可能性があります。
解決
使用している連結スクリプトがファイルでいっぱいのディレクトリを単純に連結している場合、親クラスの前のコードで子クラスが発生する可能性があります。
各ファイル名にソート順の値を追加し、操作を実行する前に名前でソートするのは簡単すぎる解決策ですか?
eg:
01_parent.js
02_child.js
それ以外の場合は、事前にリストされたファイルのリストを別のファイルに保持する可能性があります。さらに一歩進んで、xmlに階層的な依存関係構造を提供して解析することもできますか?これは少しソリューションを過剰に設計している可能性があります:-D
javascriptファイルの記述方法を決定する方法がなかった場合、問題に対処する方法のいくつかのオプション。
他のヒント
大規模なアプリに取り組んだとき、 requireJS を使用してコードをモジュールに分割し、これらのモジュールは正しい順序でロードされます。次に、派生クラスを親クラスに依存するものとしてマークします。
RequireJSには、実稼働展開のためにすべてのモジュールを組み合わせて縮小するツールが付属しています。
次のような本当にハック的なことができると思います:
setTimeout(function() {
if(typeof(Parent) != "undefined" && typeof(Child) != "undefined") {
Child.prototype = new Parent();
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
そのコードはどこにでもある可能性があり、 Parent
と Child
の両方がロードされるまで継続的に実行されます...しかし、私はそうしません。
個人的には、ファイルが正しい順序で結合されていることを確認するだけです。
オブジェクトが「名前空間付き」の場合次に、順序どおりの連結を組み込むビルドソリューションに切り替えるか、 dojo.require (ただし、明らかにdojo固有ではありません)。基本的に、特定の識別子が利用可能かどうかを確認し、実行されない場合は実行を一時停止し、(評価されたajaxまたは挿入されたスクリプトタグを介して)含める機能を提供するフレームワークが必要です。