分裂的JavaScript分成幾個文件

我有一些JavaScript代碼基本上是分裂的JavaScript分成幾個文件

$(document).ready(function() { 
    // Global variable definitions 
    // Bunch of functions depending on variables 
});

有沒有辦法對我來說，拆分這些功能成幾個文件，即使他們都是大多依賴對方？

我正在創建一個html5遊戲，我想分離很多代碼，例如我想要繪製對象的代碼在特定文件中，代碼用於更新另一個文件中的遊戲狀態等所以我仍然可以訪問所有的全局變量。

有沒有辦法做到這一點沒有很多麻煩或重寫所有的代碼？

來源

2013-05-25 Haffi112

爲jquery添加標籤 – Prashant16

爲什麼選擇jquery標籤？雖然有一些jQuery代碼，但問題根本與jQuery無關。 –

很多人都在爲此苦苦掙扎，就像你現在正在做的一樣。

舊的方法是使用名稱空間對象，如MYAPP。這樣，唯一的全局變量是MYAPP，並且您將所有函數/變量放在它上面，如下所示：

file1。JS

(function() { 
    var MYAPP = MYAPP || {}; 

    MYAPP.func = function() { console.log(1); }; 
}());

file2.js

(function() { 
    var MYAPP = MYAPP || {}; 

    MYAPP.func(); // 1 
}());

的主要問題與瀏覽器端的JavaScript是，它沒有「有」或「規定」，爲其他服務器端語言。這使得很難「包含」一個JS文件（以及它的函數/變量）在你想要的地方。

今天，人們已經想過這個問題，並解決了這個問題主要是在兩個方面：

的AMD方式：異步模塊定義，讓你異步加載其他JS文件，因此具有某種瀏覽器的的方「包括」。這種圖書館的最好例子是require.js。異步加載對於開發目的是有利的，但是生產代碼必須預先編譯用於性能問題。 CommonJS方法：使用node.js方法，您同步需要一個模塊，並且使用module.exports對象定義模塊。但是，在瀏覽器上使用代碼之前，它需要編譯部分。這種庫的最好例子是browserify。請注意，編譯部分幾乎可以與觀察者無縫對接。

來源

2013-05-25 13:22:12

我最近聽說過很多關於AMD的好東西。你有關於這個問題的首選閱讀嗎？ – SomeShinyObject

@ChristopherW老實說，我偏好用於瀏覽。但是如果你想開始使用requirejs.org的文檔，那真的很不錯。 –

我會檢查出兩者。謝謝 – SomeShinyObject

如果你真的需要從任何地方訪問這些全局變量，還有很多方法可以模塊化你的代碼。這裏有一個：

// file 1 
(function(){ 
    myapp = myapp || {}; 
    myapp.myvar = ...; 
    myapp.myfunc = function(){...}; 
})(); 

// file 2 
(function(){ 
    myapp = myapp || {}; 
    myaapp.myothervar = ... 
    myapp.myotherfunc = function(){...}; 
    myapp.start = function(){...}; 
    } 
})(); 

// last file 

$(myapp.start);

但是你顯然將不得不重構你的代碼。

一個變體是定義子模塊，以便「全局變量」不那麼全局。如果你不暴露太多，它通常更易於管理：如果你有20個文件，並且任何文件的任何LOC都可以訪問其他地方定義的任何變量，那麼知道會發生什麼會有點困難。

來源

2013-05-25 13:13:15

謝謝，這看起來像一個可以爲我工作的方法。 – Haffi112

@Denys，你的代碼缺少在文件1和文件2末尾的圓括號。 – Codemonkey

@Codemonkey對。固定（不要猶豫，下次自己做）;） –

看看命名空間：

http://addyosmani.com/blog/essential-js-namespacing/

http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

命名空間是module pattern的概念。

通過使用代碼結構的分層方法，您可以從抽象移動到更具體的對象來構建代碼。通常你會從一個首要的對象開始。

var JSApp = JSApp || {}; 
JSApp.someMethod = function() {}; 
JSApp.someProperty = "foo"; 
JSApp.someObject = { 
    internalStuff: "bar" 
}; 
JSApp.implement = function() { 
    this.someMethod(); 
};

在不同的文件中：

JSApp.someFactory = function() { 
    //JSApp is the common namespace. 
};

建立一個總體結構，像這樣允許單個全球。現在，您可以將代碼添加到JSApp對象中，將代碼分解爲多個模塊（不同）文件。

您只需要在$(document).ready()回撥中撥打任何需要的電話即可。

$(document).ready(function() { 
    JSApp.implement(); 
});

當然，也有檢查，你去周圍的所有不管三七二十一一個命名空間，分配對象之前，應該執行，即使你認爲它應該在那裏。

來源

2013-05-25 13:15:25 SomeShinyObject

啊，我現在看到了，謝謝你提供的信息豐富的答案！ :) – Haffi112

分裂的JavaScript分成幾個文件

回答

相關問題