JavaScript Namespace

Question

J'ai créé une classe javascript comme suit:

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

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

MyClass.MyPublic("hello"); 

Le code ci-dessus fonctionne, mais ma question est, comment si je veux présenter l'espace de noms à cette classe.

Fondamentalement, je veux être en mesure d'appeler la classe comme ceci:

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

Si j'ajouté Namespace.MyClass, il va lancer une erreur « Erreur de syntaxe ». J'ai essayé d'ajouter "window.Namespace = {}" et ça ne marche pas non plus.

Merci .. :)

Answer 1

D'habitude, je vous conseille de faire (en supposant Namespace n'est pas défini ailleurs):

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

plus souple, mais plus complexe, approche:

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 || {})); 

Ce construit Namespace.MyClass comme ci-dessus, mais ne compte pas sur Namespace déjà existant. Il va le déclarer et le créer s'il n'existe pas déjà. Cela vous permet également de charger plusieurs membres de Namespace en parallèle dans différents fichiers, l'ordre de chargement n'aura aucune importance.

Pour en savoir plus: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Answer 2

Une façon succincte de faire ce que vous demandez est de créer « namespace » comme un objet littéral comme celui-ci:

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

Cela pourrait provoquer des conflits si vous vouliez attacher d'autres détails à Namespace dans d'autres fichiers, mais vous pouvez contourner cela en créant toujours l'espace de noms en premier, puis en définissant les membres explicitement.

Answer 3

YUI a une méthode agréable pour déclarer les espaces de noms

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; 
} 

Placez-dessus de toute fonction que vous souhaitez namespace comme ceci:

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

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

Cette méthode est réellement autonome et peut facilement être adapté à votre application. Recherchez et remplacez simplement "YAHOO" par l'espace de noms de base de votre application et vous obtiendrez quelque chose comme MyOrg.namespace. La bonne chose avec cette méthode est que vous pouvez déclarer les espaces de noms à toute profondeur sans avoir à créer des réseaux d'objets entre les deux, comme pour « UI » ou « contrôle »

Answer 4

Commander le namespace library, il est très léger et facile à mettre en œuvre .

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

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

Il prend en charge l'imbrication automatique ainsi

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

généreraient la hiérarchie des objets nécessaires, si MyClass, SubClass n'a pas déjà exister.

Answer 5

bob.js a belle syntaxe pour définir 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

Automatiser déclaration namespaces en javascript est très simple que vous pouvez voir:

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); 

Essayez-: http://jsfiddle.net/stamat/Kb5xY/ Blog post: http://stamat.wordpress.com/2013/04/12/javascript-elegant-namespace-declaration/

Answer 7

Ceci est le modèle de conception que j'utilise qui permet le nom imbriqué espaces ainsi que l'ajout de l'espace de noms plus tard (même à partir d'un fichier JS séparé) de sorte que vous ne pollue pas l'espace de noms global:

Exemple: 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'); 

Voici comment ajouter MyObject d'un autre JavaScript fichier:

(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 

Cette ressource m'a aidé à apprendre tout sur les différents modèles de conception 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)