如何模块化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。