如何模块化javascript？

我有两个网页（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 ...
}

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

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

它有效，但似乎不聪明。我在项目中复制了命名空间“UI”

---

有更好的办法吗

解决方案是构建您不需要的代码，并复制代码。 但是如果您想坚持使用它，那么您可以创建一个名为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获取脚本的名称，这是怎么回事

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>  

var-UI=aUI；

---

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

这听起来像是一个需要通过继承来解决的经典问题。在javascript中，可以通过多种方式实现这一点。这里有几个例子

• 经典传承：
• 原型遗传：
• dojo.declare：*

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

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");

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

b、 php

*世界上有太多jQuery示例，无法再制作另一个，所以这次您可以使用Dojo；）

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