如何模块化javascript？

Question

我有两个网页(a.php和b.php)。它们的逻辑非常相似，但UI却截然不同。我写了两个javascript。

它们看起来都像：

aUI = {
    displayMessage = function ...
    showDetails = function ...
}
function foo() {
    aUI.displayMessage();
    aUI.showDetails();
    //    and other things about aUI.displayMessage() and aUI.showDetails()...
}
foo();

aUI.displayMessage()不同于bUI.displayMessage()。但是a.js和b.js有相同的foo()。

我提取了foo()。所以现在我有三个.js: aUI.js、bUI.js和logic.js。

logic.js：

function foo() {
    UI.displayMessage();
    UI.showDetails();
    //other things about UI
}
foo();    

aUI.js和bUI.js：

UI = {
    displayMessage = function ...
    showDetail = function ...
}

a.php如何知道它应该使用aUI.js？我写了一个简单的实现：

<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript" src="logic.js"></script>  

它是有效的，但看起来并不聪明。我在项目中有重复的命名空间'UI‘。

有没有更好的方法？

Answer 1

那这个呢？

aUI.js和bUI.js有自己的命名空间，就像aUI和bUI一样。并添加更多代码，如下所示：

<script type="text/javascript" src="aUI.js"></script>
<script type="text/javascript">
  var UI = aUI;
</script>
<script type="text/javascript" src="logic.js"></script>  

这种方法解决了命名空间'UI‘重复的问题。我认为这是一种DI。

Answer 2

这听起来像是一个经典的问题，需要通过继承来解决。在javascript中，您可以使用任意数量的方法来完成此操作。这里有几个例子。

经典继承：http://www.crockford.com/javascript/inheritance.html

• Prototypal继承：http://javascript.crockford.com/prototypal.html

• dojo.declare：http://docs.dojocampus.org/dojo/declare *

例如，如果您在Dojo中执行此操作，它将如下所示

ui-base.js

dojo.declare("_UI", null, {
  displayMessage: function() { },
  showDetails: function() { },
  foo: function() {
    this.displayMessage();
    this.showDetail();
  }
});

ui-a.js

dojo.declare("UI", _UI, {
  displayMessage: function() { /* Override and define specific behavior here */ },
  showDetails: function() {  /* Override and define specific behavior here */ }
});

ui-b.js

dojo.declare("UI", _UI, {
  displayMessage: function() { /* Override and define specific behavior here */ },
  showDetails: function() {  /* Override and define specific behavior here */ }
});

然后，在PHP中只需包含适当的javascript文件

a.php

<script src="ui-base.js"></script>
<script src="ui-a.js"></script>

b.php

<script src="ui-base.js"></script>
<script src="ui-b.js"></script>

*世界上有太多的jQuery示例，无法再创建另一个示例，因此这一次您将获得Dojo ;)

Answer 3

解决方案是架构你的代码，你不需要这样做和重复代码。但是如果您想继续使用它，那么可以创建一个名为logic.php的文件，在里面做如下所示

header("Cache-Control: no-cache");
$currentScript = reset(explode(".", end(explode("/", $_SERVER["SCRIPT_NAME"]))));
read_file("scripts/" . $currentScript . ".js");
echo "\n;\n";
read_file("scripts/logic.js");

和html格式

<script type="text/javascript" src="logic.php"></script>

这样，脚本将更改其内容，因为它将根据脚本的名称和logic.js的内容连接所需的脚本。这样做的缺点是它会使浏览器的缓存失效。

另一种解决方案是在logic.js中同步加载您需要的另一个模块。您可以从document.location.href获取脚本的名称