Javascriptのモジュール(A):モジュールを書く[ターン]

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

著者:ルアンYifeng

日付:2012年10月26日

サイトは「なってきてとインターネットアプリケーション」、Javascriptのコードは、ますます大規模で複雑なWebページに埋め込まれました。

ウェブは、より多くのデスクトッププログラムのように、あなたは労働者、ビジネスロジックのスケジュール管理、ユニットテストの部門のチームを必要とする、というように......開発者がソフトウェア工学の方法、管理ページを使用する必要がありました。

Javascriptのモジュールは、急務となっています。理想的には、開発者がコアだけのビジネスロジックを実装する必要があり、他のモジュールは、他の人が書かれているロードすることができます。

しかし、Javascriptがそれは、「サポートされていない、モジュールの言語ではありませんクラス」(クラス)を、単独の「モジュール」(モジュール)アップしましょう。(で開発されているのECMAScript標準第6版、正式に「クラス」と「モジュール」をサポートするだけでなく、実用化には長い時間がかかります。)

Javascriptが「モジュール」の効果を達成するために、既存のオペレーティング環境でのコミュニティの努力の多くを行います。本論文では、現在の「Javascriptのモジュール」ベストプラクティスをまとめたもので、実用化する方法について説明します。これは主カリキュラムが、JavaScriptの基本的な文法のほんの少しの理解ではありませんが、あなたが理解することができます。

まず、オリジナルの言葉遣い

モジュールは、特定の機能を実現する方法の集合です。

限り、異なる機能(ならびに記録状態変数)として単に、一緒にたとえ一つのモジュールを入れています。

  関数M1(){
    // ...
  }

  関数M2(){
    // ...
  }

上記関数M1()及びM2()、モジュールを形成します。使用に際しては、ライン上の直接呼び出し。

この方法の欠点は明らかである:他のモジュールと競合しない変数名を保証するものではありませんグローバル変数の「汚染」が、モジュールのメンバー間の直接の関係が表示されません。

執筆の第二に、対象

上記の欠点に対処するために、すべてのモジュールが内部オブジェクトのメンバーを入れて、オブジェクトモジュールに書き込むことができます。

  VaRのモジュール1 =新しいオブジェクト({

    _count:0、

    M1:関数(){
      // ...
    }

    M2:関数(){
      // ...
    }

  });

上記関数M1()及びM2()は、モジュール1オブジェクトにカプセル化されています。使用時には、それは、オブジェクトのプロパティを呼び出すことです。

  module1.m1();

しかし、文言はモジュールのすべてのメンバーを公開します、内部の状態を外部から書き換えることができます。たとえば、外符号は、直接内部カウンタの値を変更することができます。

  module1._count = 5;

第三に、言葉遣いはすぐに関数を実行します

使用「機能がすぐに実行される(すぐに、呼び出される関数の式、」生命維持)、 プライベートメンバーの暴露の目的を達成することはできません。

  VaRのモジュール1 =(関数(){

    0 = _countました。

    M1 =関数であった(){
      // ...
    };

    M2 =関数であった(){
      // ...
    };

    リターン{
      M1:M1、
      M2:M2
    }。

  })();

上記の文言を使用して、外部コードの内部は_count変数を読み込むことができません。

  console.info(module1._count)。//未定義

モジュール1 Javascriptが基本的な書き込みモジュールです。以下、この製剤は、再び処理されます。

四、増幅モード

大モジュール場合、それはいくつかの部分、または別のモジュールへのモジュールを継承することが必要に分割する必要があり、「ズームモード」(増強)を使用する必要があります。

  たModule1の=(関数(V){

    mod.m3 =関数(){
      // ...
    };

    MODを返します。

  })(モジュール1)。

上記のコードは、新しいメソッドM3を(追加)モジュール1モジュールであり、モジュールは、新しいモジュール1を返します。

V.ワイドズームモード(ルース増強)

ブラウザ環境では、モジュールのさまざまな部分は、通常はインターネットから取得され、あなたがロードされますどの部分か分からないことがあります。空のオブジェクトをロードするための可能な実行の最初の部分の文言が存在しない場合、我々は、「ワイドズームモード」を使用する必要があります。

  たModule1の=(関数(V){

    // ...

    MODを返します。

  })(window.module1 || {})。

「ズームモード」、「ワイドズームモード」パラメータと比較すると、空のオブジェクトでもよい「即時実行機能」です。

第六に、グローバル変数の入力

独立モジュールの重要な特徴である、内部モジュールは、直接プログラムの残りの部分と相互作用しないことをお勧めします。

モジュール内のグローバル変数を呼び出すためには、しなければならない明示的に可変入力モジュール他。

  VaRのモジュール1 =(関数($、YAHOO){

    // ...

  })(jQueryの、YAHOO)。

上記モジュール1モジュールは、パラメータ入力モジュール1として、これら2つのライブラリ(実際には2つのモジュール)入れ、jQueryライブラリとYUIライブラリを使用する必要があります。モジュール間の依存関係、さらには明らかになるように、モジュールの独立性を確保するためにそうすることに加えて。この点に関してより多くの議論では、ベンチェリーの有名な記事参照「:綿密JavaScriptのモジュールのパターン」

このシリーズの第二部では、説明しますどのように異なるブラウザ環境団体モジュール、管理モジュール間の依存関係。

(終わり)

おすすめ

転載: www.cnblogs.com/mazhenyu/p/11491984.html