ホームページ > 記事 > ウェブフロントエンド > JavaScript モジュール開発に関するディスカッション
過去の JavaScript コードの開発方法
これまで、JavaScript はアプリケーションの複雑さが低いため、常に Web ページの補助プログラムの位置にあり、アプリケーション開発言語ですらなかった。さらに、ほとんどの Web サイトは 1 回限りのアプリケーションであり、規模が小さいため、保守性よりも開発速度が重要です。ほとんどの場合、プロのフロントエンド開発者は存在せず、マニュアルを調べて作業を開始するのはバックエンド担当者です。
多くの場合、すべての JavaScript コードが同じファイルに配置され、すべてのコードが結合されて再利用できません。すべての変数はグローバル変数であり、相互に上書きする可能性があります。うまくやれば、いくつかの関数を作成し、再利用を容易にするためにいくつかの共通コードを整理できますが、これらの関数は基本的にグローバルです。 JQuery の導入後、多くの人がイベント バインディング、イベント処理、その他のコードをまとめて記述し、それらをドキュメント対応関数に組み込むことに慣れています。
上記のような状況を私自身が経験していますが、まとめると、コードは再利用できない、保守性は悪い、コードはテストできない、複数人で共同開発するのは難しい、ということです。
モジュールとは何ですか?
Wikipedia からの定義:
ソフトウェア モジュール (モジュール) は、一貫性があり密接に関連したソフトウェア組織のセットです。これには、プログラムとデータ構造の 2 つの部分が含まれています。最新のソフトウェア開発では、合成の単位としてモジュールがよく使用されます。最新のソフトウェア開発では、合成の単位としてモジュールがよく使用されます。モジュールは個別に記述できる単位です。これにより、モジュールが再利用可能になり、さまざまな人々が同時に共同作業したり、異なるモジュールを作成したり、作業したりできるようになります。
モジュール開発の利点
オンデマンド読み込みを実現できる
複数人での共同開発
再利用が簡単
強力な拡張性
テストが簡単
JavaScriptでのモジュール開発
実際、JavaScriptのモジュール化が今とても注目されています。特徴は「モジュール開発、オンデマンドロード」です。その中で、CommonJS組織はブラウザ側のモジュール定義を標準化するためにAMD仕様を定義しています。 RequireJS と SeaJS は、AMD を実装する 2 つの優れたフレームワークです。
中規模および大規模なプロジェクトの場合、モジュール開発とオンデマンド読み込みを使用することが非常に必要です。小規模および中規模のプロジェクトの場合は、このモジュール開発フレームワークを使用するのが良いと個人的に感じています。必須ではありませんが、オンデマンド読み込み機能を使用しなくてもモジュラー開発を利用できます。ここでは、中小規模のプロジェクトがモジュール型開発手法を使用して、従来の開発手法のさまざまな問題を回避する方法に焦点を当てます。
JavaScript でモジュールを定義する方法
JavaScript のモジュールは主にクロージャを通じて実装され、グローバル変数の問題を非常にうまく解決し、関連するすべての変数をモジュールにプライベート変数として配置します。これはモジュールの簡単な例です:
var book = function() {
var name = 'Master JavaScript';
getName: () {
function() {
各モジュールは独立した機能のみを完成させます
これはモジュール開発の基本的な要件ですが、実際にはモジュール開発は分割統治法、つまり全体の機能をいくつかの小さな機能に分割し続けることもできます。各モジュールには 1 つのことを行うまでしかありません。もちろん、細かく分割しすぎると再利用に役立ちません。また、細かすぎるとモジュール間の統合が非常に複雑になります。
各モジュールには明確な API インターフェイスがあります
実際、この API インターフェイスは、モジュールの特定の関数コードの前に定義できます。これは、コードを記述する前に、このモジュールが何を行うかを明確に理解する必要があります。これは、ユニットを作成する場合と同じです。テストを最初に行うのが原則であり、コードの後に実装コードを記述します。同時に、必要なインターフェイスのみを公開し、その他の変数や関数は隠蔽され、外部からアクセスできないようにする必要もあります。
単体テスト
JavaScript の開発プロセス中に単体テストを作成する人はほとんどいません。その理由は、一方では JavaScript が UI とやり取りすることが多く、テストが困難であるためです。固定インターフェイスがないため、テストする方法がありません。モジュールを入手したら、簡単にテストできます。 JavaScript単体テストフレームワークの紹介も参考にしてください
概要
この記事では、小規模および中規模の JavaScript プロジェクトにおけるモジュール開発手法について説明します。そのため、AMD の一連の仕様を採用せず、JavaScript の標準モジュール モードを使用してコードを編成します。中小規模のプロジェクトではコード量がそれほど多くなく、パフォーマンスが大きな問題にならないため、オンデマンド読み込み機能も使用されません。大規模なプロジェクトの場合でも、必要なコードをロードできるように、AMD 仕様とオンデマンド ロードを採用する必要があります。