Création d'objets javascript à partir de fichiers différents
J'ai essayé de le faire en javascript pour un certain temps maintenant, mais je veux qu'il soit "orienté objet" donc, je suis en train de créer différentes classes javascript dans des fichiers différents et d'essayer de créer un objet et l'appel de méthodes dans un fichier différent de la fonction, mais il ne semble pas fonctionner.
C'est ce que j'ai à ce jour:
person.js
function Person(name, age, gender)
{
this.age = age;
this.name = name;
this.gender = gender;
this.job;
this.setJob = function(job)
{
this.job = job;
}
this.getAge = function()
{
return this.age;
}
this.getName = function()
{
return this.name;
}
this.getGender = function()
{
return this.gender;
}
}
Job.js
function Job(title)
{
this.title = title;
this.description;
this.setDescription = function(description)
{
this.description = description;
}
}
main.js
function main()
{
var employee = new Person("Richard", 23, male);
document.getElementById("mainBody").innerHTML = employee.getName();
}
index.html
<!DOCTYPE HTML>
<HTML>
<head>
<title>javascript test</title>
<script src="main.js" type="javascript"></script>
</head>
<body>
<p id="mainBody"></p>
</body>
</HTML>
de l'aide ou des conseils seraient grandement appréciés.
Merci beaucoup
EDIT:
Merci beaucoup pour toutes les réponses et suggestions, cependant, j'ai inclus tous mes fichiers javascript et encore ça ne fonctionne pas...
source d'informationauteur Danny
Vous devez vous connecter pour publier un commentaire.
Actuellement le JavaScript n'est pas assez malin pour trouver vos dépendances sans aide.
Vous avez besoin:
Remarque:
Si vous voulez à la demande de la charge des dépendances, alors vous pouvez utiliser AMD (Asynchronous Module Definition) avec requirejs ou quelque chose d'autre.
En utilisant les processeurs AMD, vous pouvez définir quelque chose comme:
Définir la méthode accepte deux arguments: les dépendances et la fonction qui définit le module.
Lorsque toutes les dépendances sont chargés ils sont passés comme arguments à la fonction qui est de la définition du module.
Plus qu'une chose à remarquer, c'est que
Person
etJob
ne sont pas des classes. Ils sont juste des fonctions (fonctions constructeur) qui produit des objets en se basant sur des règles dans leurs définitions.Fichiers ne sont pas automatiquement chargé, vous devez ajouter chaque .fichier js pour le document avec des balises de script et dans le bon ordre, sinon vous obtiendrez des erreurs.
Vous voudrez peut-être regarder dans requirejs.org pour la gestion de la dépendance, c'est la hawtest chose ces derniers temps, jusqu'à ES6 devient dominant de toute façon.
vous pouvez essayer d'inclure le 1er et le 2ème fichiers javascript en premier.
comme:
les méthodes de la classe doivent être définis à l'aide de prototype de sorte qu'ils reçoivent cette référence,
comme ça:
Vous avez besoin de retourner l'objet créé par
Person
afin de constituer une nouvelle instance de laPerson
prototype.Ce n'est pas de travail parce que, selon votre code HTML, le navigateur est seulement de chargement main.js
Depuis Javascript s'exécute dans le navigateur, pas sur le serveur où les autres fichiers, le navigateur va essayer d'exécuter main.js et l'échec, car elle n'a pas accès aux classes dans les autres fichiers. Si vous incluez chacun des fichiers (en veillant à ce que chaque fichier est inclus après la une il exige de), vous devez avoir plus de succès.
Par exemple:
Je vois trois problèmes avec le code.
La page n'importez pas les bon fichiers Javascript externes
Mâle doit être une Chaîne littérale
Lorsque l'interpréteur rencontre
male
dans lePerson
constructeur qu'il ressemble à une variable, il ne peut pas trouver.Le code doit appeler la fonction principale.
Sans un appel à la fonction principale le code n'est jamais exclu.
De Travail Exemple: http://jsfiddle.net/R7Ybn/
ES6: https://www.sitepoint.com/understanding-es6-modules/
Pris en charge dans Safari, dès l'Été 2017, mais pas de support dans les autres navigateurs. Dans un an ou deux, il me semble que ça va être pris en charge par le Bord, Firefox, Chrome, Opera, et safari. Donc, gardez à l'esprit?
https://caniuse.com/#feat=es6-module
J'ai eu un problème similaire et le problème, pour moi, découle de l'écriture
"script src="Person.js" type="javascript"
au lieu de
"script src="Person.js" type="text/javascript"
dans mon index.html fichier
Espère que cette Aide,