Как я могу разделить код javascript на отдельные файлы?

Я читаю Javascript Guide из Mozilla И когда они сравнивали JS с Java, мне казалось, что Java-код легко разделяется с каждым классом в собственном файле. после дальнейшего поиска, я понимаю, что то же самое можно сделать в JS с расширением namespacing и шаблоном модуля - я испортил его, но очень запутался (особенно при вызове конструктора, объявленного в File1.js в File2.js)

так вот иерархия:

Но я просто не могу понять, как правильно заставить его работать.

как просто перейти из

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

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

Ответ 1

У вас должен быть один глобальный объект пространств имен, к которому каждый модуль должен иметь доступ и писать. Измените свои файлы следующим образом:

// employe.js

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

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

и Manager.js могут выглядеть как

// Manager.js

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

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

Это, конечно, очень упрощенный пример. Потому что порядок загрузки файлов и зависимостей не является дочерним. Есть несколько хороших библиотек и шаблонов, я рекомендую вам взглянуть на шаблоны модулей requireJS и AMD или CommonJS. http://requirejs.org/

Ответ 2

Вам не нужно ничего делать по-другому. Просто включите файлы script, и они работают так, как будто это один файл.

Javascript не имеет области действия. После анализа кода не имеет значения, откуда пришел код.

Ответ 3

Для небольших и средних проектов, таких как веб-сайт или игра, наборы имен и конструкторы работают очень хорошо. Они являются плохим выбором, когда порядок загрузки слишком сложный для обработки без какой-либо автозагрузки.

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

Обратите внимание, что свойства внутри функции конструктора сотрудника видны менеджеру. Слово new сигнализирует конструктор. Это также возможно без конструктора по возврату общедоступных свойств.