将javascript分成几个文件

Question

我有一些javascript代码,基本上

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

我有什么方法可以将这些功能分成几个文件,即使它们大多数都是相互依赖的？

我正在创建一个html5游戏,我想要分离很多代码,例如我想要将对象绘制在特定文件中的代码,用于在另一个文件中更新游戏状态的代码等等所以我可以仍然访问所有全局变量.

有没有办法在没有麻烦或重写所有代码的情况下做到这一点？

Answer 1

正如你现在所做的那样,很多人都在努力解决这个问题.

旧的方法是拥有一个名称空间对象,比如MYAPP.这样,唯一的全局变量就是MYAPP,你把所有的函数/变量放在它上面,如下所示:

file1.js

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

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

file2.js

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

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

浏览器端javascript的主要问题是它没有"include"或"require",就像其他服务器端语言一样.这使得很难在你想要的地方"包含"一个JS文件(以及它的函数/变量).

如今,人们已经考虑过这个问题并主要通过两种方式解决了这个问题:

• AMD方式:异步模块定义,允许您异步加载其他JS文件,从而具有某种浏览器端"包含".这种库的最好例子是require.js.异步加载适用于开发目的,但生产代码必须针对性能问题进行预编译.
• CommonJS方式:使用node.js方式,同步需要一个模块,并使用该module.exports对象定义一个模块.但是,在浏览器上使用代码之前,它需要编译部分.这种库的最好例子是browserify.请注意,编辑部分几乎可以与观察者无缝连接.