3

現在、任意のHTML5Canvas要素コンテキストにアタッチして相互作用できるJSライブラリを構築しています。

ただし、プロジェクトは大量のファイルと数千行のコードで広範になり始めています。各ファイルは、異なるオブジェクト/モジュールを表します。現在、各ファイルは次のようにレイアウトされています。このスタイルの類似性を維持したいと思います。

Object = function() { 
    // constructor
}

Object.prototype.method1 = function() {
    // Logic
}

Object.prototype.method2 = function() {}; // .... etc

また、HTMLの開発バージョンには、（依存関係のために）正確な順序である必要があるbajillionスクリプトタグ（ファイルごとに1つ）があります。これは非常に非効率的であり、保守性が低いことを認識しています。しかし、プロジェクトの構築と保守を容易にするために、どの方向に進むのが最善かはわかりません。ツールとCommonJSモジュールシステムの利便性のためにNodeJSに移植しますか？RequireJSに変換しますか？Gruntについて読み始めたばかりですが、それは私の状況に役立ちますか？

組織を改善することと、ある種のビルドシステムを導入することは、どちらも私がしばらく延期してきたことです。そして、私は今それを後悔していますか？

4

2 に答える 2

2

モジュールシステムが必要です。

ここでは、RequireJS オプティマイザーを使用した RequireJS が標準的なソリューションです。Node.js に傾倒している場合はbrowserifyを使用できます。また、AMD クラフト ( define(function (require, exports, module) { ... });)が嫌いな場合は RequireJS オプティマイザーの cjsTranslate 機能を使用できます。開発中のCajonと組み合わせて使用​​することもできます。

Grunt のようなビルド ツールは、ここで最も重要な要素ではありません。これは主に、複数のビルド手順がある場合に役立ちます。たとえば、RequireJS オプティマイザーを実行し、SASS を未加工の CSS にコンパイルし、CSS を連結し、画像をスプライトに変換する、などです。

于 2013-02-05T23:29:11.640 に答える
0

これらのタグごと<script>に、ブラウザーはもう 1 つの HTTP 要求を作成する必要があることに注意してください。キャッシュから読み込まれている場合でも、ブラウザーはファイルが変更されているかどうかをサーバーに問い合わせる必要があります。

この PHP スクリプトのような小さなプログラムを作成して、すべての .js ファイルを 1 つに結合することをお勧めします。

<?php
function loop($dir="./") {
    $ret = Array();
    foreach(glob($dir."*",GLOB_ONLYDIR) as $d) $ret = array_merge($ret,loop($d));
    foreach(glob($dir."*.js") as $f) $ret[] = $f;
    return $ret;
}
$out = fopen("__main.js","w");
foreach(loop() as $file) {
    if( $file == "./__main.js") continue; // don't include "main" script
    fwrite($out,file_get_contents($file));
}
fclose($out);
?>

<script>これで、そのファイルを指す1 つのタグを持つだけ__main.jsで、すべてのスクリプトがそこに配置されます。

スクリプトを特定の順序にする必要がある場合は、何か間違ったことをしています。これらのファイルでのみオブジェクトを定義している場合、参照はメソッド内にある必要があるため、他のファイルに依存するべきではありません (initたとえば、メソッドの使用を検討してください)。

于 2013-02-05T23:24:05.810 に答える