11

私は現在、評価用のJavaScriptモジュール化アプローチを私の会社で準備しています。プロジェクトの「JavaScript ベスト プラクティス」を定義している最中です。モジュール化は中心的な問題の 1 つです。

これまでの私の調査から、2 つの主要なアプローチが明らかになりました。

それらの周りには膨大な数のローダー、プラグイン、ライブラリなどがあります。

それとは別にgoog.provide/ goog.requirefrom the Google Closure Libraryもあります。

検討すべきさらなるアプローチはありますか？私が見逃した重要な/関連する仕様はありますか?

簡単に言えば、私たちの要件は次のとおりです。

  • JavaScript コードを個別のファイルに構造化します。
  • 関連するモジュールをランタイムにロードします。
  • ...すべてのファイルをスクリプト タグとして含める必要はありません。
  • JavaScript ファイルのインデックスを維持するために必要であってはなりません。
  • 集約と縮小のサポート - 縮小/最適化された単一の JavaScript ファイルを構築して使用する機能。
  • モジュールをさまざまな組み合わせで使用できるようにする - モジュールのさまざまなサブセットを必要とするさまざまな Web ページ/クライアントが存在することがよくあります。
  • サポート ドキュメント (JSDoc 付き?)。
  • テストに適しています。
  • Web、クロスブラウザーに適しています。
  • 妥当な IDE サポート。

可能性:

  • ES6 モジュールに合わせます。
  • Node.js およびモバイル プラットフォーム (PhoneGap/Cordova など) に適しています。

回答からの新しい提案:

補足:

  • 問題は、どちらのアプローチが優れているかということではありません。
  • 特定のライブラリやツールを求めているのではなく、アプローチや仕様を求めています。
  • 特にオフサイトのリソースを求めているわけではありません。(これに SO タグがない場合、それを考慮するのはおそらく合理的ではありません。)
  • やなどのフレームワークに関するメモ。これは、この質問の枠組みにはあまり適していません。プロジェクトにフレームワーク (AngularJS であれ ExtJS であれ) が必要な場合、フレームワークはモジュール化 OOTB を提供する必要があるため、モジュール化の問題はほとんどありません。プロジェクトがフレームワークを必要としない場合、モジュール化のためにフレームワークを持ち込むのはやり過ぎです。これが、ライブラリ/ツールについて具体的に尋ねない理由の 1 つです。
4

7 に答える 7

1

systemJSを見てください:

仕様に準拠したユニバーサル モジュール ローダー - ES6 モジュール、AMD、CommonJS、およびグローバル スクリプトをロードします。

ES6 仕様のシステム ローダーの小さな拡張機能のコレクションとして設計されており、個別に適用することもできます。

フォーマットを自動的に検出することにより、任意のモジュール フォーマットをロードします。モジュールは、メタ構成でフォーマットを指定することもできます。AMD、CommonJS、および ES6 の循環参照処理の包括的かつ正確な複製を提供します。System.register フォームにコンパイルされた ES6 モジュールをプロダクション用にロードし、完全な循環参照のサポートを維持します。RequireJS スタイルのマップ、パス、バンドル、シム、およびプラグインをサポートします。パッケージのバージョンを追跡し、パッケージ バージョンの構文 (package@xyz、package^@xyz) を介して semver-compatibile リクエストを解決します。ローダー プラグインを使用すると、CSS、JSON、画像などのモジュール ネーミング システムを介してアセットをロードできます。ES6 モジュール ローダー ポリフィル (9KB) と連携するように設計されており、縮小および gzip された合計フットプリントは 16KB です。今後、ネイティブ実装により、ES6 Module Loader ポリフィルは不要になります。jQuery は DOM を提供するため、このライブラリは、ネイティブのシステム ローダーによって提供される矛盾や不足している実用的な機能をスムーズに処理できます。

IE8+ および NodeJS で実行されます。

lib の作成者である Guy Bedford は、優れたプレゼンターでもあります: systemJS presentation。

于 2014-11-26T11:43:40.903 に答える
1

RequireJS は、動的な JavaScript モジュールの読み込みを可能にし、コードをクリーンに保つため、優れたアプローチです。モジュール全体を縮小することもでき、実際には非常に高速に実行されます。また、シミングと呼ばれるものを使用して、ライブラリまたは任意の js ファイルの依存関係を指定して、ロードしようとするたびにすべての依存関係も従うようにすることができます。

于 2014-11-26T05:45:23.227 に答える
1

あなたは「特定のライブラリやツールを求めているのではなく、アプローチや仕様を求めている」と書いています。ただし、すべての要件を満たすExtJS 5環境に近づくことができます。

そのような商用製品に興味がない場合は、その中のパターンとソリューションを知ることができます.

あなたの要件との関係:

JavaScript コードを個別のファイルに構造化します。

オブジェクト指向プログラミング パラダイムを実装しているため、クラス、サブクラス、オブジェクト、ミックスイン、プラグインを作成できます。クラスベースのプログラミングとプロトタイプベースのプログラミングを接続します。

MVVM アーキテクチャ (View、Controller、ViewModel)、データ バインディング、データ セッション (レコード/エンティティのクライアント側管理) に注目する価値があります。

構成システムも非常に興味深いものです。とても便利です。configプロパティは親クラスからサブクラスにマージされ、オブジェクトの作成中にもマージされる構成を渡すことができます。カスタマイズ可能で柔軟なコンポーネントが必要な場合に非常に便利です。

関連するモジュールをランタイムにロードします。

各クラスには、アプリケーションを 1 つのファイルにビルドするときに使用されるrequiresまたはusesディレクティブがあります。ファイルを手動でロードすることもできます。

...すべてのファイルをスクリプト タグとして含める必要はありません。

開発環境では、ファイルは動的にロードされます (非同期または同期)。

prod env では、必要なファイルが 1 つの縮小ファイルにビルドされています。

集約と縮小のサポート - 縮小/最適化された単一の JavaScript ファイルを構築して使用する機能。

ツールを使用してアプリケーションを構築できSencha cmdます (および他のいくつかのことを実行できます)。

事前定義された 3 つの環境 (開発、テスト、運用) を使用するか、独自の環境 (構成ファイルと ant に基づく) を作成できます。

モジュールをさまざまな組み合わせで使用できるようにする - モジュールのさまざまなサブセットを必要とするさまざまな Web ページ/クライアントが存在することがよくあります。

ワークスペースとパッケージを使用できます。

サポート ドキュメント (JSDoc 付き?)。

JS ダック、チュートリアル

テストに適しています。

単体テストを実行できます(PhantomJS、JSLint、PhantomLint、Jasmine)。

Siestaなどの専用フレームワークや、Selenium などの他の一般的なテスト フレームワークを使用できます。

Web、クロスブラウザーに適しています。

公式サイトより：

単一のコード ベースを使用して、幅広い種類のブラウザーとオペレーティング システムにアプリを配信します。Ext JS 5 は、レガシー ブラウザーの互換性と機能を維持しながら、最新のブラウザーで HTML5 機能を活用します。エンド ユーザーが使用しているブラウザーに関係なく、アプリを自信を持ってエンド ユーザーに配信します。

サポート: Safari 6+、Firefox、IE 8+、Chrome、Opera 12+、Safari/iOS、Safari/iOS 6+、Chrome/Android、Chrome/Android 4.1+、IE 10+/Win 8

Cordova および PhoneGap アプリケーションをサポートします。

妥当な IDE サポート。

私は ExtJS 専用のサポートを備えた優れた IDE を知りませんが、Webstorm で作業していますが、問題ありません。ライブラリ ソースはプロジェクト内にあるため、オートコンプリートが機能します (ただし、100% 完全ではありません)。

結論

ExtJS 5 を美化するつもりはありません。環境は非常に成熟して安定していますが、フレームワークの最新バージョン (v5) にはいくつかのバグがあり、すべてが優れているわけではありません。しかし、私はより深く掘り下げて、そのフレームワークの原則を知ることができました。これは合理的で、良い方向に進んでいますが、実装が悪い場合もあります;)

于 2014-11-22T17:03:45.273 に答える
1

別のオプション:ここで説明されている AngularJS モジュール システム。ただし、これは実際にはクライアント側でのみ役立ちます。

于 2014-11-22T16:52:20.800 に答える
1

ESハーモニーはどうですか？

ここからの引用: http://addyosmani.com/writing-modular-js/

注: Harmony はまだ提案段階にありますが、Google のTraceur コンパイラのおかげでモジュラー JavaScript のネイティブ サポートに対処する ES.next の (部分的な) 機能を既に試すことができます。1 分以内に Traceur を起動して実行するには、この入門ガイドをお読みください。プロジェクトについて詳しく知りたい場合は、一見の価値がある JSConf プレゼンテーションもあります。

希望それが役立つ

于 2014-11-25T17:30:04.797 に答える
0

browserifyを見てください。興味深いアプローチを実装しています。browserify を使用すると、Node.js で使用するのと同じ方法で require を使用するコードを記述できます。

于 2014-11-22T17:54:25.807 に答える
0

モジュラー開発に利用できるさまざまなライブラリがあり、その中にはあなたの基準を完全に満たすものもあります。

  • System.js System.js は、IE8+ および nodejs で動作するいくつかの基本機能を備えたモジュラー開発ライブラリです。また、モジュールを開発する機能も提供し、メイン ファイルに含めることができます。System.js の詳細については、https: //github.com/systemjs/systemjs を参照してください。
  • Require.js モジュール開発に最適なライブラリ。さまざまな便利な機能を提供し、古いブラウザーもサポートします。IE6+から対応しています。require.js のもう 1 つの便利な機能は、Rhinojs と nodejs で使用できることです。実装はnodejsにモジュールを組み込むだけなので簡単です。
于 2014-11-27T03:41:26.403 に答える