web-dev-qa-db-fra.com

Comment puis-je diviser mon code javascript en fichiers séparés?

Je lis le Javascript Guide de Mozilla Et quand ils ont opposé JS à Java, ça m'a fait penser, Java le code est se séparer facilement avec chaque classe dans son propre fichier. js dans File2.js)

voici donc la hiérarchie:  class organization

Mais je n'arrive pas à comprendre comment le faire fonctionner correctement

comment est-ce que je vais simplement

//employe.js
function Employee () {
  this.name = "";
  this.dept = "general";
}

function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

function WorkerBee () {
  this.projects = [];
}
WorkerBee.prototype = new Employee;

function SalesPerson () {
  this.dept = "sales";
  this.quota = 100;
}
SalesPerson.prototype = new WorkerBee;

pour ça :

 // employe.js
function Employee () {
  this.name = "";
  this.dept = "general";
}

 // Manager.js   
function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

 // WorkerBee.js     
function WorkerBee () {
  this.projects = [];
}
WorkerBee.prototype = new Employee;

 // SalesPerson.js      
function SalesPerson () {
 this.dept = "sales";
 this.quota = 100; 
 }
SalesPerson.prototype = new WorkerBee;
javascriptclassdependencieshierarchy
24
MimiEAM

Vous devez avoir un objet d'espacement de noms global auquel chaque module doit accéder et écrire. Modifiez vos fichiers comme suit:

// employe.js

window.myNameSpace = window.myNameSpace || { };

myNameSpace.Employee = function() {
    this.name = "";
    this.dept = "general";
};

et Manager.js pourrait ressembler à

// Manager.js

window.myNameSpace = window.myNameSpace || { };

myNameSpace.Manager = function() {
    this.reports = [];
}
myNameSpace.Manager.prototype = new myNameSpace.Employee;

Il s'agit bien sûr d'un exemple très simplifié. Parce que l'ordre de chargement des fichiers et des dépendances n'est pas un jeu d'enfant. Il existe de bonnes bibliothèques et modèles disponibles, je vous recommande de consulter requireJS et [~ # ~] amd [ ~ # ~] ou Modèles de module CommonJS . http://requirejs.org/

19
jAndy

Vous n'avez rien à faire différemment. Il suffit d'inclure les fichiers de script et ils fonctionnent comme s'il s'agissait d'un seul fichier.

Javascript n'a pas de portée de fichier. Une fois le code analysé, peu importe d'où vient le code.

7
Guffa

Pour les petits et moyens projets comme un site Web ou un jeu, l'espace de noms et les constructeurs natifs fonctionnent très bien. Ils sont un mauvais choix lorsque l'ordre de chargement est trop complexe à gérer sans une sorte de chargement automatique.

index.html:

<script src="Employee.js"></script>
<script src="Manager.js"></script>

Manager.js:

var Manager = function() {
    var employee1 = new window.Employee(this);
    var employee2 = new window.Employee(this);
};

Employee.js:

var Employee = function(boss) {
    // work stuff here
    this.wage = 5;
};

Remarque, les propriétés à l'intérieur de la fonction constructeur d'employé sont visibles par le gestionnaire. Le mot new signale un constructeur. Ceci est également possible sans constructeur en renvoyant un objet avec des propriétés au lieu d'une fonction comme indiqué ci-dessus.

3
Eddie