ホームページ >ウェブフロントエンド >jsチュートリアル >JS モジュールと namespaces_javascript スキルの概要

JS モジュールと namespaces_javascript スキルの概要

WBOY
WBOYオリジナル
2016-05-16 17:39:331090ブラウズ

原因
コードをクラスに編成する重要な理由は、コードをより「モジュール化」し、さまざまなシナリオでコードを再利用できるようにすることです。しかし、コードをモジュール化する唯一の方法はクラスではありません。

一般に、モジュールは独立した JS ファイルです。モジュール ファイルには、クラス定義、関連クラスのセット、ユーティリティ関数のライブラリ、または実行されるコードを含めることができます。

モジュール化の目標は、大規模なプログラム開発をサポートし、分散したソースからのコードのアセンブリを処理し、不要なモジュール コードが含まれている場合でもコードが正しく実行できるようにすることです。

理想的には、どのモジュールも複数のグローバル フラグを定義すべきではありません。

モジュール関数
は、関数内でモジュールを定義することによって実装されます。定義された変数と関数は関数のローカル変数であり、関数の外部には表示されません。実際、この関数スコープをモジュールの名前空間 (モジュール関数) として使用できます

モジュール コードが関数にカプセル化されたら、モジュール関数の外部で呼び出せるようにパブリック API をエクスポートする何らかの方法が必要です。パブリック API をエクスポートするには、いくつかの方法があります:

まず名前空間を作成します

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

// 学校を保存するグローバル変数を作成します関連情報 モジュール
var school; // 学校の名前空間を作成します
if(!school) school = {};

1. コンストラクター

を使用します。

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

// Student コンストラクターを返して、 public API
school.Student = (function() {
function Student() {

}
//... Student. のプロトタイプ オブジェクトとプライベート プロパティとメソッドを定義します。 .. ....
return Student; // パブリック API をエクスポートするための Student コンストラクターを返します
})();

2. 名前空間オブジェクト

を返します。

モジュール API に複数のユニットが含まれる場合、名前空間オブジェクトを返すことができます

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

// 学生モジュールを学校に追加します
school.students = (function() {
// ローカル変数と関数を使用して、コース クラス/学年クラスなどの多くのクラスがここで定義されます
function Subject() { /* ... */ }
function Grade () { /* ... */ }

// 名前空間オブジェクトを返して API をエクスポートします
return {
Subject: Subject,
Grade: Grade
};
})();

3. キーワード new を使用して

を呼び出します。

もう 1 つの同様の手法: モジュール関数をコンストラクターとして扱い、new を通じて呼び出します。それら (パブリック API) をこの属性に割り当ててエクスポートします

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

school.students = (new function() {
// ..... ここではコードは省略します...

// API をこのオブジェクトに送信します
this.Subject = Subject;
this.Grade = Grade ;

// ここには戻り値がないことに注意してください
}()) // 括弧内に記述されます。ここでは、新しいインスタンスの作成の後に、式
の代わりにコンストラクターを呼び出す必要があります。

4. 定義された名前空間オブジェクト

代わりに、グローバル名前空間オブジェクトが定義されている場合、モジュール関数はそのオブジェクトのプロパティを直接設定できます。

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

// 名前空間オブジェクトが定義されている場合
var school; // 学校の名前空間を作成します
if(!school) school = {};
school.students = {} / / Student 名前空間が定義されています
(function(students) {
// ..... ここではコードは省略します...

// パブリック API をそれにダイレクトします定義された名前空間
students.Subject = Subject;
students.Grade = Grade;
// ここで値を返す必要はありません
})(school.students);

このため、公開APIをエクスポートする方法を説明しました。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。