JavaScript_PHP チュートリアルで名前空間を作成する 5 つの方法

JavaScript のグローバル変数は名前の競合を引き起こすことが多く、場合によっては変数の書き換えが想像した順序にならない場合もあります。次の例を見てください。

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

var SayHello = function() {
'Hello var' を返します;
};
関数sayHello(名前) {

'Hello 関数' を返します;
};

sayHello();

最終的な出力は

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

>「こんにちは、ヴァール」

これはなぜでしょうか? StackOverFlow の説明によると、実際には JavaScript は次の順序で解析されます。

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

関数sayHello(名前) {
'Hello 関数' を返します;
};
var SayHello = function() {

'Hello var' を返します;
};

sayHello();

var のない関数宣言は事前に解析されるため、最新の JS 記述では、常に先頭に var を使用してすべての変数を宣言することをお勧めします。
グローバル変数名の競合を回避する最善の方法は、名前空間を作成することです。JS で名前空間を作成する一般的な方法をいくつか紹介します。

1. 関数経由で作成する

これは、関数を宣言し、関数に初期変数を設定し、次のようなパブリック メソッドをプロトタイプに記述することで実装されます。

コードをコピーします

コードは次のとおりです: var 名前空間 = 名前空間 {};

/*

関数
*/
NameSpace.Hello = function() {
This.name = '世界';
};
NameSpace.Hello.prototype.sayHello = function(_name) {
return 'Hello' + (_name || this.name);
};
var hello = 新しい NameSpace.Hello();
hello.sayHello();


この記述方法は冗長であり、コード圧縮には役立ちません (jQuery はプロトタイプの代わりに fn を使用します)。呼び出す前にインスタンス化 (新規) する必要があります。 Object を使用して JSON 形式で記述すると、よりコンパクトになります:

2. JSON オブジェクトを通じてオブジェクトを作成する

コードをコピーします

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

オブジェクト

*/
var 名前空間 = 名前空間 {};
NameSpace.Hello = {
名前：「世界」
、sayHello: function(_name) {
'Hello' + (_name || this.name);
を返します }
};


電話

コードをコピーします

コードは次のとおりです: NameSpace.Hello.sayHello('JS');

> こんにちは JS;

この書き方は比較的コンパクトですが、欠点は、すべての変数を public として宣言する必要があるため、スコープを示すためにこれらの変数へのすべての参照を追加する必要があり、書き方も若干冗長であることです。

3. クロージャ(Closure)とオブジェクトを通して実装

クロージャ内のすべての変数とメソッドを宣言し、JSON オブジェクトを通じてパブリック インターフェイスを返します。

コードをコピーします

コードは次のとおりです: var 名前空間 = 名前空間 {};

NameSpace.Hello = (function() {

//返されるパブリックオブジェクト
var self = {};
//プライベート変数またはメソッド
var name = 'world';
//パブリックメソッドまたは変数
self.sayHello = function(_name) {
'Hello' + (_name || name);
を返します。 };
//返されたパブリック オブジェクト
自分を返します;
}());

4. オブジェクトとクロージャーの書き方を改善

前の例では、パブリック メソッドへの内部呼び出しにも self.sayHello(); のように追加する必要があります。ここで最終的にすべてのパブリック インターフェイス (メソッド/変数) の JSON オブジェクトを返すことができます。

コードをコピーします

コードは次のとおりです: var 名前空間 = 名前空間 {};

NameSpace.Hello = (function() {

var name = 'world';
var SayHello = function(_name) {
'Hello' + (_name || name);
を返します。 };
戻る {
SayHello: SayHello
};
}());

5. 関数の簡潔な書き方

これはコンパクトな構造を備えた比較的単純な実装であり、関数インスタンスを使用し、呼び出し時にインスタンス化 (新規) を必要としません。この解決策は stackoverflow から得られます。

コードをコピーします

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

var 名前空間 = 名前空間 {};
NameSpace.Hello = new function() {
var self = this;
var name = 'world';
self.sayHello = function(_name) {
'Hello' + (_name || name);
を返します。 };
};

追加は大歓迎です。

http://www.bkjia.com/PHPjc/824824.htmlwww.bkjia.com本当http://www.bkjia.com/PHPjc/824824.html技術記事 JavaScript のグローバル変数は名前の競合を引き起こすことが多く、変数の書き換えが想像した順序にならないこともあります。次の例を見てください:...

のようなコードをコピーします。