JavaScript_JavaScript モジュール性を採用するためのヒント

私たちは再びコンピューターという用語と概念に包まれています。
backbone、emberjs、spinejs、batmanjs およびその他の MVC フレームワークが侵入しました。
CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljsモジュール式 JavaScript が登場するのを待ちます。
モジュール型 JavaScript の概念は特に強く、2007 年の Ajax のトレンドに追いついているように見えます。
1. 関数の作成 (手続き型)
2005 年以前は、JavaScript はあまり注目されておらず、フォーム検証などの少数のアプリケーションでのみ使用されていました。当時、Web ページに JS コードは数行しか記述できず、1,000 行は非常に複雑だと考えられていました。このとき、コードのまとめ方はプロセスであり、数十行のコードに対して関数を一つも書く必要はありません。もう少し複雑にするには関数を抽象化する必要があり、より複雑にするにはさらに多くの関数が必要になり、関数は相互に呼び出します。


2. クラスの作成 (オブジェクト指向)
2006 年、Ajax は世界を席巻しました。 JavaScript は真剣に受け止められており、バックエンド ロジックがフロントエンドに配置されることが増えています。 Web ページ内の JS コードの量は劇的に増加しました。現時点では、大量のコードを整理するための関数を記述するだけでは不十分であると思われます。小さな関数をデバッグするときに、1 つの関数から N 番目の関数にジャンプすることがあります。この頃、クラスの書き方が登場し、Prototypeが普及の先駆けとなりました。これを使用してコードを整理し、各クラスを Class.create で作成します。 YUI や Ext などの重量級フレームワークもあります。クラスの記述方法はそれぞれ異なりますが、設計上のアイデアはすべて、大量の JavaScript コードの開発に対応するためのものです。

3. モジュールの作成 (現在、将来?)
2009 年に Nodejs が誕生しました。このサーバーサイド JavaScript はモジュール式の記述方法を採用しており、すぐにブラウザサイド JSer を征服しました。優秀な人材が次々と追随し、モジュールを書くための様々な仕様も次々と登場しています。 CommonJSはフロントエンドとバックエンドの記述方法を統一したいと考えており、AMDはブラウザ側に適していると考えている。そうですね、モジュールを記述するスタイルがどのようなものであっても、モジュール式 JavaScript を記述することが一般的になってきています。準備はできたか？ (えっと、挑発的です)

ねえ、モジュラー JavaScript って何ですか? これも私たちが発明した特効薬なのでしょうか？それが何であれ、とにかく勉強してください。プロジェクトでの使用に適しているかどうかについては、各個人の判断に委ねられています。

これを書いているとき、私は「モジュール」について何も言いませんでした。実際、コンピュータ分野では、モジュール化の概念が 40 年近くにわたって推進されてきました。ソフトウェアの全体的な構造はモジュール化の考え方を体現しています。つまり、ソフトウェアはいくつかの独立した名前のコンポーネントに分割されており、各コンポーネントはモジュールと呼ばれます。すべてのモジュールが一緒に組み立てられると、問題の解決策が得られます。得られた。

モジュール化は分割統治法に基づいていますが、ソフトウェアを無制限に細分化できることを意味しますか?実際、分割が細かくなりすぎてモジュールの総数が増加すると、各モジュールのコストは下がりますが、モジュール インターフェイスのコストは増加します。モジュールを適切にセグメント化するには、情報の隠蔽、凝集、結合を理解する必要があります。

情報の隠蔽
モジュールは、モジュールに含まれる情報 (プロセスとデータ) が、それを使用する必要のないモジュールから見えないよう設計する必要があります。各モジュールは独立した機能のみを完了し、この機能のインターフェイスを提供します。モジュールにはインターフェイスを介してアクセスします。 JavaScript では、関数を使用してインターフェイス オブジェクトを非表示にし、カプセル化し、返します。以下は、イベント管理を提供するモジュール イベントです。

コードをコピー コードは次のとおりです。

event = function() {
// さらに実行します
return {
bind: function() {},
unbind: function() {},
trigger: function() {}
}; ();


関数内で目的のインターフェイスのバインド、バインド解除、トリガーを実装するには、大量のコードを記述する必要がある場合がありますが、これらのコード (プロセスとデータ) を他のモジュールに公開する必要はありません。インターフェイスのバインド、バインド解除、トリガーが外部からアクセスできる限り、可能です。

モジュール設計における情報隠蔽のメリットは、モジュールの並行開発をサポートするだけでなく、テストやポストメンテナンスの作業負荷も軽減することは明らかです。将来コードを変更する場合は、インターフェースが変更されていない限り、モジュールの非表示部分を自由に変更できます。たとえば、イベント モジュールが最初に実装されたとき、古いバージョンの IE と標準ブラウザとの互換性を保つために、多くの IE 特別コードが作成されました。ある日、古いバージョンの IE が消滅しました (申年)。午の月）、落ち着いて削除するだけで済みました。

Cohesion
Cohesion は、モジュールの内部実装を指します。これは、情報の隠蔽とローカリゼーションの概念の自然な拡張であり、モジュール内でのコンポーネントの緊密な統合を示します。モジュールの度。利点も明らかで、関連するタスクがグループ化されると非常に読みやすくなります。
設計時には、モジュールの独立性を高めるために、モジュールの凝集性を可能な限り改善する必要があります。

結合度
結合度は特定のモジュールの内部実装の尺度を指し、結合度はモジュール間の関連度の尺度を指します。結合の程度は、モジュール間のインターフェイスの複雑さ、モジュールが入力または呼び出される場所などによって異なります。凝集性とは対照的に、設計時には疎結合システムを追求する必要があります。