JavaScript では、コードのカプセル化はモジュール パターンを使用して実現できます。さらに、プライベートプロパティとパブリックプロパティを作成するために使用されます。モジュールパターンを実装するには、さまざまな方法があります。この記事では、ES5 でモジュールパターンを作成する方法を学習します。 先に進んでモジュールパターンの実装を検討する前に、いくつかの利点を次に示します。
- スコープを固定する
- Code encapsulation
- プライベートまたはパブリックスコープの作成
- Creating a namespace
- パブリックおよびプライベートのカプセル化の作成
JavaScript Object Literals と Immediately- Invoked function expression を使用してモジュールパターンを実装できます。記憶をリフレッシュするために、オブジェクトリテラルは以下のリストのようになります。
var Product = {
price: 600,
setOrder: function () {
return this.price;
}
}
console.log(Product.setOrder());
オブジェクトの作成後にプロパティを追加できます。また、Immediately- Invoked 関数式は次の例のようになります。
var add = function (num1, num2) {
let res = num1 + num2;
console.log(res);
}(7, 2);
これら2つを組み合わせることで、JavaScriptでモジュールパターンを実装できます。モジュールの作成から始めましょう。
(function () {
'use strict';
// Your code here
// All function and variables are scoped to this function
var price = 99;
}());
console.log(price); // undefined
これは自己完結型モジュールまたは匿名クロージャです。関数のスコープを作成し、すべてがその関数自体にラップされます。そのため、関数の外部で価格にアクセスしようとしたとき、それは未定義でした。この匿名モジュールはグローバルスコープに存在することに注意してください。
モジュールをエクスポートするには、expression を使用してモジュールを変数に代入し、return ステートメントを使用してプライベートおよびパブリックカプセル化を作成します。次のコードについて考えてみます。
var module1 = (function () {
'use strict';
//private
let color = 'red';
// public
return {
price: 800
}
}());
console.log(module1.price); // 800
console.log(module1.color); // undefiend
上記のコードスニペットで次のことを行っています。
- Creating an IIFE.
- IIFE関数の変数への代入
- 匿名オブジェクトリテラルを返して、プライベートおよびパブリックカプセル化を作成します。
返されたオブジェクトのすべてのプロパティはパブリックになり、モジュールの外部からアクセスできますが、返されたオブジェクトの一部ではない変数はモジュールの外部からアクセスできません。そのため、価格については出力として 800 を取得していますが、色については、module1 に対してプライベートであるため、値は未定義です。以下のリストに示すように、module1 を変更して、より多くの private プロパティと public プロパティを持つようにしましょう。
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
// public
return {
price: 800,
getModel: function (m) {
setModel(m);
return model;
}
}
}());
console.log(module1.price); // 800
console.log(module1.getModel('bmw')); // bmw
ご覧のとおり、パブリックカプセル化関数を使用して、プライベートカプセル化変数にアクセスできます。主にモジュールパターンでは、すべての変数はリターンオブジェクトの一部になるまでプライベートです。
モジュールパターンは、JavaScriptのクラスをエミュレートします。オブジェクトを返すことにより、プライベート変数とパブリックカプセル化変数を作成します。クロージャーを使用してプライバシーをカプセル化します。図では、次のものを表示できます。
モジュール・パターンの別のバリエーションは、Revealing Module Patternです。唯一のバリエーションは、以下のリストに示すようにオブジェクトを返すことです。
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
let privatePrice = 800;
let getModel = function (m) {
setModel(m);
return model;
}
// public
return {
price: privatePrice,
model: getModel
}
}());
console.log(module1.price); // 800
console.log(module1.model('audi')); // audi
モジュール表示パターンは、より一貫性のある名前付けとコードの可読性が向上しています。モジュールパターンを使用して要約すると、JavaScriptでパブリックカプセル化とプライベートカプセル化を実現できます。この投稿がお役に立ち、JavaScriptアプリケーションにモジュールパターンを実装していただければ幸いです。
この記事がお役に立てば幸いです。読んでくれてありがとう。 この投稿が気に入ったら、共有してください。また、Infragistics Ignite UI for Angular Componentsをまだチェックしていない方は、ぜひチェックしてみてください。彼らはあなたがより速くWebアプリケーションをコーディングするのを助けるために30 +材料ベースのAngularコンポーネントを持っています。