Comment mettre en place JavaScript espace de noms et classes correctement?

Il semble il ya tellement de façons de mettre en place un JavaScript de l'application de sorte qu'il est source de confusion quant à ce qui est la bonne ou la meilleure. Existe-il une différence dans les techniques ci-dessous, ou une meilleure façon de faire cela?

MyNamespace.MyClass = {
    someProperty: 5,
    anotherProperty: false,

    init: function () {
        //do initialization
    },

    someFunction: function () {
        //do something
    }
};

$(function () {
    MyNamespace.MyClass.init();
});

D'une autre manière:

MyNamespace.MyClass = (function () {
    var someProperty = 5;
    var anotherProperty = false;

    var init = function () {
        //do something
    };

    var someFunction = function () {
        //do something
    };

    return {
        someProperty: someProperty
        anotherProperty: anotherProperty
        init: init
        someFunction: someFunction
    };
}());

MyNamespace.MyClass.init();

La première technique se sent plus comme une classe. Je viens de côté serveur d'arrière-plan si cela fait une différence. La deuxième technique semble plus redondant et un peu maladroit, mais je vois ce beaucoup trop. Quelqu'un peut-merci de m'éclairer et de conseiller la meilleure façon d'aller de l'avant? Je veux créer une application avec beaucoup de classes de parler les uns aux autres.

Ce n'est pas en utilisant la programmation orientée objet JS tellement que l'utilisation du motif de module.
Aussi, vous avez implicite que les deux méthodes sont équivalentes, mais la deuxième méthode n'est pas valable. La manière que vous avez déclaré les variables privées est syntaxiquement invalide, vous voulez juste un régulier instruction var.
Thx, j'ai fixé la deuxième méthode.
Si vous êtes intéressés à en apprendre plus, je vous recommande fortement de Douglas Crockford du Javascript: Les Bonnes Pièces. Il offre non seulement un Javascript approche classique de la programmation orientée objet, mais explique aussi comment le Javascript est plus LISP-comme des pièces peut être utilisé pour créer d'autres structures étonnantes. À partir du sol-up, il explique comment et pourquoi chaque structure qui fonctionne et ce qui fonctionne le mieux. Aussi, vous pouvez être personnellement intéressé à l'apprentissage CoffeeScript, en particulier pour ses construit en la structure de la classe.

InformationsquelleAutor TruMan1 | 2012-07-25

Faire aucune de ces choses.

Faire un javascript "classe":

var MyClass = function () {

    var privateVar; //private
    var privateFn = function(){}; //private 

    this.someProperty = 5;  //public
    this.anotherProperty = false;  //public
    this.someFunction = function () {  //public
        //do something
    };

};

MyNamespace.MyClass = new MyClass();

Un avec statique vars:

var MyClass = (function(){

    var static_var; //static private var

    var MyClass = function () {

        var privateVar; //private
        var privateFn = function(){}; //private 

        this.someProperty = 5;  //public
        this.anotherProperty = false;  //public
        this.someFunction = function () {  //public
            //do something
        };
    };

    return MyClass;

})();

MyNamespace.MyClass = new MyClass();

Avec un "constructeur" (tous les exemples ont un "constructeur", celui-ci possède des paramètres de travailler avec):

var MyClass = function (a, b c) {

    //DO SOMETHING WITH a, b, c <--

    var privateVar; //private
    var privateFn = function(){}; //private 

    this.someProperty = 5;  //public
    this.anotherProperty = false;  //public
    this.someFunction = function () {  //public
        //do something
    };

};

MyNamespace.MyClass = new MyClass(1, 3, 4);

Avec tous les ci-dessus vous peut faire:

MyNamespace.MyClass.someFunction();

Mais vous ne peut pas faire (de l'extérieur):

MyNamespace.MyClass.privateFn(); //ERROR!

Comment dois-je traiter l'init ou un constructeur?
le "constructeur" est tout ce qui vous passe dans la new MyClass(). Je vais ajouter un exemple avec un constructeur.
ajouté.
Un "constructeur" n'a pas à avoir des paramètres.
ce qui est vrai. J'ai juste mis là pour l'ambiance.
J'ai ajouté la note à la poste.
Comment éviter les conflits avec un autre chargé de la bibliothèque qui crée un "var MyClass" dans l'espace de noms global ainsi? Il n'y a pas moyen de contourner cela et ont à choisir des noms uniques pour mes classes comme "var TrumanMyClass = function ()..."?
Ou juste le nom de ur de la classe au sein de votre espace de noms ^_^ il n'y a pas de raison de faire de ce mondial, j'ai juste mis là comme un exemple
Comment pouvez-vous définir la classe directement dans l'espace de noms, alors? J'ai eu du mal avec ce pour un couple de jours maintenant - il y a clairement quelque chose avec la conception de JavaScript, je ne suis pas saisir... 🙁
Beaucoup appris de cette réponse. Merci s'accoupler.
Heureux de vous aider @DeeMac 🙂

InformationsquelleAutor Neal

6

Le premier exemple est tout simplement un Objet littéral - il ne peut pas être instanciée, et n'a pas privé les membres. Le deuxième exemple est une mauvaise syntaxe (var someProperty: 5 devrait être var someProperty = 5), mais est à l'aide d'une fermeture à encapsuler privé interne de l'état au sein d'une auto-invocation de fonction anonyme.

La deuxième approche semble meilleure pour l'encapsulation des membres privés, mais qui pourrait être plus "orienté Objet" et en fait une classe instanciable:
```
MyNamespace.MyClass = function() { ... };
MyNamespace.MyClass.prototype.someProperty = 'foo';
```
Ensuite, vous pouvez instancier avec le "nouveau" mot-clé:
```
var aClass = new MyNamespace.MyClass();
aClass.init(...);
```
- Thx je corrige la deuxième méthode avec le signe "égal" dans mon post.
InformationsquelleAutor chrisf

- Je utiliser la syntaxe suivante pour les classes instanciables avec l'espace de noms

 var MYNamespace = MYNamespace|| {};

 MYNamespace.MyFirstClass = function (val) {
        this.value = val;
        this.getValue = function(){
                          return this.value;
                       };
    }

var myFirstInstance = new MYNamespace.MyFirstClass(46);
alert(myFirstInstance.getValue());

jsfiddle: http://jsfiddle.net/rpaul/4dngxwb3/1/

InformationsquelleAutor Razan Paul

Pourquoi vous devriez ne jamais les utiliser

 return { methodName : methodDelegate}

comme dans le deuxième exemple:

MyNamespace.MyClass = (function () {
    var someProperty = 5;

    var init = function () {
        //do something
    };

    return {
        someProperty: someProperty
        someFunction: someFunction
    };
}());

MyNamespace.MyClass.init();

Lorsque vous utilisez l'espace de noms, vous devez penser à ce sujet en tant que sujet de déclaration, pas de l'instance.

MyNamespace = {};
MyNamespace.sub = {};
MyNamespace.anotherSub = {};
MyNamespace.sub.MyClass = (function () {
var static_var; //static private var
var MyClass2 = function () {
var privateVar; //private
var privateFn = function () { }; //private 
this.someProperty = 5;  //public
this.anotherProperty = false;  //public
this.someFunction = function () {  //public
//do something
};
};
return MyClass2;
})();
debugger;
var c1 = new MyNamespace.sub.MyClass();
c1.someProperty = 1; //creates 5->1.
var c2 = new MyNamespace.sub.MyClass();
c2.someProperty = 2;  //creates 5->2. c1 is still 1
debugger;
var myClass = function () {
var someProperty = 5;
var anotherProperty = false;
var init = function () {
//do something
};
var someFunction = function () {
//do something
};
return {
someProperty: someProperty,
anotherProperty: anotherProperty,
init: init,
someFunction: someFunction
};
};
MyNamespace.MyClass = myClass();
var c2 = MyNamespace.MyClass;
//how  are planning to create one more object, while it's a reference? copy      //the whole one?
c2.someProperty = 2; //changes 5 -> 2
var c3 = MyNamespace.MyClass.init(); //create 2 instead of 5
c3.someProperty = 3;    //changes c3 and c3 from 2 to 3.
console.log(c2.someProperty + c3.someProperty);

Et pas de metter combien Module anti-patter était populaire. Déclaration vous donne la possibilité d'utiliser le même code avec les différentes instances dans un de la manière prévue pour les autres développeurs . La qualité du code et de la simplicité de sa lecture augmente. L'objectif de n'importe quel développeur est d'écrire un code simple à lire, pas à court terme ou de la R. D. Y. - mais simple à lire, et être understanded par un autre développeur. Qui diminue le nombre de bugs de la première. (c) S. McConnell

InformationsquelleAutor Artem G

1

Comment combiner l'espace de noms et la déclaration de la classe:
```
var ns = { //your namespace
my_value: 1, //a value inside the namespace to avoid polluting
MyClass: function() { //a class inside the namespace
this.class_property: 12,
this.class_method: function() {
console.log("My property: " + this.class_property);
}
},
myFunction: function() { //a function inside a namespace
console.log("I can access namepsace value if you don't use 'new': " + this.my_value);
}
};
```
Accéder à votre valeur:
```
console.log(ns.my_value);
```
Maintenant, pour la Classe et la Fonction: Si vous utilisez new, le mot this à l'intérieur de la fonction de point à son constructeur. Si vous n'utilisez pas new, this aura point de l'espace de noms. Donc,

À l'aide d'une Classe:
```
var obj = new ns.MyClass();
```
À l'aide de la Fonction:
```
ns.myFunction();
```
Si vous construisez un objet sans new, this aura point de l'espace de noms, de sorte que l'espace de noms sera "détruit" parce que MyClass.class_property et MyClass.class_method seront ajoutés.

InformationsquelleAutor marirena

Vous devez vous connecter pour publier un commentaire.