分裂的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分成几个文件

回答

相关问题