JavaScript Namespace

Question

ho creato una classe javascript come segue:

var MyClass = (function() { 
    function myprivate(param) { 
     console.log(param); 
    } 

    return { 
     MyPublic : function(param) { 
     myprivate(param); 
     } 
    }; 
})(); 

MyClass.MyPublic("hello"); 

Il codice di cui sopra sta lavorando, ma la mia domanda è, come se io voglio introdurre namespace a quella classe.

Fondamentalmente voglio essere in grado di chiamare la classe come questa:

Namespace.MyClass.MyPublic("Hello World"); 

Se ho aggiunto Namespace.MyClass, sarà lanciare errore "Errore di sintassi". Ho provato ad aggiungere "window.Namespace = {}" e non funziona neanche.

Grazie .. :)

Answer 1

Di solito mi consiglia di fare questo (supponendo Namespace non è definito altrove):

var Namespace = {}; 
Namespace.MyClass = (function() { 
    // ... 
}()); 

A più flessibile, ma più complesso, approccio:

var Namespace = (function (Namespace) { 
    Namespace.MyClass = function() { 

     var privateMember = "private"; 
     function myPrivateMethod(param) { 
     alert(param || privateMember); 
     }; 

     MyClass.MyPublicMember = "public"; 
     MyClass.MyPublicMethod = function (param) { 
      myPrivateMethod(param); 
     }; 
    } 
    return Namespace 
}(Namespace || {})); 

Si costruisce Namespace.MyClass come sopra, ma non si basa su Namespace già esistente. Lo dichiarerà e lo creerà se non esiste già. Ciò consente anche di caricare più membri di Namespace in parallelo in file diversi, l'ordine di caricamento non ha importanza.

Per maggiori: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Answer 2

Un modo succinto di fare quello che stai chiedendo è creare "Namespace" come un letterale oggetto come questo:

var Namespace = { 
    MyClass : (function() { 
     ... rest of your module 
    })(); 
}; 

Ciò potrebbe causare conflitti se si voleva allegare altri dettagli a Namespace in altri file, ma è possibile aggirarli creando sempre Namespace, quindi impostando esplicitamente i membri.

Answer 3

YUI ha un metodo piacevole per gli spazi dei nomi che dichiarano

if (!YAHOO) { 
     var YAHOO = {}; 
} 

YAHOO.namespace = function() { 
    var a = arguments, 
     o = null, 
     i, j, d; 
    for (i = 0; i < a.length; i = i + 1) { 
     d = ("" + a[i]).split("."); 
     o = YAHOO; 
     for (j = (d[0] == "YAHOO") ? 1 : 0; j < d.length; j = j + 1) { 
      o[d[j]] = o[d[j]] || {}; 
      o = o[d[j]]; 
     } 
    } 
    return o; 
} 

posto al di sopra di qualsiasi funzione che si desidera namespace in questo modo:

YAHOO.namespace("MyNamespace.UI.Controls") 

MyNamespace.UI.Controls.MyClass = function(){}; 
MyNamespace.UI.Controls.MyClass.prototype.someFunction = function(){}; 

Questo metodo è in realtà stand-alone e può essere facilmente adattato alla tua applicazione. Trova e sostituisci "YAHOO" con lo spazio dei nomi di base dell'applicazione e avrai qualcosa come MyOrg.namespace. La cosa bella di questo metodo è che è possibile dichiarare i namespace in qualsiasi profondità senza dover creare array di oggetti in mezzo, come per "UI" o "Controlli"

Answer 4

Checkout il namespace library, è molto leggero e facile da implementare .

(function(){ 
    namespace("MyClass", MyPublic); 

    function MyPublic(x){ 
    return x+1; 
    } 
})(); 

Esso supporta automaticamente la nidificazione così

namespace("MyClass.SubClass.LowerClass", ....) 

genererebbe la gerarchia degli oggetti necessari, se MyClass, SubClass già non esiste.

Answer 5

bob.js ha sintassi bello per definire namespace JavaScript:

bob.ns.setNs('myApp.myMethods', { 
    method1: function() { 
     console.log('This is method 1'); 
    }, 
    method2: function() { 
     console.log('This is method 2'); 
    } 
}); 
//call method1. 
myApp.myMethods.method1(); 
//call method2. 
myApp.myMethods.method2(); 

Answer 6

Automatizzare dichiarazione namespace in javascript è molto semplice, come potete vedere:

var namespace = function(str, root) { 
    var chunks = str.split('.'); 
    if(!root) 
     root = window; 
    var current = root; 
    for(var i = 0; i < chunks.length; i++) { 
     if (!current.hasOwnProperty(chunks[i])) 
      current[chunks[i]] = {}; 
     current = current[chunks[i]]; 
    } 
    return current; 
}; 

// ----- USAGE ------ 

namespace('ivar.util.array'); 

ivar.util.array.foo = 'bar'; 
alert(ivar.util.array.foo); 

namespace('string', ivar.util); 

ivar.util.string.foo = 'baz'; 
alert(ivar.util.string.foo); 

Provalo: http://jsfiddle.net/stamat/Kb5xY/ post del blog: http://stamat.wordpress.com/2013/04/12/javascript-elegant-namespace-declaration/

Answer 7

Questo è lo schema di progettazione che utilizzo che consente il nome annidato spazi così come l'aggiunta allo spazio dei nomi più avanti (anche da un file JS separato) in modo da non inquinare l'namespace globale:

Esempio: JsFiddle

(function ($, MyObject, undefined) {  
    MyObject.publicFunction = function() { 
     console.log("public"); 
    }; 

    var privateFunction = function() { 
     console.log("private"); 
    }; 

    var privateNumber = 0; 
    MyObject.getNumber = function() { 
     this.publicFunction(); 
     privateFunction(); 
     privateNumber++; 
     console.log(privateNumber); 
    }; 

    // Nested namespace 
    MyObject.nested = MyObject.nested || {}; 
    MyObject.nested.test = function (text) { 
     console.log(text); 
    };  
}(jQuery, window.MyObject = window.MyObject || {})); 

// Try it 
MyObject.getNumber(); 
MyObject.nested.test('Nested'); 

Ecco come aggiungere a MyObject da un altro file JavaScript:

(function ($, MyObject, undefined) { 
    MyObject.newFunction = function() { 
     console.log("Added"); 
    }; 
}(jQuery, window.MyObject = window.MyObject || {})); 
// Pass `jQuery` to prevent conflicts and `MyObject` so it can be added to, instead of overwritten 

Questa risorsa mi ha aiutato a imparare tutto sui diversi modelli di progettazione JS: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Answer 8

(function($){ 

    var Namespace = 
{ 
    Register : function(_Name) 
    { 
     var chk = false; 
     var cob = ""; 
     var spc = _Name.split("."); 
     for(var i = 0; i<spc.length; i++) 
     { 
      if(cob!=""){cob+=".";} 
      cob+=spc[i]; 
      chk = this.Exists(cob); 
      if(!chk){this.Create(cob);} 
     } 
     if(chk){ throw "Namespace: " + _Name + " is already defined."; } 
    }, 

    Create : function(_Src) 
    { 
     eval("window." + _Src + " = new Object();"); 
    }, 

    Exists : function(_Src) 
    { 
     eval("var NE = false; try{if(" + _Src + "){NE = true;}else{NE = false;}}catch(err){NE=false;}"); 
     return NE; 
    } 
} 
    Namespace.Register("Campus.UI.Popup") 
    Campus.UI.Popup=function(){ 
     defaults={ 
      action:'', 
      ispartialaction:'', 
      customcallback:'', 
      confirmaction:'', 
      controltoupdateid:'', 
      width:500, 
      title:'', 
      onsubmit:function(id){ 
       var popupid=id+"_popupholder"; 
       if(this.ispartialaction){ 
        $.ajax({ 
         url:this.action, 
         type:"Get", 
         context:this, 
         success:function(data){ 
          $('#'+id).parents('body').find('form').append("<div id'"+popupid+"'></div>"); 
          var ajaxContext=this; 
          $("#"+popupid).dialog({ 
           autoopen:false, 
           model:true, 
           width:this.width, 
           title:this.title, 
           buttons:{ 
            "Confirm":function(){ 
             if(ajaxContext.customcallback==''){ 
              var popupform=$(this).find("form"); 
              if(popupform.isValid()){ 
               $.post(ajaxContext.confirmaction,popupform.serialize(),function(d){ 
                if(d!='') 
                { 
                 $.each(d.Data,function(i,j){ 
                  switch(j.Operation) 
                  { 
                   case 1: 
                    if($('#'+j.ControlClientID).is("select")) 
                    { 
                     $('#'+j.ControlClientID).val(j.Value); 
                     $('#'+j.ControlClientID).change(); 
                    } 
                    else if($('input[name="'+j.ControlClientID+'"]').length>0) 
                    { 
                     $('input[name="'+j.ControlClientID+'"][value="'+j.Value+'"]').prop("checked",true); 
                    } 
                    break; 
                   case 2: 
                    if($('#'+j.ControlClientID).is("select")) 
                    { 
                     $('#'+j.ControlClientID).append("<option selected='selected' value=\""+j.Value+"\">"+j.Text+"</option>"); 
                    } 
                    else 
                    { 
                     var len=$('input[name="'+j.ControlClientID+'"]').length; 
                     $('#'+j.ControlClientID+"list").append('<li><input type="checkbox" name="'+j.ControlClientID+'" value="'+j.Value+'" id="ae'+j.ControlClientID+len+'"/><label for "ae'+j.ControlClientID+len+'">'+j.Text+'</label>'); 
                    } 
                    break; 
                   case 0: 
                    $('#'+j.ControlClientID).val(j.Value); 
                    breakl 
                   default:break; 
                  } 
                 });                  

                 popupform.parent().dialog("destroy").remove(); 
                 $("#"+ajaxContext.controltoupdateid).change(); 
                } 
               }); 
              } 
             } 
             else 
             { 
              executeByFunctionName(ajaxContext.customcallback,window,new Array()); 
             } 
            }, 
            "Cancel":function(){ 
             $(this).dialog("close"); 
            } 
           } 
          }); 
          $("#"+popupid).dialog("open"); 
          $("#"+popupid).empty().append(data); 
         }, 
         error:function(e) 
         { 
          alert(e); 
         } 
        }); 
       } 
       else 
       { 
        var frm=document.createElement("form"); 
        frm.id="CampusForm"; 
        frm.name="CampusForm"; 
        frm.action=this.action; 
        frm.method="post"; 
        var arr=$($("#"+id).closest("body").find("form")).serializeArray(); 
        $.each(arr,function(i,j){ 
         var hidd=document.createElement("input"); 
         hidd.type="hidden"; 
         hidd.name=j.name; 
         hidd.value=j.value; 
         frm.appendChild(hidd);}); 
        document.appendChild(frm); 
        frm.submit(); 
       } 
      } 
     }, 
     clicksubmit=function(){ 
      var opts=$(this).data("CampusPopup"); 
      opts.onsubmit($(this).attr("id")); 
      return false; 
     }; 
     return 
     { 
      init:function(opt){ 
       var opts=$.extend({},defaults,opt||{}); 
       $(this).data('CampusPopup',opts); 
       $(this).bind("click",clicksubmit); 
      }}; 
    }(); 
    $.extend({CampusPopup:Campus.UI.Popup.init}); 
})(jQuery)