我在一个文件中创建了一个包含所有代码的javascript应用程序.该应用程序已经增长了很多,我认为是时候将它分成多个文件,但我很难搞清楚如何做到这一点.我认为问题在于我如何决定构建应用程序,该应用程序使用以下模板:
var myApp = function(){
//there are several global variables that all of the modules use;
var global1, global2, module1, module2;
global1 = {
prop1:1
};
//There are also several functions that are shared between modules
function globalFunction(){
}
var ModuleOne = function(){
function doSomething(){
//using the global function
globalFunction();
}
return{
doSomething:doSomething
}
};
var ModuleTwo = function(){
function doSomething(){
//module 2 also needs the global function
globalFunction();
//Use the functionality in module 1
//I can refactor this part to be loosely coupled/event driven
module1.doSomething();
}
};
module1 = new ModuleOne();
module2 = new ModuleTwo();
};
即使所有模块都是松散耦合和事件驱动的,我仍然不知道如何在每个模块依赖共享函数/变量的情况下将其拆分为多个文件.有没有人有建议？
nnn*_*nnn 40
看一下本文中的设计模式:http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - 您可以将模块定义分割为多个文件,以便让我们共同属性可以共享,但也允许您创建仅对特定文件私有的变量或方法.
基本思想是单个JS文件使用如下代码添加到同一模块:
var MODULE = (function (my) {
var privateToThisFile = "something";
// add capabilities...
my.publicProperty = "something";
return my;
}(MODULE || {}));
在每个JS文件中,如果MODULE已经定义了(来自另一个JS文件),则添加到它,否则你创建它.您可以对其进行设置,使其(大部分)与各种文件的顺序无关.
文章详细介绍了几种变体,当然你可能会想出你自己的调整......
并不是增加混乱，而是出于C ++的背景，我试图以下面描述的方式构造类似于c ++命名空间的东西。它有效，但是我想知道这是否是OP可接受的模式？
--------------------------------文件main.js：------------- ---
var namespacename = function(){}
namespacename.mainvalue = 5;
namespacename.maintest = function() {
var cm = new namespacename.game();
cm.callme();
}
--------------------------------文件game.js：------------- ---
namespacename.gamevalue = 15;
namespacename.game = function(){
this.callme = function(){
console.log( "callme" );
}
}
namespacename.gametest = function() {
console.log( "gametest:gamevalue:" + this.gamevalue );
console.log( "gametest:mainvalue:" + this.mainvalue );
}
--------------------------------文件index.html：------------- --
<html>
<head>
<title>testbed</title>
</head>
<body onload="init();">
</body>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
init = function()
{
namespacename.maintest();
namespacename.gametest();
console.log( "html main:" + namespacename.mainvalue );
console.log( "html game:" + namespacename.gamevalue );
}
</script>
</html>