26

現在、多数の JS ファイルを管理しており、依存関係の問題が頭を悩ませています。現在、各関数を個別のファイルに格納し、データベースを手動で維持して関数間の依存関係を解決しています。

これは自動化したい。たとえば、関数 f がある場合

Array.prototype.f = function() {};

別の関数 g で参照されている

MyObject.g = function() {
    var a = new Array();
    a.f();
};

g が f を参照していることを検出できるようにしたい。

どうすればいいですか？どこから始めればよいですか？実際にコンパイラを作成する必要がありますか?それとも、たとえば Spidermonkey を微調整できますか? 他の誰かがすでにこれを行っていますか？

私を始めるための指針は非常に高く評価されています

ありがとうドック

4

6 に答える 6

18

の使用など、他のファイルで定義されたグローバルの使用を検出する静的分析ツールを理論的に作成することはできましたが、拡張メソッドMyObjectの使用を現実的に追跡することはできませんでした。prototype

JavaScript は動的に型付けされる言語であるため、 が関数aから渡された場合、 が であることをツールが認識する実用的な方法はなく、 が呼び出された場合は依存関係があります。どの変数がどの型を保持しているかは実行時に決定されるだけなので、それを調べるにはインタープリターが必要で、チューリング完全な問題を自分で作成してしまいます。gArrayf()

eval角括弧表記によるプロパティのフェッチ、dreaded 、タイムアウトまたはイベント ハンドラー属性の文字列など、JavaScript のその他の動的な側面は、静的分析を完全に否定するものであることは言うまでもありません。

私はそれが本当に初心者のビットだと思います。依存関係を手動で追跡する方がよいかもしれませんが、依存関係追跡の基本単位となるモジュールに関連する関数をグループ化することで単純化します。OK、技術的に必要な関数をいくつか追加しますが、多すぎないことを願っています。

また、各モジュールに名前空間を設定することをお勧めします。これにより、各呼び出しがどこに行くのかが非常に明確になり、依存関係を手動で制御しやすくなります (たとえば// uses: ThisModule, ThatModule、上部のコメントによって)。

組み込みのプロトタイプの拡張は追跡が難しいため、最小限に抑えてください。拡張など。ArrayECMAScript 第 5 版メソッド ( などindexOf) をまだ持っていないブラウザーに含めることは、すべてのスクリプトが使用する基本的な修正として行うのに適しています。まったく新しい任意の機能を既存のプロトタイプに追加することには疑問があります。

于 2010-07-08T10:40:53.927 に答える
10

RequireJSやLabJSなどの依存関係マネージャーを使用してみましたか? このスレッドで誰も言及していないことに気付きました。

http://requirejs.org/docs/start.htmlから:

main.js 内では、require() を使用して、実行する必要がある他のスクリプトをロードできます。

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

これらの依存関係をネストすることもできるため、helper/util はそれ自体の中に他のファイルを要求できます。

于 2012-02-21T22:10:37.233 に答える
8

@bobince がすでに示唆しているように、JavaScript プログラムで静的解析を行うことは、ほぼ不可能に近い問題です。Google Closure コンパイラはある程度それを行いますが、JSDocコメントからの外部ヘルプにも依存しています。

以前のプロジェクトで、JS ファイルを連結する順序を見つけるという同様の問題がありました。大量の JS ファイルがあったため、包含順序を手動で更新するのは面倒に思えました。代わりに、目的のために依存関係を構成するものの特定の規則に固執し、それに基づいて単純な正規表現を使用しました:)正しい包含順序を生成することができました。

このソリューションでは、トポロジカル ソートアルゴリズムを使用して依存関係グラフを生成し、すべての依存関係を満たすためにファイルを含める順序でリストしました。各ファイルは基本的にMooTools構文を使用した疑似クラスであるため、私の状況で依存関係を作成する方法は 3 つしかありませんでした。

  1. クラスが他のクラスを拡張したとき。
  2. クラスが他のクラスを実装したとき。
  3. newクラスがキーワードを使用して他のクラスのオブジェクトをインスタンス化したとき。

これはシンプルで、一般的な用途では間違いなく壊れたソリューションでしたが、私にはうまく機能しました。このソリューションに興味がある場合は、ここでコードを確認できます。コードは Ruby で書かれています。

依存関係がより複雑な場合は、次のようなコメントと独自の構文を使用して、各 JS ファイル自体の依存関係を手動でリストすることができます。

// requires: Array
// requires: view/TabPanel
// requires: view/TabBar

次に、各 JS ファイルを読み取り、require コメントを解析して、必要な包含順序を示す依存関係グラフを作成します。

于 2010-07-09T02:51:01.347 に答える
5

これらの依存関係を自動的に検出し、ロード方法を選択できるツールがあれば便利です。ただし、今日の最良のソリューションは少し粗雑です。リストに追加したい特定のニーズに合わせて依存関係マネージャーを作成しました ( Pyramid Dependency Manager )。いくつかのユニークなユースケースを解決するいくつかの重要な機能があります。

  1. 他のファイルを処理します (ビューの html の挿入を含む...はい、開発中にビューを分離できます)
  2. リリースの準備ができたら、javascript でファイルを結合します (外部ツールをインストールする必要はありません)。
  3. すべての html ページの汎用インクルードがあります。依存関係が追加、削除、名前変更などされたときに、1 つのファイルを更新するだけで済みます。

開発中にどのように動作するかを示すサンプルコード。

ファイル: dependencyLoader.js

//Set up file dependencies
Pyramid.newDependency({
    name: 'standard',
    files: [
    'standardResources/jquery.1.6.1.min.js'
    ]
});

Pyramid.newDependency({
name:'lookAndFeel',
files: [
    'styles.css',
    'customStyles.css',
    'applyStyles.js'
    ]
});

Pyramid.newDependency({
name:'main',
files: [
    'createNamespace.js',
    'views/buttonView.view', //contains just html code for a jquery.tmpl template
    'models/person.js',
    'init.js'
    ],
    dependencies: ['standard','lookAndFeel']
});

HTML ファイル

<head>
    <script src="standardResources/pyramid-1.0.1.js"></script>
    <script src="dependencyLoader.js"></script>
    <script type="text/javascript">
        Pyramid.load('main');
    </script>
</head>

依存関係を管理するために単一のファイルを維持する必要があります。ヘッダーのインクルードに基づいてローダー ファイルを自動的に生成できるプログラムを作成することを考えていますが、さまざまな種類の依存関係を処理するため、それらを 1 つのファイルに保持する方が実際には良いかもしれません。

于 2011-08-16T10:44:10.480 に答える
1

JSAnalyse は静的コード分析を使用して、javascript ファイル間の依存関係を検出します: http://jsanalyse.codeplex.com/

また、許可された依存関係を定義し、ビルド中にそれを確認することもできます。もちろん、前述のように、javascript は型安全ではない動的インタープリター言語であるため、すべての依存関係を検出することはできません。しかし、少なくとも JavaScript の依存関係グラフを認識し、管理下に置くのに役立ちます。

于 2011-11-29T19:20:48.843 に答える
0

次のようなことを行うツールを作成しました: http://github.com/damonsmith/js-class-loader

これは、Java Web アプリケーションがあり、JS コードを Java スタイルで構成している場合に最も役立ちます。これを行うと、コードの依存関係をすべて検出してバンドルし、実行時と解析時の両方の依存関係をサポートできます。

于 2013-10-03T05:27:03.823 に答える