JavaScript名前空間の使い方入門_JavaScriptスキル

Java と C# を使用したことのある学生は、複雑なシステムでは、プログラミング仕様により、言語によって提供され、アーキテクチャによって事前定義された多くの関数やオブジェクトが存在します。実用的な意味を持つ名前を要求すると、同じ名前による誤った呼び出しが発生することは避けられません。しかし、名前空間を使用すると、関数とオブジェクトを分類して整理するだけでなく、分離を形成することもできます。重複した名前の問題を解決します。

JavaScript の使用はそれほど快適ではありません。JavaScript には関数スコープしかありません。重複した名前によって引き起こされるエラーは、デバッグや解決が困難になることがあります。

簡単な例

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

test2();
//....
}

test2(){
functionalert('test2')

この例では、ブラウザによってパフォーマンスが異なります。IE はスタック オーバー フローを報告し、Firefox は停止します。 。 。とにかく、これは非常に単純なエラーです。このように、test2 関数は、alert 関数内で呼び出されます。ループ内で呼び出されます。これを読んだら誰が間違いを犯すかわかりませんが、カスタム メソッドが close で呼び出されると (これはよく起こります)、外部ファイル関数が内部で呼び出されます。 、関数がウィンドウの close メソッドを呼び出すと、エラーは大幅に隠蔽されます。

単純な名前空間

JavaScript にはファイル スコープがないため、さまざまな関数がさまざまなファイルに散在しているか、さまざまな人によって記述されているため、名前が重複する可能性が大幅に高くなります。十分に注意するだけで十分でしょうか？必ずしもそうとは限りませんが、例えば継承がよく使われるので、思いがけずEcmaScript5にextend関数が追加されたり、ネームスペースの必要性が反映されたりすることもあります。

JavaScript には関数スコープがあり、これを使用してカスタム関数を関数本体に記述することができるため、関数内の変数、オブジェクト、関数は名前空間内にある場合と同様に外部から分離されます。

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

alert=function(){
console.log('test');
}
}




このようにして、カスタマイズされたアラート方法はウィンドウアラートと競合しません。

単純な進化

これは可能ですが、問題があります。最大の問題は、呼び出し方法が複雑で見苦しいことです。オブジェクトは呼び出されるたびにインスタンス化され、その後そのメソッドを呼び出す必要があります。自動インスタンス化を実現するには、コードを変更するだけです。

コードをコピー

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

コードをコピー コードは次のとおりです: (function xxx(){

//関数本体
})();

このように書くと、xxx 関数を定義すると自動的に実行されるように見えますが、実は上記の書き方は次のように分解できます。これ

コードをコピー コードは次のとおりです:function xxx(){

//関数本体
}

xxx();

は、関数を定義し、それを角かっこ構文を使用して呼び出すことです。角かっこを使用して呼び出せるのは式のみであるため、関数定義の外側のかっこの層は関数宣言を関数定義式に変換するだけです。これらのモンスターを理解した後、上記のコードは簡単です。カスタム名前空間関数の最後にこれをウィンドウの NS 属性に割り当て、呼び出すときに NS.xx を直接使用します。見た目がずっと良くなりました。

美しくしてください

上記の書き方は良さそうですが、関数名の名前空間が冗長っぽいので美化できます

コードをコピー コードは次のとおりです。(function (){

this .alert= function(){

console.log('test');


はすぐに実行される匿名関数になります。これは少し美化されていますが、明らかにインスタンス化された関数です。なぜプロトタイプのプロトタイプを記述するのですか?無名関数? 。 。 、まだ頭を使う必要があります

コードをコピー

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

(function(){ var _NS=function (){ } _NS.prototype.alert=function(){ console.log('test');

}

window.NS=new _NS() ;
})();




いくつかの便利な関数を作成します


querySelector と querySelectorAll は、W3C によって提供される新しいクエリ インターフェイスですが、名前が非常に長いので、自分で簡単なインターフェイスを作成しました。 innerHTML 属性もよく使用される jQuery HTML メソッド
の簡易バージョンを作成しました。

コードをコピー

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

(function () {
var _NS = function () {

}

_NS.prototype.select = function (selector,context) {
var context = context || document;
return context.querySelectorAll(selector);
}

_NS.prototype.isArrayLike=function(obj){
if(obj instanceof Array){
return true;
}

var length=obj.length;
if ( obj.nodeType === 1 && length ) {
return true;
}
return false;
}

_NS.prototype.html = function (obj,value) {
var isArray=this.isArrayLike(obj), i=0;

if (typeof value == 'string') {
if (!isArray) {
obj.innerHTML = value;
} else {
var length = obj.length;
while (i obj[i].innerHTML = value;
i = 1;
}
}
} else {
if (!isArray) {
return obj.innerHTML;
} else {
return obj[0].innerHTML;
}
}
}

window.NS = new _NS();
})();

このような名前空間を備えたシンプルな JavaScript ライブラリが作成されています。名前の競合を心配する必要はありませんが、jQuery を使用するフロントエンドの学生は皆、使いやすいです。どうやって？次に何が起こるかを知りたい場合は、次回説明を聞いてください。