4

私は、急速にサイズが大きくなっている新しい JavaScript アプリケーションを開発しています。

私の JavaScript アプリケーション全体は、次のような方法で、単一のファイル内の単一の関数内にカプセル化されています。

(function(){  
   var uniqueApplication = window.uniqueApplication = function(opts){
      if (opts.featureOne)
      {
         this.featureOne = new featureOne(opts.featureOne);
      }
      if (opts.featureTwo)
      {
         this.featureTwo = new featureTwo(opts.featureTwo);
      }
      if (opts.featureThree)
      {
         this.featureThree = new featureThree(opts.featureThree);
      }
   };

   var featureOne = function(options)
   {
       this.options = options;
   };
   featureOne.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureTwo = function(options)
   {
       this.options = options;
   };
   featureTwo.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };

   var featureThree = function(options)
   {
       this.options = options;
   };
   featureThree.prototype.myFeatureBehavior = function()
   {
       //Lots of Behaviors
   };
})();

匿名関数と実行後の同じファイルで、次のようなことを行います。

(function(){
   var instanceOfApplication = new uniqueApplication({
       featureOne:"dataSource",
       featureTwo:"drawingCanvas",
       featureThree:3540
   });
 })();

このソフトウェアをオンラインにアップロードする前に、JavaScript ファイルとそのすべての依存関係を、デフォルトの Compression だけを使用して Google Closure Compiler に渡します。これで、1 つの素敵な JavaScript ファイルをオンラインで運用できるようになります。

この手法は、DOM 内に 1 つのグローバル フットプリントしか作成せず、アプリケーションの各追加機能を拡張するための非常に柔軟なフレームワークを提供してくれたので、私にとっては非常にうまく機能しました。ただし、このアプリケーション全体を 1 つの JavaScript ファイル内に保持したくないという点に到達しています。

開発中に 1 つの大きな uniqueApplication.js ファイルを使用することから、アプリケーションの機能ごとに個別のファイル (featureOne.js - featureTwo.js - featureThree.js) を使用するように移行したいと考えています。

オフラインでの開発テストが完了したら、Google Closure Compiler などの何かを使用して、これらのファイルをすべて結合したいと考えていますが、これらのファイルをすべてそのスコープ内でコンパイルしたいと考えています。 1 つのファイル内 - オフライン テスト中も同じスコープにとどめておきたいと思います。

Google Closure Compiler はモジュールを渡すための引数をサポートしていることがわかりますが、このようなことを行うことに関する多くの情報を実際に見つけることができませんでした。

これをどのように達成できるか、またはDOMに1つのフットプリントしか残さない複数のファイルにまたがる単一のJavaScriptライブラリを作成するための開発プラクティスに関する提案はありますか?

4

3 に答える 3

2

jQuery githubには、あなたが話しているものと同様の設定があります。google クロージャ コンパイラを使用するMakefile/アリbuild.xmlさえあります。

基本的な概念は、すべてのものを別々のファイルで開発し、cat(または同様のものを使用して) すべてのファイルをまとめることです。

 cat intro.js core.js featureOne.js featureTwo.js featureThree.js outro.js > build/script.js

intro.jsjQuery 内およびjQuery からのコードoutro.js:

 // intro.js
 (function(window, undefined) {

 // outro.js
 })(window);
于 2010-05-26T21:43:11.123 に答える
2

このライブラリがどのように構築されているかを見てみましょう
http://github.com/oyvindkinsey/easyXDM

ファイルは分離されていますが、一緒にマージされ、クロージャに配置され、ant スクリプト (build.xml) によってjslintを介して実行されます。

Ant スクリプトは、条件付きの「コンパイル」、文字列の置換、縮小も行います。

于 2010-05-26T21:41:00.270 に答える
0

コード ベースを AMD/RequireJS スタイルのモジュールに分割することをお勧めします。

AMD 形式は、ほとんどの要件を満たしているようで、急速にデファクト スタンダードになりつつあります。

于 2011-03-10T13:26:43.587 に答える