JavaScript の名前空間-jsチュートリアル-php.cn

JavaScript の名前空間

韦小宝

リリース： 2018-03-07 09:38:14

オリジナル

1197 人が閲覧しました

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

JavaScript の使用はあまり快適ではありません。JavaScript には関数スコープしかありません。重複した名前によって引き起こされるエラーが原因でわかりにくくなる場合があります。

簡単な例

<input type="button" value="test" onclick="alert();"/>
        <script type="text/javascript">
            function alert(){
                //.......
                test2();
                //.......
            }
            function test2(){
                alert(&#39;test2&#39;)
            }
        </script>

ログイン後にコピー

この例では、IE はスタックオーバーフローを報告し、Firefox は停止します。。。いずれにせよ、エラーは報告されます。これは、コード内で test2 関数が呼び出される、これはループです。これを読んだら、誰が間違いを犯すかわからないかもしれませんが、カスタムメソッドが呼び出されると (これはよく起こります)、その後、外部ファイル関数が内部で呼び出され、その関数がwindow の close メソッドを使用すると、エラーが大幅に隠蔽されます。

単純な名前空間

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

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

<input type="button" value="test" onclick="(new namespace()).alert();"/>
        
        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
            }
        </script>

ログイン後にコピー

こうすることで、カスタマイズされたアラート方法がウィンドウのアラートと競合しなくなります。

単純な進化

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

<input type="button" value="test" onclick="NS.alert();"/>
        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();
        </script>

ログイン後にコピー

上記のコードを理解するには、まず「即時実行関数」(江湖人はこれをそう呼んでいます) の技術的な構造を理解する必要があります。構造はこれに似ています

(function xxx(){
       //function body 
 })();

ログイン後にコピー

このように xxx 関数を書くと、次のようになります。実際、上記の書き方は

関数を定義する

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

美化

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

function xxx(){
       //function body 
 }
xxx();

ログイン後にコピー

してすぐに実行される

匿名関数

に少し美化できますが、それでも見た目は変わりませんはい、明らかにインスタンス化された関数です。なぜプロトタイプにメソッド定義が記述されていないのでしょうか。。。、いくつかの便利な関数を書くには、頭を使う必要があります

(function (){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();

ログイン後にコピー

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

(function(){
                var _NS=function(){
                }
                _NS.prototype.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=new _NS();
            })();

ログイン後にコピー

名前空間は、複数のサードパーティフレームワークまたはクラスライブラリを使用する場合に、競合が発生した場合に効果的に競合を防ぎます。、あなたができる唯一のことは、それらのいずれかを放棄することです。

Web 開発に従事する場合、JavaScript にさらされることは避けられません。JavaScript の最新バージョンはまだ名前空間をサポートしていないため、2 つの js ファイルを参照した結果、名前の競合が発生したと想像してください。 1 つ目は、名前付けの問題により、そのうちの 1 つを放棄することです。その結果、さらに多くのコードを作成することになり、間違いなく非常にイライラします。新しいバージョンの JavaScript で名前空間の概念が導入される前に、自立と創造性の精神を継承することがプログラマーの基本的な義務です

PHP 名前空間の詳細な使用法

js名前空間記述サンプルコード

以上がJavaScript の名前空間の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。