web-dev-qa-db-ja.com

JavaScriptコードを個別のファイルに分割するにはどうすればよいですか？

私はJavaScriptを読んでいます ガイド Mozillaからそして、彼らがJSをJavaと対比させたとき、それは私に考えさせました、Javaコードは自分のファイル内の各クラスで簡単に分割できます。さらに検索した後、JSでネームスペースとモジュールパターンを使用して同じことができることを理解しています。 jsをFile2.jsに）

だからここに階層があります：  class organization

しかし、私はそれを適切に機能させる方法を理解できません

単純にどうやって行くのですか

//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;
javascriptclassdependencieshierarchy
24
MimiEAM

すべてのモジュールがアクセスして書き込む必要がある1つのglobal名前空間オブジェクトが必要です。次のようにファイルを変更します。

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

19
jAndy

別に何もする必要はありません。スクリプトファイルを含めるだけで、1つのファイルのように機能します。

JavaScriptにはファイルスコープがありません。コードが解析されると、コードがどこから来たかは問題ではありません。

7
Guffa

ウェブサイトやゲームのような中小規模のプロジェクトでは、ネイティブのネームスペースとコンストラクターが非常にうまく機能します。読み込み順序が複雑すぎて、なんらかの自動読み込みなしでは処理できない場合は、これらは不適切な選択です。

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 Wordはコンストラクタを示します。これは、上記の関数の代わりにプロパティを持つオブジェクトを返すことにより、コンストラクターなしでも可能です。

3
Eddie