JavaScript デザイン パターン セキュリティ サンドボックス mode_js オブジェクト指向

名前空間

JavaScript 自体は名前空間メカニズムを提供していないため、さまざまな関数、オブジェクト、変数名によるグローバル空間の汚染を避けるために、通常のアプローチはアプリケーションに一意の名前空間を作成することです。またはライブラリを選択し、すべてのメソッドとプロパティをこのオブジェクトに追加します。

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

/* BEFORE: 5 グローバル */
/ / コンストラクター
function Parent() {}
function Child() {}
// 変数
var some_var = 1;
// いくつかのオブジェクト
var module1 = {} ;
module1.data = {a: 1, b: 2};
var module2 = {}; AFTER: 1 グローバル */
// グローバル オブジェクト
var MYAPP = {};
// コンストラクター
MYAPP.Parent = function() {};
MYAPP.Child = function() {}; .some_var = 1;
// オブジェクト
MYAPP.modules = {};
// ネストされたオブジェクト
MYAPP.modules.module1 = {}; data = { a: 1, b: 2};
MYAPP.modules.module2 = {};


コード リスト 1: 従来の名前空間モード

この段落 コードでは、グローバル オブジェクト MYAPP を作成し、他のすべてのオブジェクトと関数をプロパティとして MYAPP にアタッチします。

通常、これは名前の競合を避けるためのより良い方法であり、多くのアプリケーション プロジェクトで使用されます。しかし、このアプローチにはいくつかの欠点があります。

1. 追加する必要があるすべての関数と変数にプレフィックスを追加する必要があります。
2. グローバル オブジェクトは 1 つだけであるため、コードの一部がグローバル オブジェクトを任意に変更し、コードの残りの部分が受動的に更新される可能性があることを意味します。

グローバル コンストラクター

このコンストラクターを Sandbox() と名付けました。また、コールバック関数を渡すこともできます。このコールバック関数は、コードを保存する独立したサンドボックス環境です。




コードをコピー

コードは次のとおりです。 new Sandbox(function(box){ / / ここにコードを入力してください...

});

コード リスト 2: サンドボックスの使用

サンドボックスにいくつかの機能を追加しましょう


1. サンドボックスの作成時に「new」演算子を使用することはできません

2. Sandbox() コンストラクターは、追加の構成パラメーターをいくつか受け入れます。 object コードをよりモジュール化したいモジュールの名前。


上記の機能を使用して、オブジェクトを初期化する方法を見てみましょう。


リスト 3 は、「new」演算子を必要とせずに「ajax」モジュールと「event」モジュールを呼び出すオブジェクトを作成できることを示しています。 >


コードをコピー


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

Sandbox(['ajax', 'event'], function ( box){ // console.log(box); }); コード リスト 3: モジュール名を配列

の形式で渡します


コードをコピー

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

Sandbox('ajax', 'dom', function(box){ // console.log(box); }); リスト 4: モジュール名を別のパラメーターとして渡す

リスト 5 は、次のことができることを示しています。ワイルドカード文字「*」を使用すると、コンストラクターにパラメーターとして渡されます。これは、便宜上、モジュール名がパラメーターとしてコンストラクターに渡されない場合、コンストラクターは「*」をパラメーターとして渡します。

コードをコピーします


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

サンドボックス(' *', function(box){ // console.log(box) }); Sandbox(function(box){ // console.log(box); });

コード リスト 5: 利用可能なモジュールの呼び出し


コード リスト 6 は、サンドボックス オブジェクトを複数回初期化でき、それらをネストすることもできることを示しています。

コードをコピーします


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

Sandbox('dom', 'event', function(box){
// dom とevent を操作します
Sandbox('ajax', function(box) {
//別のサンドボックス化された「ボックス」オブジェクト
// この「ボックス」は
// この関数の外側の「ボックス」
//...
// Ajax で実行
});
// ここには Ajax モジュールの痕跡はありません
});

コード リスト 6: ネストされたサンドボックス インスタンス

上記の例から、サンドボックス モードを使用すると、すべてのコード ロジックをコールバック関数でラップすることにより、必要なさまざまなモジュールに応じてさまざまなインスタンスが生成され、これらのインスタンスは相互に干渉することなく独立して動作するため、グローバルな名前空間が保護されることがわかります。

次に、Sandbox() コンストラクターを実装する方法を見てみましょう。


モジュールの追加

メイン コンストラクターを実装する前に、Add モジュールをSandbox() コンストラクター。

Sandbox() コンストラクター関数もオブジェクトであるため、「modules」と呼ばれる属性を追加できます。この属性は、キーと値のペアのセットを含むオブジェクトになります。各ペアはキーです。 -value Key は登録する必要があるモジュールの名前で、Value はモジュールのエントリ関数です。コンストラクターが初期化されると、現在のインスタンスが最初のパラメータとしてエントリ関数に渡されます。関数はインスタンスとメソッドに追加の属性を追加できます。

コード リスト 7 では、「dom」、「event」、「ajax」モジュールを追加しました。

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

Sandbox.modules = {} ;
Sandbox.modules.dom = function(box) {
box.getElement = function() {};
box.getStyle = function() {}; ";
};
Sandbox.modules.event = function(box) {
// 必要に応じてサンドボックス プロトタイプにアクセスします:
// box.constructor.prototype.m = "mmm" ;
box.attachEvent = function(){};
box.dettachEvent = function(){};
Sandbox.modules.ajax = function(box) { .makeRequest = function() {};
box.getResponse = function() {};


コード リスト 7: 登録モジュール

実装構造 コンストラクター

コード リスト 8 では、いくつかの重要な点を含めてコンストラクターの実装方法を説明します。

1. これがサンドボックスのインスタンスであるかどうかを確認します。そうでない場合は、次のことが証明されます。サンドボックスは新しいオペレーター呼び出しではないため、コンストラクターとして再度呼び出します。
2. コンストラクター内で this に属性を追加できます。また、コンストラクターのプロトタイプに属性を追加することもできます。
3. モジュール名は、配列、独立パラメータ、ワイルドカード文字「*」など、さまざまな形式でコンストラクタに渡されます。
4. この例では、外部ファイルからモジュールをロードする必要はありませんが、YUI3 などのシステムでは、基本モジュール (シードと呼ばれることが多い) のみをロードでき、他のすべてのモジュールはロードできることに注意してください。外部ファイルからロードされます。
5. 必要なモジュールがわかったら、それらを初期化します。これは、各モジュールのエントリ関数を呼び出すことを意味します。
6. コールバック関数は最後にパラメータとしてコンストラクタに渡され、最後に生成されたインスタンスを使用して実行されます。




コードをコピー

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

function Sandbox() {
　　 // turning arguments into an array
　　 var args = Array.prototype.slice.call(arguments),
　　 // the last argument is the callback
　　　　 callback = args.pop(),
　　 // modules can be passed as an array or as individual parameters
　　　　 modules = (args[0] && typeof args[0] === "string") ?
　　　　args : args[0],
　　　　i;
　　　　 // make sure the function is called
　　　　// as a constructor
　　 if (!(this instanceof Sandbox)) {
　　　　 return new Sandbox(modules, callback);
　　}
　　// add properties to 'this' as needed:
　　this.a = 1;
　　this.b = 2;
　　// now add modules to the core 'this' object
　　// no modules or "*" both mean "use all modules"
　　if (!modules || modules === '*') {
　　　　modules = [];
　　　　for (i in Sandbox.modules) {
　　　　　　if (Sandbox.modules.hasOwnProperty(i)) {
　　　　　　　　modules.push(i);
　　　　　　}
　　　　　}
　　　}
　　// init the required modules
　　for (i = 0; i < modules.length; i ) {
　　　　Sandbox.modules[modules[i]](this);
　　}
　　// call the callback
　　callback(this);
}
// any prototype properties as needed
Sandbox.prototype = {
　　name: "My Application",
　　version: "1.0",
　　getName: function() {
　　　　return this.name;
　　}
};

代码清单8:实现Sandbox构造器
原文来自：Stoyan Stefanov - JavaScript Patterns Part 7:The Sandbox Pattern