モジュール開発といえば、誰もがよく知っているはずです。特にフロントエンド アプリケーションがより複雑になり、コードが急激に増大するにつれて、管理に多くの時間を費やす必要があり、モジュール化は徐々に誰もが受け入れ始めています。
具体的に言うと、モジュラー開発とは、複雑なアプリケーション機能を開発のために複数のモジュールに分割することを指し、モジュールは特定の機能を実装するファイルになります。モジュールを使用すると、最も直接的な価値は、コードをより簡単に管理できること、さらには直接的に管理できることです。他の人のコードをインポートして使用したり、必要な機能のモジュールをロードしたりできます。
モジュール開発の開発
実際、初期の JavaScript のモジュール化は、ファイル分割という手法に基づいて実現されており、Web 上で最も原始的なモジュール体系ですが、もちろん、これには名前の競合や地球規模の汚染など、いくつかの未解決の問題があります。
その後、名前空間方式を採用し、各モジュールはグローバル オブジェクトのみを公開し、すべてのモジュール メンバーはこのオブジェクトの下にマウントされることに同意します。具体的な方法は、JavaScript のモジュール化に基づいて各モジュールをグローバル オブジェクトにラップすることです。これは、モジュール内のモジュールの一部のメンバーに名前空間を追加することに似ていますが、この方法には、モジュール間の依存関係の問題が解決されないという明らかな問題があります。
その後、関数を即時実行する方式（IIFE）も登場し、その原理は各モジュールを関数のプライベートスコープに置き、公開する必要のあるメンバについてはグローバルオブジェクトにマウントすることで実装できます。これも実際的な例です。
;(function () {
var name = 'module1'
function moduleFn() {
console.log(name + '---> moduleFn');
}
window.module1 = {
moduleFn: moduleFn
}
})()
これまでのところ、モジュラー開発には新たな開発や技術実装手法があり、特に今日のハイブリッドアプリケーションの急速な開発においては、より多様なアプリケーション機能とより複雑なコードが存在しており、モジュラー開発の重要性はコンセンサスになっているようです。
モジュール開発の利点
モジュール開発と従来の開発モデルの最大の違いについて言えば、モジュール開発は実装方法が一貫していないことに加えて、実際に開発効率と利便性を向上させることができると個人的には考えています。具体的には主に以下の4つの点に反映されていると思います。
1. 柔軟なアーキテクチャと焦点の分離
モジュール開発では、実際のニーズや変化に応じてモジュール化自体を柔軟に調整・拡張することができ、システムをデータアクセス層、ビジネスロジック層、プレゼンテーション層などの異なるレベルに分割することができます。この階層化された設計方法により、システムの結合が軽減され、システムの拡張性がある程度向上します。
焦点の分離は、システムの複雑さを軽減するために、焦点を機能要件とパフォーマンス要件に分割し、個別に開発およびテストできることを示しています。
2. モジュール間の便利な組み合わせと分解
モジュール開発では、組み合わせと分解の両方が理解しやすく、その名前が示すように、組み合わせとは、より複雑な機能やシナリオを実現できるように、さまざまなモジュールを特定の方法で組み立てることを指し、分解とは、モジュールを分解することです。複雑なモジュール: 機能の実現と保守を改善するためのいくつかの単純なサブモジュールです。
3. 単一モジュール機能のデバッグとアップグレードに便利です
モジュラー開発を採用すると、多くの複雑な機能が別個のモジュールになり、特定のモジュールの機能をデバッグまたはアップグレードする必要がある場合、本体全体に影響を与えることなく、この機能モジュールを迅速に実行できます。
4. 複数人でのコラボレーションは互いに干渉しません
これは非常に分かりやすく、モジュール化自体はシステムのデカップリングによって実現されるため、複数のモジュール化に分割され、複数のコードパッケージに対応することで、影響を受けずに相互連携することで効率を向上させる方法でもあります。
モジュール開発の現状
モジュール性もテクノロジーの発展に合わせて常に更新されており、たとえば、多くの開発者が好む開発方法には、依存関係のパッケージ化と依存関係の読み込みが含まれます。
1. 依存関係の読み込み
現在、このメソッドは、require js、sea.js などで広く使用されていますが、記述仕様が異なることを除けば、実際には関連する require API を通じてモジュール チャンク ファイルを取得し、ロード後にロジック コードを実行します。完成されました。
2. パッケージングに頼る
古典的な代表はWebpackで、実際にはコードを書く際にはモジュールを分割しますが、パッケージ化する際には依存関係に応じて各モジュールを探し出し、最終的には同じファイルにまとめて、各チャンクのIDを識別してロジックコードを実行します。モジュール性を実現するには、モジュール参照をこの ID に指定します。
3. 小さなプログラム
さらに、WeChat、Alipay、その他のアプリの実践に伴い、小規模プログラム コンテナ技術FinClipもモジュール化のオプションになりました。その原理は実際には以前のモジュール型開発モデルと同じで、複雑で密結合した機能アプリケーションを小規模なアプリケーションに分離します。モジュールを 1 つずつ実装することになりますが、異なるのは、これらの小さなモジュールの搬送方法が小さなプログラムに置き換えられ、開発および管理の観点から簡単になることです。
複雑なモバイル バンキング アプリを例にとると、小型プログラム コンテナ技術を使用して、肥大化した APP の機能を分割し、機能モジュールを相互に切り離し、各業務機能を最小化された小さなプログラムにするのと同じです。ブロックに組み込まれており、レゴのようなものです。
