generador - que es prototype en javascript

¿Cómo puedo dividir mi código javascript en archivos separados?

Question

Estoy leyendo la Guide Javascript de Mozilla. Y cuando contrastaron JS con Java, me hizo pensar que el código Java se puede dividir fácilmente con cada clase en su propio archivo. Después de buscar más, entiendo que se puede lograr lo mismo en JS con espacios de nombre y patrón de módulo; lo confundí pero me confundí (especialmente al llamar a un constructor declarado en File1.js a File2.js)

Así que aquí está la jerarquía:

Pero no puedo encontrar la manera de hacerlo funcionar correctamente.

¿Cómo puedo simplemente ir desde

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

a esto :

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

Answer 1

Debería tener un objeto de espacio de nombre global al que cada módulo tenga acceso y escriba. Modifica tus archivos de esta manera:

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

y Manager.js podría verse como

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

Este es, por supuesto, un ejemplo muy simplificado. Porque el orden de carga de archivos y dependencias no es juego de niños. Hay algunas buenas bibliotecas y patrones disponibles, te recomiendo que mires los patrones de módulos requeridos por JS y AMD o CommonJS . http://requirejs.org/

Answer 2

No necesitas hacer nada de manera diferente. Solo incluye los archivos de script y funcionan como si fuera un solo archivo.

Javascript no tiene alcance de archivo. Una vez que se analiza el código, no importa de dónde vino el código.

Answer 3

Para proyectos pequeños y medianos como un sitio web o un juego, el espacio de nombres y los constructores nativos funcionan muy bien. Son una mala elección cuando el orden de carga es demasiado complejo de manejar sin algún tipo de carga automática.

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

Tenga en cuenta que las propiedades dentro de la función constructora del empleado son visibles para el administrador. La new palabra señala un constructor. Esto también es posible sin un constructor devolviendo propiedades públicas.