如何模块化JavaScript？

2018-06-19 00:41:38

我有两个网页（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”。

有没有更好的办法？

那这个呢？

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。

这听起来像是一个要通过继承来解决的经典问题。您可以在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;）

解决方案是构建您的代码，您不需要执行此操作并重复代码。但是如果你想坚持下去，那么你可以创建一个名为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>

这样脚本会改变它的内容，因为它会根据它的名称和逻辑.js的内容连接所需的脚本。这样做的缺点是无效的浏览器缓存。

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

链接地址: http://www.djcxy.com/p/53601.html

上一篇: How to modularize javascript?

下一篇: Submitting to Apple: XCode "submit" or Application Loader?