Clever Geek Handbook

名前空間を使用してJavaScriptコードを整理する

現在、ほとんどのWebアプリケーションは、非常に多くのソースからの多数のライブラリ、ウィジェット、およびスニペットで構成されています。 他の開発者のコ​​ードが同じページで接続されている場合、他の開発者のコ​​ードはコードとやり取りできることに注意してください。 また、グローバル変数を操作する場合、これは完全に安全ではありません。



名前空間を使用する必要があるのはなぜですか？



たとえば、Ext JSフォーラムでは、異なるメーカーが作成した3つのまったく異なるスクリプトセットを使用しています。ExtJSは機能を拡張するために使用され、Google Analyticsはサイトの使用状況を追跡するために使用され、さらに通常のvBulletinフォーラムスクリプトも使用します。 この図は、さまざまなソースからのこのすべてのコードがページの本文にどのように含まれているかを示しています。 接続されたファイルがさらに大きく成長する可能性のある矛盾の数を想像してください。

ファイルを含める

Firebugデバッガーの[DOM]タブを見ると、接続されたスクリプトによって作成された何百ものウィンドウコンテキスト変数を見ることができます。 同時に、Ext JSはすべてのクラスを単一のExt名前空間に結合し、それらを個別のパッケージとしてさらに整理します。

DOMの概要

独自のスクリプトを作成する場合、他の開発者のコ​​ードとの競合を防ぐために、すべてのクラスとシングルトンをいくつかの名前空間に配置する必要があります。 「名前空間」という用語は、ウィキペディア（ EN 、 RU ）で次のように定義されています：「...その中に含まれる要素（名前、用語、または単語）のコンテキストを提供し、同じ名前の要素の場合のあいまいさを防ぐのに役立つ抽象的なコンテナー...」

名前空間は、あるコードを別のコードで上書きすることを不可能にする重要な開発者ツールです。 実際、別の開発者があなたと同じ名前の変数を定義すると、以前に存在していた定義が上書きされます。 この場合、最後に接続されたコードフラグメントが常に優先されます。

JavaScriptは関数スコープ*を持つ言語であるため、関数または/および関数で「ラップ」されない変数を作成すると、グローバルスコープ（ウィンドウのコンテキスト）に表示されます。 これを防ぐために、開発者はクラスをオブジェクトに入れます。

* -おそらく、著者は可視性のさまざまな領域の作成を念頭に置いています。これは、関数の助けを借りてのみこの言語で実現可能です（約

Ext JSのないネームスペース



Ext JSなしで、次のように名前空間を作成できます。 

 if（！App）App = {};
 if（！App.form）App.form = {};
 if（！App.data）App.data = {};


Ext.namespace



ExtオブジェクトはExt.namespaceメソッド（またはそのショートカットExt.ns）を提供します。 このメソッドは、作成されたネームスペースの存在を確認し、存在しない場合は作成します。 最初にスペースの初期レベルを決定する必要があり、次にさまざまなサブレベルパッケージを作成できます。 たとえば、 アプリの名前空間とそれに含まれるフォームとデータパッケージを作成します。 

 / * Ext.namespaceは、指定された名前のオブジェクトが存在しない場合は作成します* /
 Ext.namespace（ 'App'、 'App.form'、 'App.data'）;
 
 / * App.formパッケージ内で、SampleFormなどの新しいクラスを定義できるようになりました* /
 App.form.SampleForm = Ext.extend（Ext.form.FormPanel、{
     initComponent：function（）{
         / *コンポーネント構成コード* /
        App.form.SampleForm.superclass.call（this）;
    }
 }）;
 
 / * App.dataパッケージ内のMySingletonの定義* /
 App.data.MySingleton = function（）{
     return {
         sampleStaticMethod：Ext.emptyFn
     };
 }（）;


結論として



クライアント側のWebアプリケーションで使用されるJavaScriptコードは、ますます複雑かつ複雑になっています。 したがって、コードとサードパーティコード間の適切なコラボレーション組織の重要性も高まっています。 名前空間を使用すると、コードがグローバルスコープ内の他のコードによって上書きされるのを防ぐことができます。

翻訳者から



原作者：アーロン・コンラン

元の記事： 名前空間を使用してJavaScriptコードを整理する

このhabratopikは私のブログからのクロスポストです。



注意！ ジョセフ・サカロス（Jozef Sakalos） の記事「Extでの複雑なアプリケーションの作成」の翻訳を公​​開した後、彼は私に連絡し、ユーザーに次の内容を送信するように依頼しました。 関連するトピックの私のブログで。 質問はロシア語で簡単に定式化してください。そうすれば理解しやすくなります。」


More articles:


All Articles