Question

我有两个网页（a.php＆amp; 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
原型继承：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

获取脚本的名称

如何模块化javascript？

3 个答案: