2011-08-12 21 views
1

私はJS内のすべてでグローバルに使用される典型的なWeb開発者です。私は今、光を見て、名前空間に変換したい。私の現在のプロジェクトでは、3つのJS関数(現在はすべてグローバル)を持つページがあり、アンカーにテキストを割り当て、クリックメソッドをアタッチして特定のdivの表示を切り替えます。非常に標準的。Javascriptから名前空間への変換と関数の呼び出し

ですから、例えば機能は以下のように書かれている:

function toggleComments(){ 
    $("comments-section").hide(); 
    $("comments-button").click(function(){ 
     blah 
     return false; 
    }); 
} 

私の質問はどのように私は、これらの機能を保持し、それらを呼び出すための名前空間を作成するのですか?

さまざまな例が見つかりましたが、決定的なものはありません。

助けがあれば助かります。

答えて

1

ビリー月は良いスタートを示しているが、オブジェクトリテラルを使用しての問題は、あなたが参照他のフィールド/機能/性質を渡ることができないということです。

私はずっと暴露のモジュールのパターンが内部プライベート関数/フィールドを提供するために、クロージャの(種類の)搾取、自己実行中の関数を組み合わせて、あなたがすることができます

http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/を参照)暴露のモジュールパターンを好みますあなたの名前空間オブジェクトを初期化するためにparamsを渡します。

var namespacedObject = function(param) { 

    var settings = param || someDefaultSetting, //default if no param supplied 
     somePrivateField = "someValue", 
     somePublicField = "i'm public"; 

    //define some method we will later make public 
    function toggleComments(){ 
     $("comments-section").hide(); 
     $("comments-button").click(function(){ 
      $(this).value= somePrivateField; 
      return false; 
     }); 
    } 

    //this is where the magic happens, 
    //return object with all public fields/functions 
    return { 
     toggleComments : toggleComments, 
     somePublicField : somePublicField 
    }; 

}(someParam); 

あなたは、名前空間オブジェクトが公にアクセスメソッドから参照できるプライベートフィールドsomePrivateFieldが、含まれていることがわかります。また、私はpublicフィールドを公開しており、関数などで使用/参照できるいくつかのパラメータを受け入れています(何も渡されなければデフォルトに設定できます)

は次のように使用できます:

私はこれを好き
namespacedObject.toggleComments(); 
alert(namespacedObject.somePublicField); 
alert(namespacedObject.somePrivateField); //undefined - it's private of course! 

一つの理由はそれだけで便利です自己実行機能

・ホープから返されたオブジェクトリテラルをちらっと見てプライベート/パブリックであるかを確認することは非常に簡単だということです

2
// choos a namespace name that will not conflict with existing global variables 
var myNS = { 
     toggleComments: function(){ 
      $("comments-section").hide(); 
      $("comments-button").click(function(){ 
       // blah 
       return false; 
      }); 
     }, 
     anotherFunc: function(){ 
      return "something"; 
     } 
} 

// called like this 
myNS.toggleComments(); 
alert(myNS.anotherFunc()); 

また、コードを匿名の自己呼び出し関数に格納するようにしてください。これは、グローバル名前空間に何も持たないことを意味します。したがって、汚染のリスクはありません。

// other peoples/modules code 
var myVariable = "whatever"; 

// anonymous function for your self contained code 
(function(){ 
var myVariable = "inside anonymous function"; 
alert(myVariable); 
})() // the empty brackets envoke the anonymous function 

// still retains value from before your self envoking anonymous function 
alert(myVariable); 
関連する問題